Johnston - Reading Notes - Home
Code 102, Intro to Software Development
Class 04 - Reading Notes
The Definitive Guide: How To Make Your First Wireframe
The Definitive Guide: How To Make Your First Wireframe
Wireframe
Not dissimilar to an architectural blueprint, a wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. As a wireframe usually represents the initial product concept, styling, color, and graphics are kept to a minimum. Wireframes can be drawn by hand or created digitally, depending on how much detail is required.
Wireframing is a practice most commonly used by UX designers. This process allows all stakeholders to agree on where the information will be placed before the developers build the interface out with code.
Examples of Wireframes
Some good online wireframe tools
Steps to make a Wireframe
Do your research!
Before wireframing, understand your audience and analyze similar products.
Prepare research for quick reference. Make a ‘cheat sheet’ with your requirements, and findings from your research.
Map your user flow To limit your own (and your user’s) frustration, map out the process of moving through information on a site.
Draft and Sketch Start wireframing! This does not require fine detail, but should represent features and formats. Do not worry about aesthetics or colors, only function.
Things to consider:
Organize content to support user goals. Consider which information should be most visible. What will the user *expect* to see on the page? What touch points does the user need to complete? Share your wireframe with colleagues, and collaborate.
Add detail and start testing
Add the skeleton of your site from top to bottom, left to right. Consider the placement of navigation and search tools, keep instructions simple, include tool tips if necessary.
Step-by-step guide on Usability Testing
Turn Wireframes into prototypes
After receiving and utilizing feedback from testing, create your prototype, and continue testing.
Tips on making a good Wireframe
Be clear. What is this page for? What can the user do here?
Be confident. Use familiar navigational processes, and place items in predictable places.
Simplicity. Attractiveness is not a consideration for a wireframe. Keep it simple!
Mozilla HTML Basics
Semantics
The term semantics refers to the meaning of a piece of code.
What the code does, or what effect it has.
In HTML, a header is a semantic element. It emphasizes the text inside of the header tags to appear as a header. Any text can be made to look this way by styling, but it will not function correctly without the proper semantics. “HTML should be coded to represent the data that will be populated and not based on its default presentation styling.” CSS is for presentation.
Some examples of semantic elements
In HTML, these will be represented as tags.
article, aside, details, footer, header, main, nav, section, summary, and MANY more.
https://chrisjohnston1986.github.io/reading-notes/102class04reading