Wireframe and Design

Wireframe is a practice that helps the designers to define and plan the information hierarchy.

Making your wireframe in six steps

1. Doing research
2. Preparing reference
3. Mapping out user flow
4. Drafting and sketching
5. Adding detail and testing it
6. Turning wireframes into prototypes

3 Key principles for a good wireframe

1. Clarity

   The wireframe is a tool for your to visualize the layout of your site page.

2. Confidence

   Ease of navigation and clear calls-to-action will increase user confidence.

3. Simplicity

   Avoiding to provide too much information, coppy, or links, which can be distractive to the users.

Mozilla HTML Basics

• Nesting elements
  • the order of opened and closed tags has to be consistant
• Empty elements
• Headings : <h1>-<h6>
• Paragraphs: <p>
• Lists
  • Unordered lists: <ul>
  • Ordered lists: <ol>
  • List item: <li>
• Links: <a href=”https://link-to-something”> something</a>

Semantics

The meaning of a pice of code.

Some of the common tags in HTML:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

<==Back>