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.