Slides badge

Layout

Discussion

Discuss with your team.

Why did you choose the colour scheme you have chosen for your website and brand?

 

Be prepared to share your ideas and be able to justify them.

Learning Intentions

  • Understand the importance of a good layout

  • Understand the way in which website design has changed

Success Criteria

  • I am able to identify layout and structure of websites
  • I can explain how and why website design has changed since the early 2000s

Setting the Theme with Google Sites

Brands

  • A brand is a uniquely identifying name, term, design or symbol linked to one individual or organisation.
  • Brands are used to market a business but also to create a presence.
  • Brands should be reflected through digital design by using different colour combinations that relate to colours used by the organisation or individual brand.

Brand can be reflected in layout

What are Coca-Cola's main colours?

Colour

  • We’ve looked at the meaning of colour and it’s importance in both branding and what feel it creates.
  • For example, red increases heart rate whereas blue calms the heart.
  • Colour is at the centre of every digital design.

gRAPHICS dESIGN ruLES

  • For those more interested in finding out about typography and graphics design, the Graphics Design Rules book might be of interest.

Website layout

  • Since around 2006 or so all websites have begun to follow some very simple layouts that make it easier for users to use websites.
  • Steve Krug’s book Don’t Make Me Think is one of the essential books for anyone interested in layout and user experience.

This lesson

  • Whilst the lesson content does focus on website design, it also affects different digital medias such as desktop publishing, graphics design and even video editing as well.
  • Take what you learn here and use it wherever you work on digital media.

User Experience

  • User Experience (UX) is the most important thing related to website layout. Don’t pick a design you like because you like it – pick one that’s been tested and works.
  • When we begin to develop our websites with code later in the year, UX will become the most important part of the development process. 

Important design concepts

When designing or building a website, it is important to take advantage of several layout tools. In this lesson we will look at:

  • Whitespace
  • Visual balance

Whitespace

  • Whitespace is spacing that is intentionally added to separate content or elements. It is called negative space (which implies that content therefore is positive space).
  • Whitespace does not need to be white in colour, it simply needs to not contain any content or elements in it. 
  • It can be any texture, or colour or anything. 
  • Human beings find it more visually appealing if a digital product is not cluttered and has lots of whitespace.

Symmetry

  • Not all websites need to be symmetrical, and in fact it is more common for websites to be asymmetrical.
  • In digital design, when two objects are used that have the same appearance on either side, it is called reflective symmetry.

Reflective symmetry

  • Reflectional symmetry mirrors an element around a central axis.
  • This axis can be in any direction or orientation
  • Natural forms that grow or move across the earth’s surface develop a reflective symmetry.

Reflective Symmetry

Reflective Symmetry

Asymmetric balance

  • Pages can be asymmetric, meaning they are not symmetrical at all. 
  • Pages that do this often employ compositional balance. 
  • Asymmetric balance is far harder to achieve than symmetric.
  • A standard asymmetrical design is one which features a sidebar.

Asymmetric balance

Visual balance techniques

  • Whilst in all of the previous examples, the asymmetric balance was achieved using the size of the elements (e.g. the squares would equal about the same size), there are other methods of visual balance:
    • Balance by weight (size)
    • Balance by colour
    • Balance by value
    • Balance by density (quanity)

Balance by weight (size)

  • This model looks to balance both sides by the size of each element.
  • Notice that the left side matches up with the right side

Balance by colour

  • Some colours are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.

Balance by value

  • Similar to balance by colour, balance by value uses darker objects to build an effective asymmetric design.
  • Darker objects have more weight than lighter objects

Balance by density

  • Packing more elements into a given space, gives more weight to that space

Website sizes

  • Fixed width websites
  • Liquid websites
  • Responsive websites

Fixed websites

  • These websites have a central container that is a fixed width, often this was 960 pixels but since screens have got much larger 960 pixels is not enough. 
  • These are often easier to implement and modify later on. 
  • These are becoming less common today

Fixed websites

liquid Layouts

  • A liquid/fluid layout is one in which the elements of the page resize based on the user's device.
  • Instead of using a fixed number of pixels, they use a percentage. 

liquid Layouts

Responsive

  • A responsive design features the best design for several screen sizes. For example, on a very large display it might use a central container but then on a small display it might show things vertically.
  • Responsive also hides certain parts of the website as the screen size goes down.
  • Responsive is by far the most common type of website today
  • It does take longer to accomplish than the other two designs

Responsive

Pros of fixed layouts

  • More control over the positioning of content (you'll see this later when you work with CSS positioning)
  • Less hassle with image and video resizing, for example, as an image gets larger the quality drops more and more.
  • Leaves space for whitespace

coNS OF FIXED LAYOUT

  • Screens smaller than what the website was designed for (e.g. if the website was designed for 960 pixels and the screen is 640 pixels wide) will require horizontal scrollbars.
  • Usability of the website often drops with fixed layout designs

Pros of liquid layouts

  • Since liquid layouts are designed to work on all screen sizes straight away and is often seen as more user friendly because it adjusts to every screen size
  • The website scales up or down nicely since the percentage of the elements on the page stays the same as it is resized.

Cons of liquid layouts

  • Liquid layouts are much harder to get right on larger displays and often end up with over scaled images
  • All positioning needs to be relative and cannot be absolute (i.e. we cannot specify exactly where we want something)
  • Larger screens may have a lack of content to fill the screen space and end up with lots of whitespace.

Pros of responsive designs

  • Takes advantages of all available screen space on each individual device and makes sure that the website is at it's best on each device
  • Google ranks these pages the highest
  • Can reduce clutter on smaller devices

Cons of responsive designs

  • Takes much more time to get right since each device needs to be tested with the design over and over again
  • Responsive website design can mean more for the user to download when visiting the website as they often require considerably more code
  • These can be expensive to develop

Wireframes

  • Wireframes are a way of representing the visual design of a webpage or digital media and are very common in the industry.

  • A wireframe should:

    • navigational bars/links

    • text elements on the page (but not necessarily including all the text that will be in the element)

    • interactive elements such as buttons

    • images, videos and audio

    • form inputs

    • hyperlinks (and where they go)

Wireframes

  • Occasionally, wireframes will include annotations to give a rough idea of how an element will be styled.

  • For example, a wireframe may include annotations such as colours, fonts and the size of media elements such as video or images.

Wireframes

  • Occasionally, wireframes will include annotations to give a rough idea of how an element will be styled.

  • For example, a wireframe may include annotations such as colours, fonts and the size of media elements such as video or images.

Wireframes

  • Wireframes use crosses where images should be, and wavy lines where text should be.

  • They also seek to have multiple layouts where possible, so for example they have a layout for phones, tablets and desktop computers.

  • They are then transferred from this design to digital media.

You are now going to produce wireframes for the following two websites:

  1. vodafone.co.uk
  2. bbc.co.uk/news

 

Once you have done that, you can produce a wireframe for your own version of the school website.

Task

  1. Work through the worksheet.
  2. Continue to work on your school website, now introducing techniques such as visual balance, whitespace and symmetry that you have learned about in this lesson.

Task

Presentation Overview
Close
JB
Layout
© 2020 - 2024 J Balfour
22:36 | 06-12-2024
Join Live Session
Go Live
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Generate Quiz
Generate Lesson Plan
Widget Screen
Canvas Controls
Fullscreen
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      Loading
      All slideshow files