switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    9 tips to prevent programmer burnout
    9 Tips To Prevent Programmer Burnout
    Jan 18, 2021
    4 tips to make time estimating easier
    4 Tips To Make Time Estimating Easier
    Feb 11, 2021

    7 Design Principles For Web Design

    Categories
    • Web Design
    Tags
    • design
    • design fundamentals
    • design principles
    • designing websites
    • fundamentals of design
    • principles of design
    • ui
    • ui and ux
    • ux
    • Web Design
    • Websites
    7 design principles for web design
    7 design principles for web design

    There are seven main principles of design. These principles allow for a visually pleasing design. They are, in no particular order, alignment, proportion, balance, contrast, hierarchy, repetition, and white space. Neither one is more important than the next. These are lifesavers when creating a new or redesigning an old website. Personally, if I've hit a blank when creating a new website, I just apply these seven principles, and I find myself are more than halfway there in coming up with a design.

    Let's have a more in-depth look at each principle.



    1. Alignment



    This refers to how elements align on a web page. Alignment allows elements to be grouped together or even create uniformity on the web page. Websites are effectively made up of boxes. Everything is a box. If these boxes don't line up, it can leave the user with an unpleasant experience which could have them ultimately leaving the website.

    bad alignment

    In the image above, one can clearly see that the blocks do no line up with each other, nor does the spacing or padding in between each element match. The text is also not centered with the block as it is with the blocks lower down.

    alignment

    In the image above you can see how everything is divided into blocks and each element is aliged perfectly.

    2. Proportion


    Simply put, proportion, or scale, is the size of objects or elements relative to each other. As a web designer, you constantly need to think about many things. An example of this is the size of fonts relative to the size of the web page. Can people read it? Is it too small? Is it too big? Does it fit in the container I put it in?

    bad proportion

    The contact block and title is far too big for the for the space that is allocated on the webpage.

    proportion

    The propotion of the contact block is correctly balanced in relation to the webpage.

    3. Balance


    Balance is the equal positioning of objects or elements on a webpage. The human eye creates an invisible vertical line down a webpage that determines visual balance. Balance can be anything from colour, shapes, images, space and texture. This does not mean a webpage needs to be 50% equal on the left and right sides. It could be 1/3 and 2/3 but each side is equally balanced out using different elements like text, icons, or images.

    bad balance

    In this example, the left and right side are not balanced out correctly. There is more "weight" on the left.

    balance

    In the example above, there is an equal weight of elements on the left and right.

    4. Contrast


    Contrast on a website is basically the contrast in colour between a foreground and a background colour. The Web Content Accessibility Guidelines (WCAG) has specifically created a colour standard for people with visual disabilities. There are three main contrast ratio:

    WCAG 2.0 AA

    WCAG 2.1 AA

    WCAG AAA

    This is a contract ration of 7:1. It is suited for people with 20/80 vision that have a loss in contrast sensitivity.

    For example, a red text on a grey background will be very difficult, even for most of us without visual impairments, to see the text. This would fail the WCAG minimum. On the other hand, black text on a white background would be very easy to see for anyone.

    Now the inspect tool makes it super easy to get this right.

    bad contrast

    In this example, the green colour that has been used, in relation to the background colour, will be difficult for people with visual disabilities to see.

    contrast

    In this example, the black colour that has been used, in relation to the background colour, can be cleary seen with users that has visual disabilities.

    5. Heirarchy


    This refers to the order of importance in which elements are placed. An easy way to think of this is to put the most important element first, and then a lesser important element next and the least important element last.

    Visual hierarchy can also refer to the font size of headings. Your most important heading should be the biggest in size. Secondary headings should be smaller than the main heading and so on. This can go further into colours. Brighter colours should have greater importance than muted or toned down colours.

    bad heirarchy

    In this image, you have no idea where to look, nothing stands out as the primary heading.

    heirarchy

    In the image above you can clearly see where the heading is, paragraph text, and subtext. Your eye is immediately drawn to the larger, bolder heading as it stands out.

    6. Repetition


    Reptetion goes hand-in-hand with consistancy. This could be anything from repeating colours, font sizes, shapes, icon types and styles etc. It is very important to repeat elements throughout a website.

    bad repetition

    Ini this basic example the elements are different sizes and colours in relation to the other elements.

    repetition

    Elements are repeated consistantly.

    7. White Space


    For me, one of the most common mistakes I see on websites today, probably has to be white space. Now, white space does not necessarily mean space that is white. It could be any colour for that matter. White space just refers to how much space "padding" is there to "breath" around an element.

    bad white space

    Above one can clearly see something doesn't look right with the text on the left. There is not enough white space between the edge of the page and text.

    white space

    In the image above, there is enough "padding" around the text

    Conclusion


    Although some of these examples might seem obvious at first, when building a website or webpage sometimes it can be difficult to spot mistakes. Applying these design principles can make you stand out from the rest in almost any field of design or development. It took me a few years to get this right, heck I'm still learning and perfecting my craft.

    https://cantunsee.space/ is a excellent game to practice these design principles.

    Contact us


      Related posts:

      onesignalHow To Setup And Use OneSignal For Web Apps 8 misconceptions about web design8 Misconceptions About Web Design the process of web designThe Process Of Web Design how to deploy your app/website on herokuHow To Deploy Your App/Website On Heroku
      Share
      13
      Katherine Comer
      Katherine Comer
      Katherine is a frontend web designer with an interest in Search Engine Optimisation and UI/UX design. She an avid Xbox player and a huge Tomb Raider fan.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy