How to design a website: The ultimate guide for non-designers

It’s never been easier to design, build, and launch high-quality websites, but that can be a double-edged sword. On the one hand, the abundance of amazing UI templates and no-code UX design tools make the process of web design much more accessible to people without a design background. But on the other hand, user expectations and standards have risen along with technology, so you can’t get away with anything less than a highly-polished product. And that’s why you need a clear plan to keep your design process focused and efficient.

In this ultimate guide to website design for non-designers, we’ll walk you through how to create a beautiful website that showcases your unique offering, engages new and existing customers, demonstrates your credibility, and helps you stand out from the competition.

Key considerations for website design

Learning how to design a website, or any digital product, is as much about mindset as it is about skillset. After all, what good are tools if we don’t have a clear vision of what we’re building? Here are a few important considerations that will help focus your approach to the website design process.

Start with an audience in mind

Before you even start sketching out page designs, take some time to answer the following questions:

• Who is this website for? Get really specific. The tighter your focus, the more likely you’ll reach the customers who will become loyal advocates for your brand and business.
• What are they trying to accomplish? Put yourself in your customer’s shoes and consider why they’re coming to your website at a particular moment. Try to anticipate their biggest questions and most important tasks so you can put them front and center.
• What do they care about? With every task a user is trying to accomplish, they’re trying to alleviate a pain point and hopefully gain a win. Think about where they’re currently experiencing friction and focus your efforts around how your offering can reduce or eliminate it.
• Why would they choose your offering over someone else’s? As consumers, we are fundamentally motivated to make choices that align with our values, and we resonate most strongly with emotionally appealing brands that make us feel seen.

Whatever type of website you’re building, the most important thing to remember is that it exists to solve a problem or meet a need. We’ll talk about creating user personas a bit later, but having a clear picture of who you’re designing for will help you make critical decisions about features and functionality throughout your design process.

Set clear goals and priorities

Now that you have a picture of your target audience in mind, think about what you’re trying to accomplish with this website. Whether you’re creating a professional portfolio, launching a new product, trying to attract new customers, or all of the above, you’ll want to get really specific about how you’ll define and measure success.

Do you care about organic traffic (a good goal for a blog), newsletter subscriptions (a way for B2B companies to build long-term relationships), or e-commerce sales? Once you know what you’re aiming at, it’s easier to lay out and prioritize what it’ll take to get there.

Design with intent

Speaking of priorities, you’re going to have to make some tough decisions about what’s essential to delivering your website. Trade-offs are inevitable in the design process, which is why you need to be prepared to “kill your darlings.”

Every detail on the page needs to serve a purpose in achieving your business objectives and providing the best user experience. By grounding your choices in what your users need, you'll ensure you have a fully operational website while avoiding unnecessary bells and whistles.

Start small and build your way forward

Since we’re throwing around clichés, here’s another one: don’t be tempted to boil the ocean with your website launch. Of course you’re brimming with brilliant ideas (those “darlings” we were just talking about), but try to embrace the startup principle of focusing on your minimum viable product.  The basic idea is this: what’s the least amount of work you can do to get something up and running with just enough functionality so you can gather feedback that will help you improve the experience?

The magic of building digital products is you can continually fine-tune them without needing to start from scratch, and usually with minimal disruption to the end-user. An experimental mindset of testing and learning will help relieve some of the pressure of needing to get it right on the first try.

How to design a website, from idea to launch

Designing websites and apps is not a linear process. It’s more about multiple cycles of ideation, testing, and iteration. Think of the steps below as a guideline to help you structure your project, organize your time, and know where and when to call in reinforcements.

Set up your domain and social media accounts

Once you’ve thought up the perfect name for your business, you’ll want to register the domain (if you haven’t already). There are a number of reputable domain registrars, and many site-building and digital marketing platforms like Squarespace or Mailchimp offer domain registration and web hosting as part of their service offering. In fact, Mailchimp has a great guide on how domain registration works if you need more information.

