Wireframing
wireframing is the practice of drawing or digitally visualizing a website/app/user interface before you start coding it. This process is meant to make the coding simple, as you have the end goal in mind from the beggining instead of just throwing features at a page and hoping the user expierience is enjoyable.
Creating a wireframe
before you start creating a wireframe, consider:
- who will be using the product
- what their goal will be
- user flows aka. how you expect the user to progress thru the use of your product
while you are sketching consider:
- how can you organize features to best support the users goal
- which information is most important
- what is the user expecting to see
- what inputs are required from the user
- dp not focus too much on the details (color, size, imaging) of features, but rather the project as a whole
Now collect feedback
- get opinions from others on if your project is easily interpreted and accessible.
And build prototypes
three key aspects of a good wireframe are:
- Clarity
- it should be readily apparent the purpose of your product
- Confidence
- your user should gain confidence in you as they use your product, interactions yeild the expected result.
- Simplicity
- KISS. Keep It Simple, Stupid.
- too much information, detail, interactivity, or visual distraction will impede users.
HTML
the foundation of websites. Tags, organization, structure.
overview can be found here
Semantics
using tags as theyre intended.
benefits include:
- search engines interact with your site better
- screen readers can interact with your site
- it is more legible and easier to revise and edit
- helps interact with devs
references