Uni /DECO1400/DECO1400 Lecture 5

DECO1400 Lecture 5

CourseIntroduction to Web Design
SemesterS1 2021

DECO1400 Lecture 5

  • Very important in web design, or design in general to organise content well
  • Want to avoid information overload/cognitive overload of user
  • We can use organisation systems to solve this

Organisation System

  • An organisation system consists of schemes and structures
    • Organisation Schemes Organising content in groups by common properties
    • Organisation Structures Organisation by relationships
  • Examples of organisation schemes include:
    • Exact organisation schemes - great for known item searching
    • Ambiguous organisation schemes - reflects nature of language, which is imprecise. Can have overlap between groups of items
    • Hybrid organisation schemes - a mix of the above two

Schemes

  • We can implement Exact organisational scheme as an alphabetical, chronological or geographic sort of items
    • Alphabetical: List of research areas
    • Chronological: List of news stories
    • Geographical: Real estate listings
  • Ambiguous organisational schemes work best when we don’t know what category something belongs in
    • E.g. are Gluten Free Biscuits located in the biscuits section or the gluten free / health section
    • Ambiguous organisational schemes can be implemented as a topical search, as is the case for Amazon - “Books & Audiobooks”, “Music, Movies & Games”
    • Can also be implemented as a task-oriented search e.g., when you go to a car sale website you search for the type of car that you want - input the relevant parameters
  • User-Specific ambiguous search
    • Can display content to the user depending on their subcategory - different user interface for personal, business or corporate banking

Structures

  • Organising content by their relationships
  • Most common types are be hierarchy, hypertext and database
    • Hierarchy such as the structure of an organisation. This organisation on the web can be confusing if there no direct link between two pages
    • Hypertext such as links between pages

HTML

Flex Box

  • We can use flexible boxes (flex-box) to organise content on a page dynamically
  • A flexbox is comprised of a container and the flex-items within

    
        #flex-container {
            display: flex;
        }

        .flex-item {

        }
  • There are several properties within a flexbox that we can set.
    • flex-direction:
      • row (left to right)
      • row-reverse (right to left)
      • column (top to bottom)
      • column-reverse (bottom-to-top)
    • flex-wrap:
      • nowrap (elements on a single line),
      • wrap (wrap onto multiple lines from top to bottom),
      • wrap-reverse (wrap onto multiple lines from bottom to top)
    • justify-content:
      • define alignment along main axis - defines how to distribute free space

Grouping CSS Selectors

  • CSS selectors can be grouped for more concise syntax if you want to assign the same values
p, h1, .highlight {
    color: red;
}
  • There are different types of selectors:
    • Descendant selectors: header h1 selects all h1 elements in header
    • Child selectors: header > h1 selects all h1 elements which are immediate children of header
    • Adjacent selector: h1 + p selects all p elements directly after a h1 element
  • Pseudo-classes for links can additionally define other behaviour
    • a:hover defines the styling when an <a> tag is hovered on
    • :visited defines the styling when a link has been visited
    • :link defines the styling when a link has not been visited
    • :active changes the style when clicked
    • :focus changes style when in focus
  • When using these pseudo-classes, generally recommend setting global style for <a> first
  • Other pseudo-classes include :first-of-type, :last-of-type, :first-child and :last-child
← All DECO1400 notes