And here’s screenshots of my progress as of WEEK 13.

I know it’s too late.. But here’s a quick show of my progress

I know it’s too late.. But here’s a quick show of my progress that has occurred over the past month. I did upload a week by week version of my developing Yelp.com Redesign on the server however. So there should be my weekly development from midterms to week 10.

Here’s a snapshot of my progress as of WEEK 11.

 

Midterm Thoughts…

Coding is a lot harder than I thought. Or more precisely, it’s takes a lot more time and effort than I had hoped for. The most trouble I had while building the website is troubleshooting rather than the concept of html and css. It was difficult to pinpoint the problem code for let’s say, a paragraph not floating left or getting the hover to work.

Furthermore, there’s a lot of things that I had to google the code for if I wanted it to actually work in my design. And I actually want it to work and not just show how it’s supposed to work but it really doesn’t… Sadly, codes online doesn’t always work and I have to go in and edit it again. Understand it, and then work tirelessly to make it work.

I spend more time trying to make something work than actually adding new features to my design, it’s sort of sad. However, I have managed to build my website to the point where it closely resembles my intended design. Now, I just have to go in and add the details.

Website Prototypes

Homepage prototype

Landing Page1: Events

Prototyping for the Web

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

Ooo pretty colors! (which is an interesting way to present the numerous different ways of a web layout) This article gives a nice comparison of a wireframe and prototyping to the floor plan of a house.

A prototype must communicate the website experience and work like a website. Unlike a wireframe that only gives the structure of the site but without the experience. I found this article really helpful because it also gives examples on how differently the look and purpose of a web can look despite being based on the same wireframe.

http://jeff.io/posts/user-interface-wireframes

This article basically fives a simple and easy 4 step instructions to making a wireframe; from sketches to the mockup. It was really helpful as a way to quickly refresh my memory on prototyping because he give easy to read and follow explanations and pictures on how he does it so the reader can visually see the prototyping of a project from the start to the final mockup.

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

This article talks more about content prototype which is an HTML and CSS based fluid-grid prototype. Which means that when we’re creating the mock ups, the dimensions doesn’t matter as much. It explains on how to use this method of building websites. It wasn’t really useful for me because it was extremely confusing for me to grasp the idea. Although I do understand it a bit, I think that I would need to have a clear understanding of the normal way of building websites for me to understand this method.

Wireframes + Sitemap

My revised sitemap for YELP.COM

This is my 3 personas for possible users and situations for Yelp.

My revised homepage wireframes, I have two slightly different layouts for the homepage but I decided to choose the left layout for my final in consideration for the fold.

And the descriptions: 

This is my landing page wireframe for ‘EVENTS’

And finally, the prototype drafts…

Web Typography

3 websites that have outstanding web typography

http://www.goodnesspopup.com/
This site has a clean and minimal layout, making use of a modern slab serif font, which is also used as part of it’s logo. I feel that because it only makes use of one typeface throughout, it works.

http://www.mulletized.com/
A portfolio site for a web designer, this site uses numerous typefaces (both san-serif, and stylized serif) and in different weights as well. At first, it may seem like it uses too many typefaces which would make it hard to read. However, I feel that the typeface treatment was well done and it was fairly east to read the header. I also felt that the use of limited colors and rules helped as well.

http://jessicahische.is/awesome/
This site is for Jessica hische, a typographer. She largely uses a san-serif for her body text and makes use of large leading and kerning to make it lighter and easier to read. And although she also uses this orange, extremely stylized typeface, I believe that it works for her as it’s mainly used as a header.

3 websites that offer the user a sense of community and/or customization.

http://www.gamesweplayed.sg/
This site’s interesting animation and colorful illustrations is first used hook the visitor, and it’s use of the alphabet as the navigation is interesting. The background music is extremely uplifting and it gives each visitor a fun experience as they learn more about the games.

