reading-notes

Structure web pages with HTML

Notes

Wireframe and Design

What is Wireframe?

A UX blueprint of the information hierarchy in a digital design like a website, app, or other product.

Guided by user research, UX designers and clients work together to structure information they want the viewer to digest.

A blueprint is important because it guides the developers creating code for the buttons, menus and boxes. A blueprint or wireframe can be designed by a developer or a UX designer.

common argument for wireframing “if a user doesn’t know where to go on a plain hand-drawn diagram of your site page, then it is irrelevant what colors or fancy text eventually get used”

The Six Steps to Make a Wireframe

1. Research
2. Prepare Research for Quick Reference.
3. Make sure you have your user flow mapped out.
4. Draft, don't draw. Sketch, don't illustrate
5. Add some detail and get testing.
6. Start turning your wireframes into prototypes

Three Principals of Good Wireframe

1. Clarity
2. Confidence
3. Simplicity is Key

HTML Basics

What is HTML?

HyperText Markup Language, or HTML, is code that structures web pages and it’s content.

Examples of HTML

<p>My cat is very grumpy</p> - Element <p> - “Opening Tag” My cat is very grumpy - Content </p - Closing Tag indicated by a forawrd slash <p>My cat is very grumpy</p> - Element

HTML with Attributes:

<p class="editor-note">My cat is very grumpy</p>

class is the attribute name

editor-note is the attribute value

Answers

  1. It is the code or language that structures a web page and it’s content
  2. Opening tag, content, closing tag
  3. Attribute
  4. The code’s meaning