How to Design a Website: Ideas, Layout, Optimization, & More

PDF download Download Article
An easy-to-follow guide on designing your own website
PDF download Download Article

While the bulk of your website's design is ultimately up to you, there are some critical things to do when creating a website. This wikiHow article teaches you how to design a website that appears professional and performs well.

Things You Should Know

  • Sketch out ideas for your site, so you know the outline of what you want and make sure you stay consistent so the site looks professional.
  • Prioritize mobile users since more traffic is from mobile than desktop.
  • Website creators, like Wix or WordPress, are fantastic to use if you don't know a lot of HTML or CSS coding, and they offer free and paid versions of websites.
Section 1 of 2:

Designing Your Website

PDF download Download Article
  1. Websites created from scratch require a fairly detailed understanding of HTML coding, but you can easily create a website by using a free hosting service like Weebly, Wix, WordPress, or Google Sites. Website creators tend to be much easier for first-time designers to use than HTML.
    • If you do decide to code your own website, you'll need to learn both HTML and CSS coding.
    • If investing the time and energy to create your website doesn't sound appealing, you can also hire a website designer to create your site for you. Freelance designers can cost anywhere between $30 an hour and well over $100 per hour.
  2. Before you even open a website creator, you should know approximately how many pages you want your website to have, what the content on each of those pages should be, and the general layout of important pages such as the home page and the "About" page. [1]
    • Your website's pages may be easier to visualize if you draw rough pictures of each of them rather than just determining what content should appear.
    Advertisement
  3. While there's something to be said for fresh ideas, your website's basic design should follow established guidelines such as the following: [2]
    • Navigation options (e.g., tabs for different pages) should go at the top of the page.
    • If you use a menu icon (☰), it should be in the top-left corner of the page.
    • If you use a search bar, it should be near the upper-right side of the page.
    • Helpful links (e.g., links to the "About" page or the "Contact Us" page) should go at the very bottom of each page.
  4. Whatever text font, color palette, image theme, and design options you choose, make sure you use the same decision throughout your website. It can be incredibly jarring to see one font or color scheme used for the "About" page when a completely different one was used for the home page. [3]
    • For example, if you exclusively use cool-tone colors for your site's home page, don't implement bright, loud colors on the next page.
    • Keep in mind that using loud or clashing colors, especially when the colors display in a dynamic (e.g., moving) fashion, can evoke epilepsy in a small number of web users. If you decide to use such colors on your site, make sure you add an epilepsy warning before any relevant pages.
  5. Placing direct links to important pages on your website at the top of the home page will help direct first-time visitors to the content that matters. Most site creators add these links by default.
    • It's important to make sure that every page on your website is accessible by clicking through options on your website rather than only being accessible via the page's address.
  6. Like any other kind of design, website design relies on visually pleasing combinations of color, so picking theme colors that go together is crucial.
    • Black, white, and grey are a good combination if you don't know where to start.
  7. Minimalism encourages cool-tone colors, simple graphics, black-on-white text pages, and as little embellishment as possible. Because minimalism requires little in the way of fancy elements, it's an easy way to make your website look professional and attractive without requiring much work.
    • Many website creators will have a "minimalist" theme you can select when setting up your website.
    • An alternative to minimalism is "brutalism", which uses harsher lines, bright colors, bold text, and minimal imagery. Brutalism has less of a following than does minimalism, but depending on your website's content, it may better suit your design needs.
  8. Straight lines and grid-locked web elements are safe bets, but making a few unique stylistic decisions will both lend personality to your site and help your site stand out. [4]
    • Don't be afraid to buck trends by placing website elements asymmetrically or using overlapping elements to create a layered appearance.
    • Although they look elegant, sharp corners and squared-off elements (also known as a "card-based" presentation) are less favorable than are rounded, soft elements.
    9. Advertisement
Section 2 of 2:

Maximizing Performance

