Turn your website design into a repeatable process
This is merely a method I have used to create and design websites without having any prior design experience, and it has been really beneficial to me. It is not a professional “how to design 101.” I wanted to share my method with everyone because I know that many individuals struggle with starting from scratch when developing a website.
Exposing yourself to attractive and useful designs should be your first step. I enjoy visiting Theme Forest to browse through all of the best-rated WordPress themes and simply observe how material might be organized. After that, you can make something yourself and borrow a few items here and there. Not every design is entirely unique. Almost invariably, design is influenced by or based on something else. Exposure to them and a general understanding of the many layouts available are beneficial.
On Theme Forest, you can find more conventional designs that are utilized by ordinary enterprises. There are a lot of upscale items that don’t translate well to many corporate markets, in my opinion. I see a lot of the awards things in a similar way to how there is some crazy, bizarre stuff at fashion shows in New York that no normal person would ever wear. Some of those might work for a high-end software company, but what about websites for small and medium-sized businesses? It won’t translate properly and doesn’t look very good.
Drawing out my designs on paper makes it easier for me once I’ve discovered a few things I like. I started with a pencil and completed with a marker after taping four or five pieces of paper together. Only a basic wireframe. Not very fancy.
Drawing out my designs on paper makes it easier for me once I’ve discovered a few things I like. I started with a pencil and completed with a marker after taping four or five pieces of paper together. Only a basic wireframe. Not very fancy.
The client adored it. However, as is typical, they had some notes and requested additional items or made some changes. After considering the input, you make some changes to the figma file and submit it in the hopes that it would satisfy them. The V2 of the original Figma design, with their changes and suggestions, is as follows:
The transition from paper to Figma is now truly beginning to take shape. This is how I prefer to begin the process of creating a website. Here are the specifics of my preferred website design process.
To be clear, I am not a professional designer. These are some lessons I’ve learnt along the way that have helped me succeed and have made the process simpler.
Number 1: Knowing visual hierarchy and how to arrange a website to determine which aspects are most and least important is crucial. Your most crucial information should be clearly visible, not obscured by or overshadowed by other aspects. Here are some excellent places for learning more about it:
Read 2stallions take on visual hierarchy
Read Adobe’s informaiton on visual hierachy principles
This landing page design video that covers on white space, creative design, and visual hierarchy is another one that I truly enjoy.
Watch a good video on the landing page design
Additionally, I appreciate the information in this brief white space video:
White space is enormous. Online and in forums, I frequently come across portfolios and websites with content that is too similar to one another. The design feels cluttered, and there isn’t any breathing room. To maintain the material evenly spaced away from the margins of the content above and below it, for instance, I have 50px top and bottom padding on all of my websites for each area of the site on mobile devices. I occasionally notice that certain portions only have 10–20 pixels of space, which is simply insufficient. I then enlarge it to 75–100 pixels on my desktop for my sizable main portions. For easier reading, the line height of your paragraphs should be between 1.4 and 1.5 meters.Sometimes, I see them reach 1.7. Additionally, for a proper visual hierarchy, if you want to create a heading over a paragraph, make sure it is at least 1.5 times the paragraph’s font size. I also like to bold them to assist separate and highlight them.
For website structure, I prefer to do this:
LANDING
h1 – What they do with the most crucial keyword phrase.
h2 – Be more detailed about the services and solutions they provide in relation to the h1.
1 – 2 call-to-action buttons (what are the first things you want customers to do when they visit your website?
SERVICES
What are they doing? What are the difficulties they solve? I normally prefer to make cards for these categories. Perhaps have some color icons.
ABOUT
Company history, who they are, why they are experts, etc. Allowing customers to learn about the company helps them get more familiar with it. This is where the customer promotes themselves and explains why they are the best choice.
ADDITIONAL CONTENT
This might be anything. Google likes to see content, so I recommend at least 1200 words on your homepage. I like to use the center section of the website to add more content related to the keywords and services offered. improves their rating. I included it here since people tend to remember the initial and last sections of a webpage. So we put the services at the top because we want people to remember what they do, and testimonials at the bottom so they remember the great things people have said about them and give them the final push to choose them for their requirements. So, place your additional search rankings content in the center. It actually works. I prefer to include “reasons to choose us” in this action as well.
Maybe a step-by-step explanation of their estimate method, or we showcase a few items and services, anything.
GALLERY/PORTFOLIO
A showcase of your client’s best work.
TESTIMONIALS/COMPETITOR COMPARISON
End on a positive note so people remember why your service is the greatest and what problems they solve. I like to link to a dedicated testimonials website and include all of their reviews. This is a content goldmine. It’s organic, real content authored by actual individuals that includes all of your clients’ keywords. Testimonials are excellent for creating free content to help rank on Google. Add as many as possible to that page.
FOOTER
Include contact information, a sitemap, the logo, and social media links.
And that’s the overall “layout” of a website that I enjoy doing. Once you have this framework, it is easy to create a website because you know what material you require and where it should be placed. It’s similar to paint by numbers, however instead of using a brush and acrylic, you’re painting with content.
And that’s it!
Simply expose yourself to strong designs and learn how material may be organized. Create a broad framework, draw it out on paper, refine it in Figma, give it to the customer for approval and tweaks, and build on that. Once you get the hang of it, things get much easier.
Also, if you need assistance with making that desktop design mobile first and responsive, here’s another post I made outlining how I begin a new website for mobile first.
Mobile first responsive web design for beginners
There’s a lot of great information online about how to become a better designer, and it’s well worth reading. However, I do not see a decent approach or roadmap for each site for developers who are just getting started with design. It can be overwhelming to read over all of the design rules and principles, and I haven’t found any decent resources to assist arrange that information and build a strategy for using those design nuggets. So I wanted to write a fast piece that will have an instant influence on your design work and help you get started. I believe it is really beneficial to understand how to plan your website before proceeding to use all of the other design lessons and guides to refine, adjust, and create something unique. Hopefully, this helps!
