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.

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.