Wireframing

A wireframe is a low fidelity sketch of a digital interface, its an outline of the key elements of a design. Wireframes help the designer lay everything out before getting into specific details. A good wire frame will have clarity, confidence and simplicity.

Start a wireframe first with a hand drawn sketch, outlining the screen and then placing different logos, text and other clickable button features on the page. Remember not to get too detailed and redraw as needed until you have the basic outline how you want it.

There are free online wireframing tools which will allow you to digitize your wireframe. One example is wireframe.cc. This provides basic functions allowing you to keep your page simple. Simply recreate your hand drawn sketch in digital format, here you can include a little more detail such as font sizes and bold text.

The Wireframe process can be structured differently based on the designed preference, some options designers use:

Make a Wireframe in six steps

  1. Do your research
    • Understand your audience
    • Carry out an analysis of similar product lines to your own
  2. Prepare your research for quick reference
    • Make quick reference notes about business and user goals, use cases, cool features ect…
  3. Map out user flow
    • Know how many screens will be needed to achieve goals
  4. Draft and sketch
    • Keep it simple, include only important information and formatting dont worry too much about aesthetics and colors.
  5. Add some detail and test
    • Still keeping fairly basic, here you will add simple navigation and instructional words
    • User test detailed wireframe
  6. Start turning wireframe into prototype

HTML Basics

HTML (HypterTextMarkupLanguage) is used to structure a webpage and its content.

HTML uses Elements which encloses the content in tags to make it appear a certain way.

Elements can also have Attributes within the tags. If we look at the opening tag we will see that the attribute class="nice" has set a attribute name of class with a value of nice. Class attributes allow you to give the element non-unique identifiers that allow you to target that class with style information and other things.

image

Nesting elements allows you to include elements inside of other elements. To strongly emphasize a word inside of an element you would use <strong>"Word"</strong> for example <p> My cat is <strong>very</strong> grumpy.</p> creates:

My cat is very grumpy.

Anatomy of HTML documents

Basic HTML format
<!DOCTYPE html> Document type is required
<html>Starts the wrap of content for entire page
     <head>Contains stuff not shown to the page visitors including keywords or descriptions for searches and CSS style content
          <meta charset="utf-8">Sets character set for document to UTF-8
          <title>My test page</title>Appears in the browsers tab
     </head>Closes the head
     <body>The content you want the visitors to see. There can only be one body
          <img src="images/firefox-icon.png" alt="My test image">Just an image for the body
     </body>Closes body
</html> Finishes the wrap of content for the page

Headings use the <h1> to <h6> format:
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Paragraphs <p>This is a single line in a paragraph</p>
Lists will either be ordered <ul> or ordered <ol> with the items created with <li>
<p>The following items are needed </p>

<ul>
    <li>food</li>
    <li>water</li>
    <li>sheltor</li>
</ul>

<p>To sustain life</p>

Links are entered <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> where the “a” is for an anchor element with the href attribute as the link between quotes and “Mozilla Manifesto” will appear as the text.

Semantics

Semantics refers to the meaning of a piece of code.

There are about 100 semantic elements including:
<article>
<details>
<header>
<footer>
<section>
<nav>

To see all of them click here

Additional Pages

Return HOME