Advertisement
Designing and building an entire website from scratch involves many different pieces.
It can get easier with time and practice, but you’re always starting from a blank slate for every new project which can be tough.
The best thing to do is fall into a creative routine that you can follow every time. This removes a layer of thinking so that you know exactly what you need to do for each stage of the project.
In this post I’d like to share the breakdown of a typical design process for creating a new website from scratch.
This often starts with rough ideas and leads slowly through the design process until you have a final mockup that gets coded & launched online.
This may feel clunky at first but with practice it’ll become like second nature.
Brainstorming & Inspiration
Image source: Summer Teal Simpson Hitch[1]
The first step for every project is to map out the goals and creative direction. What should this website achieve?
Where do you want this project to go? How should it look, function, and behave to entice user behaviors?
I’ll often browse through web design blogs & inspiration galleries to find various trends to piece together some ideas.
A couple favorites are Hongkiat[3] and WhatPixel[4] which both regularly publish design trends & inspiration galleries full of quality layouts.
I also like web design galleries that showcase designs based on category.
The best examples are siteInspire[5] and Webdesign Inspiration[6] because they both have dozens of categories to sort through.
Image source: webdesign-inspiration.com[7]
Google is also your best friend for inspiration.
Let’s say you’re designing a law firm website and you want some ideas. Just hit google with “law firm web design inspiration[8]” and you’re guaranteed to find plenty of ideas & examples.
At this phase you just want to gather tons of ideas from many different websites.
Start a list of your favorite features to organize what you think would fit best. You’ll take these ideas into the wireframing stage to mix & match to find whatever works best.
And if you’re working on a business project I’d also recommend planning a UX strategy, or as Jeff Gothelf calls it a product strategy[9].
This forces you to brainstorm ideas that combine the design and the user experience/user behaviors together.
Wireframing A Design
Image source: Nashatwork[10]
When you wireframe a concept you really aren’t looking for details. You just want to see the rough outline of how the site might look to the user.
This pertains more to behavior than appearance, so it’s crucial to think about the overall user experience rather than pretty aesthetics.
Wireframing should not be a one-off task. You should try wireframing multiple design ideas[11] by mixing up the concepts that you gathered in the brainstorming section.
This way you can try different styles of navigation, sidebar content, logo placements, page sizes, and basically anything else in the layout.
There are dozens of wireframing tools[12] to choose from, some are free and some are not. But my favorite is the traditional way and it’s always free: pencil and paper.
You just sketch out a rectangle and denote blocks on the page with other rectangles. You can write notes alongside the sketch to explain what each rectangle means(ie navbar or featured image).
Image source: Mike Kretz[13]
If your site will be responsive you might also sketch layouts for different breakpoints too.
There is no set number of wireframes that you need to create for each project, but aim for at least 3. This gives you a decent number to choose from and in your gut you’ll just know which one feels right.
Pixel-Perfect Mockups
There’s no shortcut to designing a mockup. You just need to take your preferred wireframe and recreate it in your design program of choice (mostly Photoshop[15] or Sketch[16]).
It doesn’t take that much effort to learn the basics of these programs for interface design. But you also won’t become a master in a day or even a month.
However the best way to become a master is to just keep practicing by building sample projects. The more you encounter problems the more you’ll have to solve them and learn from them. For example, creating a gradient button or creating a translucent navbar will require a gradient fill and opacity change, respectively.
Image source: Masudur Rahman[17]
Learning how to apply these changes in your program of choice will take time. But if you follow along with tutorials[18] you’ll learn a lot quicker.
The most important thing to remember is to use your grids and be smart about pixels. Make sure that your mockup aligns perfectly to how the website should appear in the browser.
The design should be replicable in code, otherwise it makes the developer’s(or your) job more difficult.
One of my favorite sites for mockup design tips is Photoshop Etiquette[19]. It covers a variety of free tips & tricks you can apply to your Photoshop design process that’ll edge you closer to that professional polish & finish.
Image source: photoshopetiquette.com[20]
I personally prefer Photoshop over Sketch just because it’s mostly the industry standard and I’ve been using it for over 10 years. But newer designers may prefer Sketch because it honestly is quicker and simpler for interface design projects.
Both programs are great and they can both perform the exact same tasks, albeit in different ways. But try to just pick one and stick with it for the duration of your mockup design process.
And if you need some guides to get started check out these free resources.
The Perfect Development Process
Image source: Matt Carlson[21]
Contrary to the title of this section there is no such thing as the “perfect” dev process. But each developer usually has their own preferred strategies and tools, which means you can have your own perfect dev process that’s unique to you.
If you’re not much of a developer then it may be worth finding someone to code your layouts for you. But I recommend peeking a bit into code because raw HTML/CSS is super easy to learn and nowhere near the same realm of difficulty as logical programming.
W3Schools[22] is the obvious recommended resource but there are so many other learning sites you can study too.
Start with the basics of HTML/CSS and use your mockup as an example. The more you work from real examples the more you’ll be forced to learn.
This process throws you into the fray where you’ll constantly bump into problems you don’t know how to solve. But in the process of solving these problems you’ll learn and master these techniques.
More advanced developers will follow a workflow using preprocessors like Sass[23] and Less[24]. Either one is great and they will save you time writing repetitive CSS code.
There isn’t really a single workflow that you need to follow for frontend development. Just do whatever works for you that brings your design from a static mockup into the browser.
I will recommend that every designer should follow a grid system for their designs and understand how the grid works. This makes pixel-perfect mockups a lot easier to translate into code.
Here’s some relevant reading material to get you started:
Production Launch & Beyond
Image source: Justas Galaburda[25]
Once you’re done and ready to launch just put the site online and gather feedback. Nobody gets it right on the first try and there’s always room for improvement.
So if you notice a small bug or if you’re getting specific complaints from users then take notes and be willing to revise the site. The update cycle is almost never-ending so you can always be on alert to keep up with this stuff.
The more you build websites from scratch the more you’ll learn to follow these steps from early brainstorming to final product launch, and the easier it’ll become to scale up your web design workflow.