Week 7: Process work for Design 1 – Sketching and Wireframing

by wangtianchen

We already knew what is Sketching in the last week. In this week, we were learned something called Wireframing.

What is Wireframing?

A wireframe is a great way to ensure clarity and consistency during web site development: it’s like creating an outline before detailing the specifics.A wireframe is a skeletal outline of the components of web site so that you can better see the relationships between them. [1]

A wireframe uses basic boxes and lines to define the spaces on the page, to clarify branding and navigation, and to indicate where text will reside — before the actual images and content have been created. [1]

In this Monday, we had done some wireframing activities with tutor Andy. What an interesting class! We need to producing a web-based version of Wired (UK) magazine for iPad and iPhone. We began the process by working on concept sketches and ideas, producing wireframes of the layout, navigation, and information design.

Our group’s idea come from DICE. In the first main website page, we included magazine’s name, it on the top of first main website page. Magazine’s cover covers every side of dice in the centre of website page, so when you try to choose magazine, it likes throw dice. Then, when you touch the magazine which you chosen, contents will come out on the screen. After you double touch the contents, you will going to the article page. In the article page, it have voice as well, so you can listen to the article while you read. We also had back and next button in order to  go back to former step and next step.

 10609063_607097876068989_934249525_n 10752089_607097869402323_201076699_n 10754808_607097862735657_776856685_n

We used the web demo version of Balsamiq Mockups to produced our wireframes.

10751962_607097886068988_327846718_n 10751907_607097902735653_1274800355_n

Overall, a wireframe is a skeletal outline of the components of your web site so that you can better see the relationships between them. A web site wireframe is a great way to clarify your vision for an entire web development team. [1]


[1] Gliffy. (2014). Mock up Web Pages Quickly and Easil with Wireframes. Retrieved November 06, 2014 from http://www.gliffy.com/uses/wireframe-software/