reading-notes

What is a wireframe?

_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._Wireframing

Examples of wireframes:

• Wireframes drawn with paper and a pencil, or at a whiteboard, have the advantage of looking and being very easy to change
• With the help of paper-prototypes, you can test with end users at every stage of ideation and design.
• Switching later to software (after initially hand-drawing your wireframe) allows you to keep track of more detailed decisions.

number of ways different designers can structure the process from design to implementation:

• Wireframe > Interactive Prototype > Visual > Design
• Sketch > Code
• Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
• Sketch > Wireframe > Visual > Code

** The best tools for wireframing**

UXPin: UXPin has a wide range of functionalities, but one of the best ones is how it facilitates building responsive clickable prototypes directly in your browser.

InVision: InVision allows you to get feedback straight from your team and users through clickable mock-ups of your site design. It’s completely free too!

Wireframe.cc: Wireframe.cc provides you with the technology to create wireframes really quickly within your browser, the online version of pen and paper.

How to make your wireframe in six steps:

1. Do your research
2. Prepare your 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

HTML basics:

So 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, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

Anatomy of an HTML element: Elements can also have attributes that look like the following:

Nesting elements: You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word “very” in a element, which means that the word is to be strongly emphasized:

My cat is very grumpy.

Images

Let’s turn our attention to the element again:

Headings Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1>–<h6>, although you’ll commonly only use 3 to 4 at most

Paragraphs

As explained above, <p> elements are for containing paragraphs of text; you’ll use these frequently when marking up regular text content:

Lists A lot of the web’s content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

Unordered lists are for lists where the order of the items doesn’t matter, such as a shopping list. These are wrapped in a <ul> element. Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element. Each item inside the lists is put inside an <li> (list item) element.