The key thing to keep in mind is that you want your domain name to be simple, memorable, and findable. Don’t overthink it, and don’t get too clever. Top-level domain extensions like .com, .org, or your geographical extension (e.g., .fr in France) are likely to be more expensive but also worth it for the credibility boost. That said, there are niches in domain naming; for example, startups, tech, gaming, and software platforms like ours often use the .io extension. But unless you think it’ll deliver a useful lift, avoid niche naming conventions.

Don’t forget to secure social media handles that are consistent and recognizable with your domain name. No matter the size of your brand, think of your online presence as an interconnected ecosystem.

Establish your UX strategy

UX, or user experience, is not simply a phase of design. UX involves all aspects of a user’s interaction with a product, service, or platform. It is the foundation upon which your project and process must be built. UX strategy requires understanding a user’s needs, motivations, and pain points throughout their journey to solving a problem or completing a task on your website.

A UX strategy comprises three key elements:

1. Landscape Research: You don’t have to spend a ton of time and energy on it, but your design process should begin with looking at what your competitors are doing, evaluating the key trends in your industry, and talking to current or prospective customers about their needs.
2. User Personas: Think of personas as “sketches” of your target audience’s lives. A useful persona includes a mix of relevant demographic, psychographic, and behavioral details. Ideally, personas are based on data and insights you’ve gathered from talking to real people.
3. Core Value Proposition: Your value proposition, sometimes referred to as your Unique Selling Point (USP), is a distillation of how your offering meets the specific needs of your target audience. It can be as simple as a single sentence that captures the why, what, and how of your business.

For an even more detailed breakdown of what UX strategy is and why you need one – yes, even for just making a website – check out our guide to UX strategy.

Lay out your site architecture

Site architecture is the blueprint that lays out the structure and organization of your website. It’s how a user orients themselves on your website to find what they’re looking for. At the most basic level, your site architecture, or information architecture, corresponds to your site’s navigation scheme.

Your website can be as shallow or as deep as the content and functionality you need it to be. For example, sometimes a single, scrolling landing page is all you need. Single-page sites tend to have little to no navigation beyond anchor links that jump you to a particular section of the page. A single-page site is often thought of as a brochure built to promote a clear message and call-to-action (CTA), padded with descriptions of features and benefits. For this reason, it’s an ideal solution for creating "first impression" teaser sites announcing a product launch or capturing leads for a waitlist or pre-orders. But it’s also an elegant solution for a simple professional page.

More typically, websites have at least a flat hierarchy, which is to say, a set of individual pages extending from a home page and accessible by a primary navigation system. A standard website usually includes at least five key pages:

1. Home: Your Home page needs to immediately show visitors you’re a credible resource they can trust. Your core value proposition should be front and center, the navigation should indicate what can be found in each section, and any content or calls-to-action should make it clear what you want the user to do.
2. About: The About page is open to interpretation; without overthinking, it should tell a compelling and succinct story about who you are, what you do, and why you do it. While the home page should be focused on your offering, the About page should be focused on the organization (or individual) behind it.
3. Offering: Offering is a generic term you’ll want to customize based on what it is that you offer. It could be Products, it could be Services, it could be both. Try to be as specific as possible. When you’re doing research, take note of how your competitors or how the peers you admire organize and label their offerings. This can be useful for inspiration and also for finding ways to differentiate yourself.
4. Blog: Blogs have become standard for websites of all kinds. Before adding one, ask yourself: do you really need  one? You do need a regular channel for communicating with your customers. That could just as easily be a newsletter or social media, or even better, a combination of all of the above. The most important thing to consider is what feels the most authentic to who you are and the relationship you wish to have with your customers.
5. Contact: This one is pretty straightforward. Give your users a way – preferably several ways – to get in touch with you. A contact page should include an email contact form as well as how to connect with you on social media, and also a phone number and physical address, if relevant.

