Beginner's Guide to Website Design

Designing a website from scratch can feel overwhelming, especially if you don’t have a background in design. This isn’t a professional “Web Design 101” guide, but rather a process that has worked well for me when building websites. I know many people struggle with where to start, so I wanted to share my approach to making web design more structured and repeatable.

Step 1: Get Inspired by Good Design

Before jumping into your own design, it helps to expose yourself to websites that look great and function well. I like to browse ThemeForest for top-rated WordPress themes. It’s a great way to see different ways content can be arranged and displayed.

Design is rarely about creating something entirely original—it’s about taking inspiration from what already exists and making it your own. Looking at well-designed websites gives you a sense of common layouts, best practices, and structures that work in real-world applications.

If you're designing for businesses, ThemeForest tends to have more practical and widely applicable designs. Some sites, like Awwwards, showcase highly creative designs, but they don’t always translate well to business websites. It’s kind of like New York fashion shows—cool to look at, but not necessarily what people wear in daily life. If you're designing for a corporate or small business audience, stick to layouts that are clean, structured, and user-friendly.

Step 2: Sketch It Out on Paper

Once I’ve gathered some inspiration, I find it easier to sketch out my ideas before touching any design software. I tape together 4-5 sheets of paper and create rough wireframes using pencil and marker. This helps me visualize the layout and structure without getting caught up in details like colors and fonts too early.

Step 3: Refine in Figma

After sketching, I recreate my design in figma, where I refine it further by adding colors, images, text, and spacing. This is where the layout starts to take shape.

If you’re designing for a client, expect feedback and revisions. After sending the first draft, they’ll likely request changes or additions. I incorporate their feedback into a Version 2 and then refine it further until we land on the final design. This iterative process helps ensure the design meets their needs while keeping the workflow structured.

Step 4: Understand Visual Hierarchy

A good website isn’t just about looking nice—it needs a clear visual hierarchy so that visitors can quickly find the most important information. Here are a few key principles to follow:

• Prioritize important elements. Your key message, call-to-action, and services should stand out, not get lost in clutter.
• Use spacing effectively. A lot of beginner designs feel cramped. White space is crucial for readability and visual appeal.
  • On mobile: I use 50px top and bottom padding for each section.
  • On desktop: I increase it to 75-100px for major sections.
• Optimize line height for readability.
  • Paragraphs: 1.4-1.5em line height is optimal.
  • Headings over paragraphs: At least 1.5x the font size for clarity.

If you want to dive deeper, check out these great resources:

• Design Principles by 2Stallions
• Visual Hierarchy by Adobe
• Landing Page Design Best Practices
• White Space in Design

Step 5: Follow a Logical Website Structure

Having a consistent website structure makes the design process easier. Here’s the general layout I follow:

Landing Page

• H1: The main service or product offering with a strong keyword focus.
• H2: A short description explaining what’s offered.
• Call-to-action buttons: What do you want visitors to do first? (e.g., Contact Us, Sign Up)

Services

• Explain what the business does and the problems it solves.
• I often use cards with icons for a clean, structured look.

About Page

• Company history, team information, and why they’re experts in their field.
• Helps humanize the brand and build trust.

Additional Content

• Google prefers at least 1200 words on the homepage for SEO.
• I add extra keyword-rich content in the middle section, since people tend to remember the beginning and end of a page more.
• A "Reasons to Choose Us" section works well here too.

Gallery/Portfolio

• A showcase of the client’s best work.

Testimonials/Competitor Comparison

• Ending with strong testimonials helps reinforce credibility.
• Linking to a dedicated testimonials page is a great way to use user-generated content for SEO.

Footer

• Contact info, sitemap, logo, and social media links.

Step 6: Develop Your Website

Once the design is finalized in Figma, you can move on to development. If you need guidance on mobile-first responsive design, check out my post on how to structure a website for different screen sizes.

Final Thoughts

The key to making web design easier is having a structured process:

1. Study good designs and understand common patterns.
2. Sketch it out on paper to visualize the structure.
3. Refine in Figma, get feedback, and iterate.
4. Use a consistent layout to organize content effectively.
5. Follow visual hierarchy principles to enhance readability and user experience.

There are tons of great online resources on design principles, but I’ve found that beginners often struggle with where to start. Hopefully, this post provides a clear roadmap to help you design websites more efficiently. Once you develop a process that works for you, everything becomes much easier.

Happy building!