How to design a website for beginners
Turn your website design into a repeatable process
This isn’t a professional “how to design 101” it’s just a process I have used to build and design websites without a design background and it’s been very helpful to me. I know a lot of people have trouble starting from scratch designing a website so I wanted to share with everyone my process.
First thing you need to do is expose yourself to designs that look good and are practical. I like to go to ThemeForest and look at all the top rated Wordpress themes and just study all the ways you can arrange content. Then you can borrow a few things here and there and create something yourself. Not all design is pure original content. Design is almost always based on something else or inspired from something. It helps to expose yourself to them and just have a good idea of the different layouts that are out there.
There’s more typical designs there that you’d find used for regular businesses in the real world on ThemeForest. I find places like has a lot of fancy looking stuff that doesn’t transfer well to a lot of business markets. Kind of like how there’s some wild weird shit at New York fashion shows that no regular sane person would ever wear, that’s how I see a lot of the awwwards stuff. Maybe if you’re working on some high end tech startup some of those could work but making small to medium sized business websites? Not really the right look and won’t transfer well.
Then once I find a few things I like, I find it easier if I draw out my designs on paper. I tape 4-5 peices of paper together and started in pencil and finished in marker. Just a general wireframe. Nothing fancy.
And then I take this design and I go over to Figma and try to recreate it, refine it, and make it better by adding colors, images, text, and proper spacing. Here’s the figma link of the mock up I drew from the paper design I made.
Client loved it. But they had some notes and wanted extra stuff or changed a few things which is normal. You take in that feedback and play around with the figma file and send it over hoping that’s what they want. Here’s the V2 of the original figma design with their edits and requests:
It’s really starting to come together now from the paper to Figma. This is my process on how I like to start designing a website. Now for the details on HOW I like to design a website.
For clarification, I am not a trained designer. These are things I have learned throughout my process that has resulted in some success and makes the process easier.
Number 1: It's Important to understanding visual hierarchy and how to layout a website what elements are most important and what are not. You want your most important information displayed prominently, not hidden behind other elements or crowded by others. Here’s some great resources to learn about it:
Read 2stallions take on visual hierarchy
Read Adobe's informaiton on visual hierachy principles
I also really like this video on designing landing pages that touches up on visual hierarchy, creative design, and white space.
Watch a good video on the landing page design
And I like the information in this short video on white space:
White space is HUGE. I see a lot of portfolios and websites online and in forums that have their content too close to each other. There’s no breathing room and the design feels cluttered. For example, on all my websites I have a padding of 50px top and bottom for each section of the site on mobile to keep the content spaced out evenly away from the edges of the content above and below it. Sometimes I see these sections only have 10-20px of space and that’s just not enough. Then on desktop I increase it to 75-100px for my large main sections. Your paragraphs should have 1.4-1.5em line height for the most optimal spacing for easy readability. I see them go as high as 1.7 sometimes. And if you wanna make a heading over a paragraph make sure it’s at least 1.5 times the font size of the paragraph for good visual hierarchy, and I like to bold them to also help separate and draw attention to them.
For website structure I like to do this:
LANDING
h1 - Main thing they do with most important keyword phrase
h2 - Be more descriptive of the services and solutions they offer related to the h1
1 - 2 call to action buttons (what are the first things you want the customer to do when they land on your website?)
SERVICES
- What do they do? What problems do they solve? I usually like to do cards for these sections. Maybe have some icons for color.
ABOUT
- Company history, who they are, why they’re the experts, etc. Let the customer get to know who the company is, helps humanize them and become more familiar with. This is where the client sells themselves and why they’re the best choice.
ADDITIONAL CONTENT
This can be anything. Google likes to see content, and I recommend at least 1200 words on your home page. I like to use the middle section of the website to add extra content around their keywords and services they offer. Helps their ranking better. I put it here because people tend to remember the first and last parts of the website. So we have the services up top because we want people to remember what they do, and testimonials at the bottom so they remember the nice things people have to say about them and be that last nudge to choose them for their needs. So put your additional search rankings content in the middle. It really works. I also like to put “reasons to choose us” in this action as well.
This section can also have additional content the client may want to show on their site. Maybe a step by step process on how their estimating process is, or we highlight a few products and services, anything.
GALLERY/PORTFOLIO
- A collection of your client's best work.
TESTIMONIALS/COMPETITOR COMPARISON
- End on a good note for them to remember why your service is best and the problems they solve. I like to link out to a dedicated testimonials page and add all their reviews. This is a content gold mine. It’s organic, natural content written by actual people with all your clients keywords in it. Testimonials are GREAT for free content to help rank on google. Add as many as you can to that page.
FOOTER
- Put the contact info here, maybe a sitemap, the logo, and social media links
And that’s the general “layout” of a website that I like to do. Once you have this structure it’s easier to design a website because you know WHAT content you need and WHERE it should go. It’s like a paint by numbers kind of thing, but instead of paining with a brush and acrylic, you’re painting with content.
And that’s it!
Just expose yourself to good designs and study the ways content can be organized, have a general structure, draw it out on paper, refine in Figma, use that to send to the client for approval and tweaks, and develop off of that. Once you get the hang of it things become a lot easier.
Also, if you need help with building that desktop design mobile first and responsive, here’s another post I wrote explaining my process on how I start a new website for mobile first.
Mobile first responsive web design for beginners
There’s a ton of Great online about how to be a better designer, and those are awesome and worth the read. But I don’t really see a good process or roadmap to follow for each site for developers just starting design. It can be overwhelming going over all the rules and guidelines for design, and I haven’t really seen any good resources to help structure that information and create a process to follow in which you can use those design nuggets. . So I wanted to make a post that’s quick, and can have an immediate impact on your design work and get you started. I think it helps a lot to know how to plan your website and then using all the other design tutorials and guides to refine, tweak, and make something unique. Hopefully this helps!