A final note on site architecture: it also represents how your pages relate to one another, which, in turn, determines how they are prioritized, ranked, and presented on different search engine results pages. Your site architecture is directly related to SEO (search engine optimization) and usability, so you’ll want to understand which keywords will have an impact on how users find you. For a deeper dive on this topic, have a look at our article on where UX meets SEO.

Wireframe key pages

Wireframes are (typically) grayscale renderings of web pages that illustrate all the basic elements on a screen: text, imagery, navigation, and calls-to-action. Their job is to facilitate conversations and collaborations between product managers, designers, developers, and stakeholders, making sure everyone understands the idea the same way. But there’s still some controversy about what a wireframe should look like in terms of how much, or how little, design detail it should include.

Once you’ve determined what your key pages will be, start sketching some basic layouts of what content goes where and how pages relate to one another. This form of “low-fidelity” wireframing (meaning lacking in detail) can happen on a whiteboard, a sketchbook, even the back of a napkin. At some point, though, you’ll need to convert your sketches into something more presentable, especially when you’re ready to share your idea with anyone who’ll help to bring it to life.

At this stage, you’ll want to have a set of medium-fidelity wireframes that present a more accurate representation of each page’s content hierarchy, positioning and flow of calls-to-action, and proportional placements of key design elements like imagery and iconography. Wireframes are an indispensable tool for collaborating with visual/user interface (UI) designers on creative direction and with developers on connecting the front-end experience to the backend systems.

Turn wireframes into design mockups

Whereas UX design is primarily concerned with how the end-to-end experience works, UI design is focused on how a website looks. This includes color palette, fonts, and imagery, but also a site’s system of UI elements (buttons, icons, forms) and how they behave when interacted with.

UI design tends to rely on having a set of wireframes to guide the creation of detailed mockups, which are static representations of website pages that show how the visual elements will be implemented. At this stage, the design fidelity increases to include how the site’s color scheme will be applied, what fonts will be used and how, and the style of imagery, whether photography or illustration.

Including real website content is important at this stage of the design process (and arguably sooner) in order to create the most real-feeling versions of pages. Not only does including real copy help ensure your page hierarchy and typography are in good shape, but it’s also useful for getting feedback on whether navigation, form labels, and calls-to-action are crystal clear to users.

Not sure about what's the difference between a wireframe and a mockup? No problem, read our dedicated guide to find out more over on the Uizard blog.

Create interactive prototypes of key user flows

Prototypes are versions of your website built to test whether the concept and functionality are user-friendly. Interactive prototypes are clickable flows of key pages so you can get feedback on whether the paths a user takes through your site through navigation, calls-to-action, and processes (i.e. checkout) are clear, engaging, and effective.

Getting feedback from users can and should happen throughout your design process, as early and as often as possible. Prototypes are an incredibly effective way of having users interact with, in a way that feels close to, if not indistinguishable from, a live website.

For example, check out this prototype built in Uizard:

While the idea of creating an interactive prototype might seem daunting to a non-designer, much less a non-developer, tools like Uizard are purpose-built for seamlessly moving from wireframe to mockup to prototype without any coding necessary. You can test your ideas easily and quickly with your team and prospective customers.

Refine, iterate, and repeat

We might talk about a design process happening in phases, and that’s true to some extent, but it’s not a relay race. Though there are some dependencies, like starting with user personas or needing wireframes to kick off UI design, a design process is more about loops of making, testing, learning, and refining. Whether talking to collaborators, stakeholders, or users, feedback is what moves the design process forward. Good design doesn’t happen in a vacuum, so you need to build in opportunities throughout the design process to invite fresh eyes to the table who’ll be able to identify blind spots in your UX or help you see things in a new light. Your work will improve as a result.

Establish your development strategy

