reading-notes

Class 4 Reading Assignment: HTML Structure

Resources

• Wireframe and Design

• Mozilla HTML Basics

• Semantics

• Mozilla HTML Docs

• Mozilla HTML Elements

Takeaway from Resources

Wireframe and Design.

What is a wireframe? It’s a practice used by UX designers which allows them to define and plan the information hieracrchy of thier design for a website, app or product. When designing for the screen you need to know where all the information is going to go by using a plain black and white diagram BEFORE building anything with code. It’s done in black and white because colors, typeface choices and text can be distracting when you are planning the layout and interaction of your interface.

There are various ways that you can use to design a wireframe. Some people draw them by hand while others use software such as Invision or Balsamiq to create theirs. How you make your wireframe is completely up to you.

• Wireframes drawn by hand 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. Changes at this stage are much easier and cheaper than making changes after coding is under way.
• Switching later to software allows you to keep track of more detailed decisions.

The process can be implemented in various ways.

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

Regardless of approach, it’s important to keep these Key Principles in mind:

• Maintain Clarity
• Gain User Confidence
• Simplicity is Key

Steps to Make a Wireframe.

• Do Your Research - Understand the target audience and research competitors.
• Prepare Research for Quick Reference
• Map Out User Flow - Ensure that your users are self-sufficient
• Draft and Sketch
• Add Detail and Start Testing
• Turn Wireframes Into Prototypes

Mozilla HTML Basics.

• 1. Opening Tag: <>
• 1. Closing Tag: </>
• 1. Content: The content between the opening tag and closing tag.
• 1. The Element: Opening tag, closing tag, and content all together.

Semantics.

Mozilla HTML Docs.

Mozilla HTML Elements.

HTML Slideshow Notes

• What?
• Why?
• How?

Made webpages with simple HTML, CSS and JavaScript.

Learning how to properly have the framework was important.

• Body
• Sections
• Paragraphs
• Etc.

Hypertext Markup Language

Structure - for our page

Specifically Content

Semantic - Plainly describes its meaning/purpose

Headers = <h1>Content goes here</h1>

Anchor tags =

Image tags =

You have to give these tags additional information in order for them to do their jobs.

href attributes = additional information with an assigned value.

Here we have the opening tag, the content, and our closing tag.