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
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.
I also like web design galleries that showcase designs based on category.
Google is also your best friend for inspiration.
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.
This forces you to brainstorm ideas that combine the design and the user experience/user behaviors together.
Wireframing A Design
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.
This way you can try different styles of navigation, sidebar content, logo placements, page sizes, and basically anything else in the layout.
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).
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.
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.
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. 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.
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
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.
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.
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
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.
- ^ Summer Teal Simpson Hitch (dribbble.com)
- ^ Vic Bell (www.vicbell.co.uk)
- ^ Hongkiat (www.hongkiat.com)
- ^ WhatPixel (whatpixel.com)
- ^ siteInspire (www.siteinspire.com)
- ^ Webdesign Inspiration (www.webdesign-inspiration.com)
- ^ webdesign-inspiration.com (www.webdesign-inspiration.com)
- ^ law firm web design inspiration (www.google.com)
- ^ product strategy (www.jeffgothelf.com)
- ^ Nashatwork (www.nashatwork.com)
- ^ wireframing multiple design ideas (www.designyourway.net)
- ^ dozens of wireframing tools (www.quora.com)
- ^ Mike Kretz (www.michaelkretz.com)
- ^ Ali Sayed (dribbble.com)
- ^ Photoshop (www.photoshop.com)
- ^ Sketch (www.sketchapp.com)
- ^ Masudur Rahman (dribbble.com)
- ^ with tutorials (www.designyourway.net)
- ^ Photoshop Etiquette (photoshopetiquette.com)
- ^ photoshopetiquette.com (photoshopetiquette.com)
- ^ Matt Carlson (dribbble.com)
- ^ W3Schools (www.w3schools.com)
- ^ Sass (sass-lang.com)
- ^ Less (lesscss.org)
- ^ Justas Galaburda (iconutopia.com)
- ^ his portfolio site (jakerocheleau.com)
- ^ @jakerocheleau (twitter.com)