Week 7_ Sketching And Wireframing [Class Activity]

Wireframe is one of the most important tool you have to use when you want to design a website or an application. It is a tool that allows you to present the structure of your design to your customer. You are not supposed to use any visuals so as your customer will concentrate only to the design of the web page.

Wireframes usually shows where the location of different key elements will be. For example the locations of the header, footer, navigation, content objects, branding elements, images logos etc.

On monday’s session was asked from us to to do an initial design work aimed at producing a web-based version of the Wired magazine. We separated into groups of four people.
At first we discussed a few of our ideas and then you started to do different sketches of our ideas to see which one works better. Finally we ended up to the First page of the website to present a Dice. On each side of this dice covers from all the different magazines will be appear and the user by flipping the dice he could choose one of them by clicking on it. After clicking on the magazine the content page will appear and from that page you could pick the article you are interest about. The article page will include a text to read and also will be an audio guide as well for those which prefer to listen instead to read. A button to go back or move to the next page will be included as well.

altAlYdjToDILV_Hd4lHdcgCO3vdx0yoDP80eYMWQ0ju0Xb  WP_20141103_11_52_43_Pro WP_20141103_12_02_33_Pro  WP_20141103_12_03_01_Pro

The next step of this task in order to prodce those wireframes we had to use a program call Balsamiq Mockups!!!

altAvd1_roT-lqk9y7xqZvv5SbFnxnjN9PKtB1G1TdW7lns WP_20141103_12_47_30_Pro

References:

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

Advertisements
Week 7_ Sketching And Wireframing [Class Activity]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s