Structure web pages with HTML

Wireframe and Design

What is Wireframing?

Definition: A low fideility sketch of a digital interface

Wireframing is a practice used by UX designers which allows them to define and plan the infomation hierarchy of their design, for a website, app, or product.

Without distraction of colors, typeface choices or text, wireframing lets you plan the layout and interaction of your interface.

Types of Wireframes

• Hand drawn sketch: Drawing wireframes on paper has the advatage of being very easy to change, which is great in early conversations about the website or product.

• Digital wire frame: This is a good tool to track the progress of the wireframe.

Both contain the same things, most important is to keep it simple. Once completed, take your time on doing a second sketch. This will give you a second look and final look to hand off to peers.

Things to consider before starting the wireframing process

The decision to use online tools or to wireframe by hand, and the process used to get to from wirefram to code, is less related to the individual preference of the UX Designer, and much more related to what approach the particular situation requires. This depends largely on how much emphasis there is on visual design in a project, and how much uncertainty there is with respect to what is being designed.

Tools for wireframing

One can find free wireframe tools, so you should experiment and tool with as many as you can to find the one that speaks to you. You can always fall back to pen and paper.

6 steps to make a wire frame

1. Do your research

1. Understand your audience by doing some research

2. Scope requirements and define use cases. This means doing your research to like products.

2. Prepare your research for quick reference

Have references from your audience and what you have come up with in hand while designing.

3. Make sure you have your user flow mapped out

This will help the users have lower levels of frustration, and therefore lower drop-off or drop-out rates. Which equals more revenure, and happy managers.

4. Draft, don’t draw. Sketch, don’t illustrate

Remember that you’re outlining and representing features and formats, not illustrating every detail. Start getting ideas down… fast. Don’t think about aesthetics, colors.

A thick marker pen is best, because this prevents from drawining yourself in detail. Keep the below in mind while sketching:

• How can you organise the content to support user’s goals?

• Which information should be most prominent? Where should your main message go? What should the user see first when arriving at the page?

• What will the user expect to see on certain areas of the page?

• Which buttons or touch points does the user need to complete the desired actions?

5. Add some detail and get testing

The details you are looking for is just to build a skeleton, not the muscle or skin. Think about the following at this step:

• Usability, such as putting the navigation at the top next to your logo, having a search box on the top right, and so on.

• Simple, instructional wording for i.e. calls-to-action

• Trust-building elements: What do you need to build trust in your customers and where would be the best place to put these elements?

• Tooltips to indicate any functionality that could be included in a prototype transition.

6. Start turning your wireframes into prototypes

Once you got your feedback from your first prototype, you can start developing your high-fidelity prototypes. Once you’ve developed your wireframesin Sketch, you can import them into the industry-leading prototyping tool and interlink your screens for a second round of high-fidelity user testing.

How to make your wireframe good: Three key principles

1. Clarity

• The wireframe needs to answer questions of what the page site is

• What the user can do there

• If it satisfies their needs

It is an aid for one to visualize the layout of your page site.

2. Confidence

Ease of navigation through the site and clear calls-to-action increase user confidence in your brand.

3. Simplicity is key

Too much information can be distracting to the usre and will have a detrimental affect on your ursers’ ability to achieve their goals.

---

HTML Basics from MDN

Definition: HTML (Hypertext Markup Language) is a code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted point, or using images and data tables.

HTML is a markup language that defines the structure of your content.

Semantics

Definition: Semantics refers to the meaning of a piece of code. What effect does running that line of JavaScript have? What purpose or role does that HTML element have?

Example; the <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of “a top level heading on your page.”

<h1>Thisis a top level heading</h1>

Example; you could make any element look like a top level heading.

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

This will rend it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above.

More information on HTML

<—BACK