
How To Design A Website For Beginners
Turn Your Website Design into a Repeatable Process
This isn’t a professional “how to design 101” guide—it's just a process I have used to build and design websites without a design background. It’s been very helpful to me, and I know a lot of people have trouble starting from scratch when designing a website, so I wanted to share my process with everyone.
Step 1: Expose Yourself to Good Designs
The 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 study all the ways you can arrange content. You can borrow a few things here and there and create something yourself. Not all design is purely original content. Design is almost always based on something else or inspired by something. It helps to expose yourself to them and have a good idea of the different layouts that are out there.
There’s a lot of typical designs you’d find for regular businesses in the real world on ThemeForest. I find places like Awwwards have a lot of fancy-looking stuff that doesn’t transfer well to many business markets. Kind of like how there’s some wild, weird stuff at New York fashion shows that no regular person would wear— that’s how I see a lot of Awwwards stuff. Maybe if you’re working on some high-end tech startup some of those could work, but for small to medium-sized business websites? Not really the right look and won’t transfer well.
Step 2: Draw Your Designs on Paper
Once I find a few things I like, I find it easier to draw out my designs on paper. I tape 4-5 pieces of paper together and start in pencil, finishing with marker—just a general wireframe. Nothing fancy.
Pencil and Marker Drawing
Step 3: Refine the Design in Figma
Then, I take this design and go over to Figma 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.
First Draft Using Figma
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, tweak the Figma file, and send it over hoping that’s what they want. Here’s the second draft with their edits and requests:
2nd Draft Using Figma
3rd Draft Using Figma
It's really starting to come together from the paper to Figma. This is my process on how I like to start designing a website.
The Details on How I Design a Website
For clarification, I am not a trained designer. These are things I have learned throughout my process that have resulted in success and make the process easier.
1. Understand Visual Hierarchy
It’s important to understand 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 them.
Here are some great resources to learn about visual hierarchy:
- Read 2stallions take on visual hierarchy
- Read Adobe's information on visual hierarchy principles
- Watch a good video on landing page design — This video touches on visual hierarchy, creative design, and white space.
- A good 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.
2. Proper Spacing
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 sections with only 10-20px of space, and that’s just not enough. On desktop, I increase it to 75-100px for my larger main sections.
Your paragraphs should have a 1.4-1.5em line height for the most optimal spacing for easy readability. I see line heights as high as 1.7em, which isn't ideal.
For headings 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.
Website Structure
Here’s the structure I like to follow for a website:
LANDING
- h1: Main thing they do with the most important keyword phrase
- h2: Be more descriptive of the services and solutions related to the h1
- 1-2 call-to-action buttons (What do you want the customer to do when they land on your website?)
SERVICES
- What do they do? What problems do they solve? I like to do cards for these sections with icons for color.
ABOUT
- Company history, who they are, why they’re the experts, etc. This section helps humanize them and build trust.
ADDITIONAL CONTENT
- This section can include extra content that Google likes to see. I recommend at least 1200 words on your homepage. I like to use the middle section to add content related to their keywords and services.
GALLERY/PORTFOLIO
- A collection of your client's best work.
TESTIMONIALS/COMPETITOR COMPARISON
- End on a good note with testimonials and why your service is best. Testimonials are great for content and helping Google rankings. Link to a dedicated testimonials page and add as many as you can.
FOOTER
- Put contact info here, maybe a sitemap, logo, and social media links.
Conclusion
That’s the general layout I like to use for a website. 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 painting 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, draw it out on paper, refine it in Figma, get client feedback, and develop off that. Once you get the hang of it, things become a lot easier.
If you need help building a desktop design that's mobile-first and responsive, check out my post on Mobile First Responsive Web Design for Beginners.
There’s a ton of great online resources 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 developers just starting out with design. Hopefully, this helps!
Related Posts: