Class 4: HTML - Hypertext markup language

HTML is the structure of the webpage. The head is how you’re communicating from your computer to the server from a browser.

← stuff you don’t see in the browser window, communicating with the server from browser

← An introduction to wireframing Resources: invision.com miro.com Google Drawings What is a wireframe? Wireframe examples Wireframes drawn with paper and a pencil, or at a whiteboard, have the advantage of looking and being very easy to change, which can help tremendously in early conversations about your website or product. With the help of paper-prototypes, you can test with end users at every stage of ideation and design. Changes at these stages are much easier—and therefore cheaper—than changes deemed necessary after coding is under way. Switching later to software (after initially hand-drawing your wireframe) allows you to keep track of more detailed decisions. Things to consider before you start wireframing The decision to use online tools or to wireframe by hand, and the process used to get to from wireframe to code, is less related to the individual preference of the UX Designer, and much more related to what approach the particular situation requires. It 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. 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 The best tools for wireframing 6 Steps to make a wireframe Do your research Create user personas Define use cases Perform competitor research (similar product lines, trends, best practices) Prepare your research for reference Make sure you have your user flow mapped out Draft, don’t draw. Sketch, don’t illustrate pose yourself the following three questions while you’re sketching: How can you organise the content to support your users’ 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? Add some detail and get testing Usability conventions, 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 Start turning your wireframes into prototypes How to make your wireframe good: Three key principles Maintain clarity Gain user confidence Simplicity is key