Designing a website from scratch: The process
In this post, I will guide you through the process of designing a website from scratch. This is a design process based on my own experience. It includes initial planning, gathering ideas, sketching wireframes and creating the design.
For my example project, I will be creating a design for local Sheffield based company Twisted Burger Co, as they didn’t have an existing website, but they are very active online through social media (plus, here at Evoluted we are a big fan of their work).
1 - Planning
Planning your website is arguably the most important part of the process. The decisions you make here will dictate how the project develops. Get a good understanding of what the client wants to achieve and work with any ideas they have.
Analyse the website requirements and list the main priorities for site visitors, this will help you create your wireframes later. In the design for Twisted Burger Co, website users are likely to visit to view the food menu & find out opening hours. They may want to also find the restaurant locations and see if there are any special offers or promotions. The design will reflect these key requirements.
As Twisted Burger Co also has a strong social media presence & following, the majority of their current customers are smart phone users. So it is important that the site works well on mobile devices. A responsive website design is appropriate in this case.
Create the design around the content. There is no point creating a beautiful design if you have to cram a load of extra copy in at a later stage. Likewise, your design may have to work around the quality of imagery and brand assets available.
Research is also important, see what other websites are doing. These won’t necessarily be direct competitors, but often in a similar field or genre. Here I have found a selection of “Burger Joint” websites from places like London & New York. Whilst they are all very different, there is a popular trend for prominent quality imagery, promoting their delicious burgers.
2 - Wireframes
After initial planning & research, I like to sketch out a rough wireframe or plan of the website layout.
You can use online tools such as balsamiq.com to create wireframes; one advantage of this is that they are editable. This can be really useful for larger projects when you may need to present wireframes to a client, before creating the actual design. I have used Balsamiq for a couple of large web app projects and would recommend it.
For the majority of projects, a pencil & paper is ideal for creating a quick wireframe. These are often only for personal use, to help picture potential layouts and prioritise page content. This just helps to save time at design stage.
Here is a quick wireframe sketch of my proposed layout for the Twisted Burger site. I’ve based the layout around the main priorities I covered in the planning stage.
3 - Design
Now it’s time to put together your planning & wireframe with your chosen design tool, which in my case is usually Adobe Photoshop.
Whilst your wireframes are very useful guide, they are by no means set in stone. When it comes to putting together your design with real content, the wireframe layout might not be entirely appropriate, so it may be necessary to make some changes as you go.
I’m not going to go into specific details of how to create the design, but I will list out some of my personal design habits. These include:
Grid system: It’s a good to follow a grid system, it helps to structure your design & help the developers at build stage. In this instance I’ve designed the site based on the bootstrap responsive framework.
Organising your design file: I like to keep my psd files well organised, by breaking them down into sections (in a similar way to how the website will be coded - see below).
Use vector graphics & smart objects: Where possible, it’s good to use vector graphics & smart objects. This helps retain image quality when you are editing your design.
Fonts: I like to use google.com/fonts/ as they have a huge selection of fonts that can be easily implemented into your websites and are free to use. In this design, I have used “Patrick Hand SC”, which fits in nicely with Twisted Burger Co’s illustration style.
Icons: I like to use Font Awesome for website icons. These are scalable vector icons that can instantly be easily implemented & customised into your website. There is a huge selection, which is growing all the time.
Review & refine: Once a design is complete, a cycle of reviewing & refining the design often takes place. In an ideal world, both designer and client will be happy with the finished product. Here my design for the Twisted Burger Co site.
So, that’s the design process I use for the majority of the sites I work on. I hope you have found it useful. Typically once the design is approved, the site would then be passed onto our development team who will work their magic & transform the designs into a fully functioning website.
The Twisted Burger Co site is now live at twistedburger.co