PDF download Download Article
  1. Mobile browsers account for more web traffic than desktop browsers, meaning that the amount of attention you pay to your website's mobile version should at least equal your desktop website's development. Most website creator services automatically create a mobile version of your site. Still, you'll want to keep the following information in mind for your mobile site: [5]
    • Ensure that buttons (e.g., site links) are large and easy to tap.
    • Avoid implementing features that can't be viewed on mobile (e.g., Flash, Java, etc.).
    • Consider having a mobile app made for your website.
  2. Both desktop and mobile browsers can struggle to load pages that display a large number of photos or videos. While images are important in web design, using more than a few per page can cause unnecessarily long load times, which will prevent people from visiting the page(s) in question.
    • Generally speaking, you want your website's pages to load in under four seconds.
  3. You'll notice that virtually all established websites have a "Contact Us" page that has contact information (e.g., a phone number and an email address); some sites even have a built-in question form on this page. Adding a "Contact' page will give website viewers a direct line of communication to you, thus adding a solution to potential frustrations.
  4. When someone visits a specific page on your website that either hasn't been set up or doesn't exist, a "404 Error" web page will display. Most browsers have a default 404 page, but you may be able to customize yours from within your website creator's settings; if so, make sure that you include the following details:
    • A light-hearted error message (e.g., "Congratulations - you've found our error page!")
    • A link back to the site's home page
    • A list of commonly viewed links
    • An image or logo for your website
  5. If your website creation method supports adding a search bar to your website, it's strongly recommended that you do so. This will ensure that users can quickly navigate to a specific page or item without having to click through your navigation options. [6]
    • Search bars are also useful when your audience wants to search for a general term without using trial-and-error.
  6. When someone arrives on your website's home page, they should get the gist of your website's theme immediately; in addition to this, all elements of the home page should load quickly, including navigation options and any images. Your home page should have the following aspects: [7]
    • A call to action (e.g., a button to click or a form to fill out)
    • A navigation toolbar or menu
    • An inviting graphic (e.g., one solid photo, a video, or a small group of photos with accompanying text)
    • Keywords pertaining to your website's service, topic, or focus
  7. This is incredibly important, as different browsers may handle aspects of your website differently. Before you begin promoting your website, try visiting and using your website in the following browsers on Windows, Mac, iPhone, and Android platforms:
    • Google Chrome
    • Firefox
    • Safari (iPhone and Mac only)
    • Microsoft Edge and Internet Explorer (Windows only)
    • The built-in browser on several different Android phones (e.g., Samsung Galaxy, Google Nexus, etc.)
  8. Design trends, links, photos, concepts, and keywords all change as time goes by, so you'll have to continue making changes to your website in order to stay up to date. This will require you to check your website's performance alongside other similar websites at least once every three months (preferably more often). [8]
    9. Advertisement

Basic HTML Help

Expert Q&A

