A paper wireframe of a website
A paper wireframe of the website Arthentic Me

Placing a Layout

Nikhil Desai
Jan 28 · 2 min read

Responsiveness is the first and last step; it’s the thing I think about most when making website layouts. If the design doesn’t work on a specific screen, that break-point needs to be thoroughly examined. It is important to consider a mobile first approach, as more than 50% of internet users are on their phone.

The size and shape of the content should dictate how the information is laid out, once an information architecture map has been created. Wireframes should quickly lay out where things will be on the screen. Visual appeal should take a backseat to conveying the placement of objects. ‘UX Laws’ on placement help to guide this process, such as Fitt’s Law:

“The time to click a button is related to the distance to and size of the button.”

This guides the principle of having big enough buttons that are spaced out far enough to not create conflicting user responses. Speaking of signaling, wireframes can also convey different user states, including(but not limited to) hover, focus, and active. I like to make my wireframes in Figma, as adding color becomes extremely easy to batch process.

A colored wireframe from Figma; this could be considered a function-less prototype.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Nikhil Desai

Written by

I’m a Developer and Designer interested in future technology, music, culinary arts, and finding the best UX practices to design impactful experiences.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.