DECO1400 Lecture 4

Planning for your website

Site Maps

• A site map is a diagram that shows pages (and sections of pages), defining what content goes where
  • Define the pages themselves, but also the content that goes into each page

What Tools can I use?

• Any software that you could create a flow chart in (e.g. PowerPoint, KeyNote, etc)
• Or pen & paper, scanned/photographed and neatened up in an image editor
• Or specialised "site map creator" software (e.g. GlooMaps, diagrams.net)

Prototyping

• A prototype is an early sample, model or release of a product built to test a concept or process, or to act as a thing to be replicated or learned from
• It is designed to test and try a new design to enhance precision by system analysts and users.
• Prototyping simulates the real, future product
• It can help attract customers to invest in the product before allocating any resources needed for implementation
• You can test the design's correctness before it comes into production and discover design errors

Design Fidelity

• Design Fidelity refers to the level of detail and functionality included in a prototype.
• Low-Fidelity prototypes, for example are simple and low-tech concepts
  • Just need a pen and paper to start
  • The goal is to turn your ideas into testable artefacts that you can then use to collect and analyse feedback in the early stages
• High-Fidelity Prototypes are highly functional and iterative.
  • They are very close to the final product, with the most necessary design assets and components developed and integrated
  • Hi-Fi prototypes are often used in the later stages to test usability of the product.

Benefits of Low-Fidelity Prototyping

• Focus on Design and Concepts Without the pressure of making every page linked, clickable, and interactive, you can worry less about the more technical parts of prototyping and spend more energy on ideation.
• Real-Time Iteration Let's say you're gathering customer feedback on your sketched prototype.
  • During this test, you can quickly re-do parts of the design based on customer comments in real time, in just a few minutes
• Accessible to everyone Everyone can doodle.

Benefits of High-Fidelity Prototyping

• More familiar to users High-fidelity prototypes look like lives software to customers, meaning participants would be more likely to behave more normally during testing
• Pinpoint specific components to test You can deep-dive into a single component (like flow, visuals, engagement or navigation) during user testing
• This allows you to get detailed feedback on certain elements of the design that would not be possible with pen and paper

Wireframes

• An early skeleton of a website or an app, or of adding new functionality to an existing page.
  • A wireframe is a visual representation of what will be on a given page: what content and functionality it will contain
• The elements that are included in the wire-framing of a page will wholly depend on the purpose of the given page
• Web design projects can involve many stakeholders and moving parts
  • Bad communication or process can derail a project or cause it to miss its intended goals
  • Wire-framing helps to avoid both
• Typically doesn't have colours but has functionality and more detail than a low-fi prototype
  • Sits in between low-fi and high-fi

High Fidelity Prototypes

• A High Fidelity Prototype is more advanced than a wireframe
  • The best way to think of a prototype is to envision it as a "rough draft" of the project
  • High-Fidelity Prototypes are usually interactive, and allow a user to click on it
• Overall, prototypes are not-yet-live simulations of the webpage or application that allows a team to try out how it functions
• It doesn't function like the final product, because it doesn't incorporate elements of the back-end, but a high-fidelity prototype is meant to be as close to the real thing as possible.
• The best way to avoid confusing users is at the beginning to let them know that some of the features may not work as it is only a prototype.

Prototyping Tools

• Some of the best tools for prototyping web and mobile applications include Miro, Figma, Material, Proto.io, Pop, InVision, Adobe XD, Marvel and Framer

HTML

HTML Section Tag

• Defines a section in the document

<section>
  <h1>Title Text</h1>
  <p>Content here</p>
</section>

<section>
  <h1>Title text 2</h1>
  <p> content here too</p>
</section>

HTML NAV Tag

• An alternative to constructing a nav bar using a list

<nav>
  <a href="/html/">HTML</a> 
  <a href="/css/">CSS</a> 
  <a href="/js/">js</a> 
</nav>

CSS Box Model

• In CSS, the term "box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

• Content The content of the box is the region in which text and images appear.
• Padding Clears an area around the content. The padding is transparent.
• Border A border that goes around the padding and the content
• Margin Clears an area around the border. The margin is transparent.

CSS Animations

• CSS allows the animation of HTML elements without using JavaScript or Flash.
• Animations allow elements to gradually change from one style to another
• You can change as many CSS properties you want, as many times as you want
  
• To use animations, must first specify keyframes for the animation
• Keyframes hold what style the element will have at certain times.
  
• When you specify CSS styles inside @keyframes rule, the animation will gradually change from the current style at certain times.
• To get animations ot work, you must bind the animation to an element
• The following example binds the example animation to a <div> element

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
} 

• In the above example, we use from and to.
• We can alternatively specify keyframes of the animation as a percentage of completion

 /* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
} 

• We can limit the number of times an animation runs using the animation-iteration-count property