The Summury

Table of Content

1. What is a wireframe (and why do you UX designers use them?)
2. Ways to set up Wireframe
3. Wireframing process
4. HTML basics
5. Semantics

Wireframe (and why do you UX designers use them?)

Wireframing is a practice used by UX designers which allows them to define and plan the information hierarchy of their design for a website, app, or product. This process focuses on how the designer or client wants the user to process information on a site, based on the user research already performed by the UX design team.

When designing for the screen you need to know where all the information is going to go in plain black and white diagrams before building anything with code. Wireframing is also a great way of getting to know how a user interacts with your interface, through the positioning of buttons and menus on the diagrams.

Ways to set up Wireframe

Wireframes drawn with paper and a pencil, or at a whiteboard, have the advantage of looking and being very easy to change, which can help tremendously in early conversations about your website or product.

Wireframing process

• Wireframe > Interactive Prototype > Visual > Design

• Sketch > Code

• Sketch > Wireframe > Hi-Def Wireframe > Visual > Code

• Sketch > Wireframe > Visual > Code

HTML basics

1. What is HTML?

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way.

2. Anatomy of an HTML element

• The opening tag
• The closing tag
• The content
• The element

  

Semantics

CODES that carry the meaning