Website Layout Without Design Skills, A Summary

2021-05-30

I'm not really into design, good thing I stumbled upon this article, https://coder-coder.com/layout-design-website/ and made a summary of it.

Tips

  • Learn the basic skills to layout and design websites, build your own front-end.

  • For complex websites, you may need to work with a professional designer.

  • Learn how to plan and design simple websites for most small businesses. This method involves:

    • learning the basic of how websites are put together visually
    • research existing web designs to get inspiration and ideas for yourself

Main Steps

  1. Decide the basics of your website
  2. Plan the layout of your website
  3. Put the design together
  4. Build out the final product

Note:

  • Each step will be fueled by research
  • Look at other websites to see what they do
  • Pull out the parts that can be reused for the website
  • get the creative ideas and concepts, use them to create something similar

Decide the basics of your website

  • Answer some general questions about the website

    • What kind of business will the website promote? (pizza, photography, bookstore, coffee shop)
    • What pages will the website have? (Home, About, Contact, and pages specific to the industry of the business). The best way is to do a quick online research.

  • Check out 3 to 4 existing websites with similar type of business, see what pages or sections they have. Take notes on

    • Pages - what pages the website has
    • Style - overall style
    • Navigation - ease of navigation to find things
    • https://themeforest.net/ - good place to find example websites

  • Write down notes for the website you're building. You should have much better idea of what features are common and features that don't work after looking several websites like:

    • header
    • home
    • about
    • menu
    • location/contact
    • footer
    • etc...

    Plan the layout of the website

  • Wireframe

    • like a blueprint or diagram, or even a hand sketch of the website. wireframe each section of the page.

  • mockflow.com - for wireframing

  • make wireframe for both desktop and mobile view, to make the layout responsive

Put the design together

  • Decide the basic design specifications
    • color scheme, color palettes
    • fonts
    • images/photos
    • check wireframes for layout

Build out the final product

  • Start building the website from the wireframes since no designer to create detailed PSD
  • Front-end web dev building approach
    • Set up the website files
    • Create and structure the folders and files
    • Get the task runner up and running (gulp, for example)
    • Create a separate html file for each template