Week 6: Prototyping and Website Redesign_v2

3 articles:

http://uxdesign.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/

1.  In this article, Callahan explains that content prototyping is important to the web because it gives designers a rough idea as to where to add media queries to a webpage in order to make the web design more responsive without having to worry about details such as icons, textures, or illustrations.  Without worrying about the width and the height of the document, in content prototyping, designers must employ the use of a fluid grid.  By experimenting with the prototype in different types of browsers such as in the iphone, ipad, and laptops, designers can see at which points the fluid grid breaks down.  At these points, designers apply media queries, which help the website become more legible.  Although content prototyping is still theoretical, it is a powerful tool of the future because it can present content properly without knowing which devices the website is being viewed on.  From this article, I learned that sometimes width and height of a webpage is not an important factor when first building the prototype.  It is more important to use a fluid grid in the design because it helps determine where to place media queries when viewing the prototype in different devices.

http://imprint.printmag.com/information-design/how-to-think-about-website-prototypes-for-designers/

2.  Essentially, prototyping for a website is a layout of how a website will work rather than the actual design of the website.  In the prototype, specific elements will be displayed such as the logo and navigational system.  In other parts of the prototype, there will be generic elements such as lorem ipsum that will eventually be replaced with actual content.  Yet the website prototype must also be designed to look like an actual website in which the questions such as “what is the purpose of the website,” and “who is the website for?” must be kept in mind.  Therefore, hierarchy plays an important role in the process such as showing the sizes of elements and typefaces and knowing where the most important content must be placed.  Designers must remember that the website prototype is only a layout of where content should be placed, so the overall look of the website is still open to change.  From this article, I got a better understanding of laying out the prototype especially hierarchyin which one shows the hierarchy of the website layout through element sizes and typeface choices and sizes.

http://www.netmagazine.com/features/road-web-app-success-prototypes-and-user-tests

3.  In this article, Zambonini gives a rundown of how to prototype a website in which designers first list out the elements of a page, draw mockups of the layout, import their layout into a wireframe, and finally prototype the website.  Unlike the other articles I previously read, the author suggests takes the prototype one stept farther and suggests to test out the prototype by yourself as well as with test participants.  He notes that when choosing participants, remember the find people who are the targeted demographic.  While participants are browsing through the prototype, the designer should ask scenario based questions such as “what do you expect will happen if you click on this link?” and also ask the participants to speak aloud while they browse through the website in order to know their thoughts of the prototype.  By getting feedback from the participants, designers can go back to their layouts and make any necessary changes.  I thought this was an interesting article because it explained how even a prototype can be an important tool for feedback and change within a website layout.  Not only do you want to get the feedback from the client, you also want to know how other people who might use the website think about the practicality and accessibility of the prototype.

Website Redesign_v2:

This slideshow requires JavaScript.

 

About these ads
This entry was posted in Uncategorized. Bookmark the permalink.

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