If you’re tempted to skip right past this section, please bear with us for a moment. We promise this won’t get too technical, but you’ve got a few upfront decisions to make about how you’re planning to build your website, and it all comes down to finding the right balance of effort and expertise.

Once you've iterated on your website design and UX and you're ready to get it published, your first option is to use one of the amazing no-code website builder platforms available, like Wix or Squarespace. This is an excellent option if you’re keen on a DIY approach and have a limited budget, and you’re willing to invest a little time to lean into the learning curve of the platform’s interface. However, they have limited customization features and you might not be able to replicate exactly the design that you've spent so much time refining.

Perhaps you have more specific requirements for creating a customized experience or want more hands-on access to your backend architecture. In this case, you might consider using WordPress as a starting point. WordPress is an open-source content management system, which is its key difference from Squarespace and Wix. WordPress has a vast number of plug-ins available to solve more niche technical requirements and functionalities. However, once again, you might not be able to replicate your very own design in Wordpress without getting your hands into code.

The Cadillac option, of course, is to build a fully bespoke professional website from the ground up, either with an in-house development team or a partner agency. This is the best option to publish a fully-customized website with your unique design and style. This may also be the option for you if your website is a platform itself, meaning it’s the hub of your own digital product or service offering. A startup might launch the MVP version of their website or landing page using one of the other solutions listed earlier. But in order to build a truly innovative website, they’ll likely need to hire developers to build a solution for which they have full technical ownership.

Launch, learn, and keep building your way forward

Whew! You’ve made it this far, both in the article and hopefully in your website design process. You’ll have launched your brilliant MVP website with just the essential features, content, and design elements you need. Soon you’ll be well on your way to achieving your highest priority business goals (new signups! qualified leads! sales targets!) and collecting valuable data on how the site is performing with users.

You should definitely take a moment to celebrate going live! But the real work is just beginning. You’ll want to get familiar with your analytics dashboard, whether you’re using a platform’s built-in features or you have a custom Google analytics console.

If you’re new to the wonderful world of analytics and KPIs (key performance indicators), don’t sweat it. Analytics are just ways of looking at how users interact with your website: how they arrived on your site, where they click, where they abandon processes, and how long they stay. This is one of those moments we mentioned where you want to review the goals and priorities you set at the beginning of your website design process. Focus on the two or three stats most meaningful to you, and look for ways to keep testing and improving the features that drive those behaviors.

And what about all the amazing ideas that fell to the cutting room floor for this launch? That’s what a roadmap is for. Keep a running list of ideas – both your own and those that come from user feedback. Develop a system for prioritizing them according to the effort they’ll take to implement, their potential benefit to users, and their potential business impact, and work on rolling out new features.

Website design best practices

Before we wrap up, it’s worth calling out a few best practices to keep in mind today, but really always. Solid design principles are timeless.

• Think mobile-first. Mobile devices count for more than half of all website traffic. Any best-in-class website builder will use mobile-responsive design templates, and any best-in-class developer or agency should be equipped to do the same.
• Use recognizable design patterns. As users, we have come to expect websites to behave in certain ways, like clicking a site logo to return to the homepage or displaying a validation message to show that a form has been submitted. Avoid breaking conventions without a really good reason.
• Maintain consistently high standards. Yes, this sounds obvious but we’re not just talking about your website. We mean across your whole ecosystem: social media, newsletters, emails, online courses, etc. Hold every platform and every user experience to the same standard.

Having a website for your business is essential, and by extension, learning to design a website yourself is a valuable skill right now. The growing array of design tools make it easy to bring ideas to life, and those platforms will continue evolving faster than the average non-designer can keep up. An understanding of UX fundamentals, on the other hand, will never lose its value. And time and time again, you’ll find it’s the most important addition to your design toolkit, whether you’re building a website, an app, or a business.

Ready to get started? Design your website using the easiest UX/UI design tool for non-designers. Create a Uizard account for free and bring your web or mobile app design vision to life.