Reading-Notes
Reading Notes
Wireframe and Design
-
Here are a 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
If the task is very narrow and the visual design is either set or considered unimportant (such as with many backend administrative interfaces), then going from a sketch to coding/development makes sense, whereas if the time and resources and the business value are all high, then spending the time to make a high-definition wireframe and going through a cycle of testing with a fully realized interactive prototype makes better sense.
-
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.
-
So I recommend scribbling a cheatsheet with your business and user goals (your requirements), your personas, use cases, and perhaps some reminders of the coolest features you stumbled across in your competitor research. A few choice quotes from your audience might also help focus your attention on the user’s experience, which is—never forget—what you’re designing!
Mozilla HTML Basics
What is HTML?
Hyper Text Markup Language. This is the code that is used to structure a web page and its content.
A markup language that consists of a series of elements that are used 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.
The anatomy of an element can look like this:
Elements can also have attributes that look like the following:
An attribute should always have the following:
- A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.
You can also nest elements, for example wrapping a word in a “strong” element will mean the word will be emphasized.You do however need to make sure that your elements are properly nested.
Semantics
In programming, Semantics refers to the meaning of a piece of code — for example “what effect does running that line of JavaScript have?”, or “what purpose or role does that HTML element have” (rather than “what does it look like?”.)
There will be different functional/structural semantics in JavaScript, HTML, and CSS.
HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.