Search
Add New Question
  • Question
    Is it better to build a website from scratch or use a template?
    Ryan Conway
    Marketing Expert
    Ryan Conway is a Marketing Expert and the Founder of Digital Tradesman, a digital marketing agency that helps builders, contractors, and tradesmen grow their business online. With over a decade of experience, he specializes in marketing, web design, and search engine optimization. Ryan holds a BS in Business Administration and Entrepreneurial Studies from Hartford University. He also studied Graphic and Web Design at the Boston University Center for Digital Imaging Arts. Ryan participated in Seth Godin’s altMBA in the winter of 2016.
    Ryan Conway
    Marketing Expert
    Expert Answer
    It's better to start from scratch—this way, you can think about what kind of content your website will need first. Once you've settled on a content plan, you can start designing.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 3 Helpful 4
  • Question
    What is the best layout for website design?
    Ryan Conway
    Marketing Expert
    Ryan Conway is a Marketing Expert and the Founder of Digital Tradesman, a digital marketing agency that helps builders, contractors, and tradesmen grow their business online. With over a decade of experience, he specializes in marketing, web design, and search engine optimization. Ryan holds a BS in Business Administration and Entrepreneurial Studies from Hartford University. He also studied Graphic and Web Design at the Boston University Center for Digital Imaging Arts. Ryan participated in Seth Godin’s altMBA in the winter of 2016.
    Ryan Conway
    Marketing Expert
    Expert Answer
    It depends on your website's focus. Try thinking about your website architecturally: what are the main kinds of topics that you're going to have on your website, and how do you group them in a logical sense?
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 3 Helpful 3
  • Question
    What if I'm having trouble brainstorming designs?
    Jear Keokham
    Marketing Expert
    Jear Keokham is a Marketing Professional and the Director of Operations and Creative Strategy at Aerial Canvas, a full-service agency providing real estate marketing solutions in California. With 6 years of experience and education, he specializes in marketing strategy, content production, creative processes, and organizational systems. Jear holds a BA in Art with a Minor in History of Art from The University of California, Berkeley. His dedication to high-quality photography, cinematography, and aerial drone services has allowed for Aerial Canvas’ work to be featured on various platforms including Compass, Sotheby's, Coldwell Banker Realty, and Vanguard.
    Jear Keokham
    Marketing Expert
    Expert Answer
    It can help to look at other websites you find yourself coming back to regularly. Study the way their pages are arranged and try to identify what makes the design so intuitive and attractive.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 0 Helpful 4
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • Website accessibility is another important aspect of website development. This includes things like captions for hearing-impaired audiences, audio descriptions for blind visitors, and photosensitivity warnings if your website uses potentially seizure-inducing effects.
        Thanks
        Helpful 0 Not Helpful 0
      • Most website creators have a set of templates that you can use to cement your site's layout and design before adding your preferred elements.
        Thanks
        Helpful 0 Not Helpful 0
      • The screen on a tablet or phone is probably too small to create a website, so you should use a computer for the best experience.
        Thanks
        Helpful 0 Not Helpful 0
      Show More Tips
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      Warnings

      • Most site creators are free; however, if you want to use your own domain (e.g., "www.yourname.com" instead of "www.yourname.wordpress.com"), you'll have to pay a monthly or an annual fee.
        Thanks
        Helpful 0 Not Helpful 0
      • Avoid plagiarism and observe all copyright laws: don’t add random images from the web, or even structural elements, without permission.
        Thanks
        Helpful 0 Not Helpful 0
      Advertisement

      You Might Also Like

      A Complete Guide to Making Your Own Website
      How to
      Create Your First Website
      How to
      Learn Web Design
      How to
      Login to a Website as an Admin
      How to
      Make a Free Website with Google Sites: Step-by-Step Guide
      How to
      Download, Install, and Use XAMPP on Windows
      How to
      Make a Link to a Specific Part of a Webpage in HTML
      How to
      Host a Web Server for Free on Your Computer
      How to
      Add Fun Games to Your Web Site for Free
      How to
      Make a Website Like the 90s & 2000s: Examples, Tips, More
      How to
      Change Text Color in HTML and CSS
      Creating a How-To Website: A Complete Guide
      Advertisement

      References

      1. ↑ Ryan Conway. Marketing Expert. Expert Interview. 17 March 2021.
      2. ↑ Sarah Harkleroad. Marketing & Branding Expert. Expert Interview. 30 March 2021
      3. ↑ Jear Keokham. Marketing Expert. Expert Interview. 11 May 2021.
      4. ↑ https://webflow.com/blog/19-web-design-trends-for-2018
      5. ↑ https://99designs.com/blog/trends/web-design-trends-2018/#mobile-first
      6. ↑ Ryan Conway. Marketing Expert. Expert Interview. 17 March 2021.
      7. ↑ https://www.godaddy.com/garage/design-website-youre-not-website-designer/
      8. ↑ Sarah Harkleroad. Marketing & Branding Expert. Expert Interview. 30 March 2021

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 1,366,307 times.

      Reader Success Stories

      • Libby Shaws

        Jan 7, 2020

        "I needed this! I was confused; thank you all so much for steering me in the right direction!"
        Rated this article:
      More reader stories Hide reader stories
      Share your story

      Is this article up to date?

      Advertisement