http://www.justdot.gr/
A design firm specializing in media services. Although it fails at showing their portfolio and half of the site is in russian (I believe), and it’s a bit difficult to read the typography, it still is interesting. I believe that it draws the user because the typography mimics the hand drawn type and it reminds us of our schooldays and gives us a sense of customization.

http://www.etsy.com/
This site is like ebay but for those who love the handmade and vintage items. The images showing the products are already a tool for drawing the user’s attention. This site has a large sense of community, where it encourages users to start their own ‘shops’ and make it easy for us to navigate. Furthermore, their ‘featured seller’ section strengthens this site as a community that appreciates and brings together people of similar interests.

Discusses type on web

informationarchi­tects.­jp/­en/­the-­web-­is-­all-­about-­typography-­period/­
This article talks about optimizing typography to convey information that is readable, accessible and usable. basically taught me exactly what typography is, and that just picking a good typeface is not typography. As web designers, we shouldn’t complain about what kinds of typefaces we could use but we should focus more on using it the best we can, treating text as a user interface. Information design is about the use of good typography, not good typefaces.

http://www.alistapart.com/articles/the-look-that-says-book/
This article talks about the history of hyphenation and justification as an important and time honored technique that has been used largely in print but rarely in web. It talks about the different ways of using hyphenation for the web, such as hard-coding soft hypen into the HTML or using the Hyphenator.js, as well as the disadvantages of doing so. However, it suggests that with the evolving web, it should be made into an option for onscreen reading soon.

http://webtypographyforthelonely.com/
My favorite article, if it can be called that. This site presents 5 different ways of creating animated typography such as punchout, triangulate, coolinate, cluster, illuminate. It talks about the use and purpose, but it also describes how it works by offers the coding and steps into making it ourselves. It showed me the possibilities of web typography which you can’t get from print.

3 articles discussing CSS for web

Why a CSS website layout will make you money

http://www.webcredible.co.uk/user-friendly-resources/css/css-website-layout.shtml

There are 4 main reason; reduced bandwidth costs, higher search engine ranking, faster download speed and the increase in reach. One of the biggest factor is that CSS holds a higher density of content with less code and allows for javascript to be used. Each of these factors all contribute to attracting more visitors to the site which should lead to an increase in potential enquiries and sales. I found this article useful in making me understand the use and importance of CSS more for the evolving web.

Improving Code Readability With CSS Styleguides

http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/

This article presents 5 coding tips that is meant to dramatically improve code management and readability. Creating striking comments as a heading for each group, creating a ‘table of contents’ at the beginning of the CSS file, creating a color and typeface glossary for future reference, having a clearly defined format to the coding layout and finally indenting new or changed lines to make them more visible. Extremely helpful tips in which I plan to implement into my coding habits and hopefully save me a lot of future troubles.

Learn CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/

This tutorial examines the different CSS positioning properties such as position:static,
position:relative, position:absolute, and float.It’s an extremely simple tutorial slideshow that displays the CSS code and the visual result in a way that is easy for me to understand. With each slide giving an explanation to each property and how it changes when the property is changed.

3 Column Layout

3 Column Layout

More or less the same thought process as the 2 Column Layout. However here, I gave the middle column a flat green background. This way, we can clearly see the 3-column layout and it also draws the viewer’s eyes into the information. This is designed around a centered layout (thus the arrows pointing towards the logo in the middle)

Also, the navigation is a the bottom, mainly because I felt that it would be distracting against the arrows if it were on top.

2 Column Web Layout

2 Column Web Layout

2 Column Layout

I did both the 2 column & 3 column web layout design using the information from http://worldharvest.cc/

Overall, I wanted to have a clean design which had a strong header and footer which I could use to hold the webpage together. I decided to limit the colors and used green and yellow for contrast.

I wanted to give the background a slight dimension to it, so I used the gradient (see first slide). To bring attention to the motto “Living the Dream”, I created some arrows to draw our eyes towards it. The green box caption for the sponsor-a-child was done in order to draw attention as well as to maximise the photograph size.