WIREFRAME, HTML & SEMANTICS

What is a Wireframe?

Wireframing is a practice used by UX (User Experience) designers which allows them to define and plan the information hierarchy of their design for a website, app, or product. Think of it like some sort of sketch.

  • Pen and Paper: Wireframes can be drawn with just pen and paper, which makes it very easy to change.

  • Wireframing Software: There are many software options out there to create wireframes, like Invision or Balsamiq.

Three key principles to wireframe

  1. Clarity
  2. Confidence
  3. Simplicity is key

HTML basics

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.

HTML is a markup language that defines the structure of your content. it 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, or act a certain way.

Main parts of elements

  • Opening tag
  • Closing tag
  • Content

SEMANTICS

In programming, semantics refers to the meaning of a piece of code. The purpose or role of a given element.

Some of the roughly 100 semantic elements available can be found here.


-back