wireframing for web design

Question

how does one go about wireframing for the rough draft of a website? i was wondering whats the whole like.. step by step process in designing a website?

Answer 1

Assuming you've already established the aim of your website, list of features to include, target audience, etc. Here's a flexible procedure you could follow:

Create a list of all the pages you're including. Next, write 'screen summaries' to outline what each page should consist of - include how they link with one another. Then, sketch mock-ups (rough draft) out of simple shapes. Focus on breaking the page up into parts and indicating what each part is. For a website you could even annotate it with their respective HTML tags. E.g. header, nav, article, aside, img.

Then you can use Wireframing software to refine your mock-ups. There are various tools available to do this. For instance you could use Adobe XD (Available for Free!) and even add demo interactivity, with UI Kits to kick start your build.

Other popular solutions are Balsamiq, MockFlow, Wireframe.cc. There's a lot of options floating around but some can be pricey.

Answer 2

@Voxel thanks a lot. this helps out. ill see to that adobe XD