Week 12 – Coding 2 More Pages

Coded 1 complete page, and in the middle of finishing my last subpage.  Goal for the last week is to redo my design for my title and landing pages and put together my process book.

Work 11 – Coding Subpages

This week I coded two pages.  For some reason my custom fonts do not show up on my webpage and neither does my wrapper.  My goal for next week is to have all my pages coded.

Week 10 – building pages 5 & 6

I finished designing my last two pages of my website. I am pretty satisfied by how the webpages (at least the design) turned out.  Hopefully I can translate my designs smoothly onto the web.  My goal for this week is to have all 4 pages coded, and be able to refine my title pages in Week 12.

 

about_mcgarett

episodeguide

Week 9 – Building pages 3 & 4

This week, I designed two more subpages for my project for the show, “Hawaii Five-O”.  I did not get a chance to code, but I think I have a better design for my subpages now.  I looked at a couple websites: IDEO and Hello Design in order to draw inspiration on how to make my project more dynamic.  I was especially interested in Hello Design’s website where when you click on the different projects, there is a lightbox that opens up to the actual project.  You never leave the main page.  I want to incorporate this idea into my project for my “shows” page where the user clicks on a certain show, and a lightbox comes up containing that particular show’s website.  The user can then navigate throughout the website, and when he is done, he can just close the page by clicking on the “x”  and find some other show he wants to visit.  This idea allows the user to not have to continuously hit the “shows” button whenever he visits another show’s website.

Only question I have is whether I still need to keep CBS’ header and footer throughout the website since it does not seem necessary at this point.

Week 8 – Worked on Landing Page

After the crit, I decided that I was going to focus more on coding my pages rather the design for now because it takes me a long to understand html/css.  For some reason, I lost all my code for my homepage so I had to recode my page again.  I then coded my landing page, and got it to look pretty close to my website design in Photoshop.  Instead of setting up a table-cell, like what I had done for my timeline, I wanted to move away from this rigid structure and decided to make each picture and text a div, and I horizontally aligned the pictures this way.  Some problems I ran into are that I have alignment issues with my rows, and I can’t seem to get my footer to look the way I want to at the moment.

 

Week 7 – Midterm Project

Building just the homepage was much more difficult than I had initially thought.  I wrapped my entire webpage, separated the elements into rows, then formed them into different cells, which I soon realized confined me into boxes.  For the navigation toolbar, I set all my information into unordered lists, formatted them and created an orange hover for them.  I then placed my slideshow as an image beneath the navigation.  I created “Tonight on CBS” as header 1, and positioned it accordingly.  The area where I started running to problems when I was trying to place my main content into a three column grid.  I realized that I had cornered myself into cells; therefore, I could not apply the three column grid into my layout.  I had my first two columns spread the way I wanted them to, but I could not figure out how to move the ad to the far right.  Also, my headers kept shifting my columns down.  It is sort of just floating within the website.  I think as I continue working on this project, I will try to employ the three column grid instead of placing everything in cells.

 

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.

 

Week 5: Typography & Website Redesign

3 Articles about web typography:

http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

1.  Typography on the web is not so different than that in print in which it deals with contrast, size, hierarchy, and space.  When building a website, contrast is important because you want your reader to be able to read your text, but at the same time still capture your reader’s interest.  The author suggests that it is a good idea to not use reversed out text for large bodies of text because it can be difficult to read.  Hierarchy is also very important because it helps the reader differentiate between parts of your pages such a heading, subhead and body.  One way to go about this is to use one typeface, but change the sizes throughout the webpage.  Finally, having negative on your webpage is important because it directs your reader to the most important element – the text.  The author suggests having at least 140% of line spacing.  The one thing that surprised me about the article was the size.  In print, 9 point type is still legible even for older readers, but on the web it seems that 10 point font starts to become illegible.  The author suggests to make body text larger than 10 or 12 px. This could be due to the fact that when staring at the screen for long period of time, the body text will strain the reader’s eyes if the text is too small.

http://webdesign.tutsplus.com/articles/typography-articles/the-culture-of-typography-on-the-web/

2.  Unlike print typography, which has been around for a long time, web typography has only existed for about 15 years; therefore, a lot of web designers do not know how to translate printed text onto the web to make it functional yet still meaningful.  The author suggests treating text as a user interface where the most important element on the webpage is the body text instead of the background or button designs.  He makes examples of Facebook, Google, and Craigslist as successful designs because users can navigate through the content and get from point A to point B easily.  These may not be the best looking designs graphically, but the author suggests that this is not as important as easy navigation and content.  Lastly, he points out that with well-written CSS, the entire web layout presentation will have a sense of cohesiveness to it.  Having browsed through many webpages, I always wondered why a lot of them looked the same with not much flair.  After reading this article, I realized that what the author states is true.  I will keep returning to Google or Facebook because the layouts are simple and easy to navigate through without having to push any  “fluff” out of the way.  This article definitely helped me look at my own website redesign project, and re-evaluate whether the layout helps the user get from one part of the webpage to the other in an efficient way or whether it takes them a while to maneuver through the content on the website to get to where they want to be.

http://www.alistapart.com/articles/on-web-typography/

3.  In Santa Maria’s article, Santa Maria shows what kind of typefaces to use on a webpage in order to achieve readability and personality, and like in the previous articles, the author focuses on context, meaning, and contrast.  The author begins by pointing out that just because there are a limited number of typefaces available, does not mean that web designers cannot make beautiful designs from what they are given.  This is where contrast comes into play.  For example, using two different typefaces such as a serif paired with a sans serif, can complement the design or create tension, which brings a bit of interest to the design; whereas, using two typefaces that are too similar can break the design and weaken the message the designer was trying to bring across.  Also when choosing a typeface, designers must make sure that the font they choose can still be read at smaller sizes.  The author suggests to use Verdana and Georgia because they are “sturdy” with high x-heights.  Finally, when choosing a typeface, designers should consider the “mood” of the webpage.  From this article, I learned that even with limited typeface choices, there are plenty of ways to bring interest and contrast to my webpage without the compromise of readability.

3 websites with outstanding web typography:

http://www.newyorker.com/

1.  This website maintains their old style typeface throughout their layout giving the sense of tradition and old money glamour.

http://trentwalton.com/

2.  The typography on this website is interactive and gives the website some dimensionality.  Although the text is light, I think it is a nice contrast to the rest of the context.

http://jessicahische.is/awesome/

3.  I like how she incorporates her swirly typography on her website and it flows into her portfolio, which has the same kind of design.  Gives her website/portfolio consistency.

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

http://www.rtl.co.il/

1.  Right to Left is an Israeli web design company that wants to improve user experience when surfing the web.  What I like about this website when you scroll down, the tabs on the top inform you of where you are at on the site.

http://www.precinkt.com/

2.  Precinkt is a website where people can discover “hidden gems” within a city that tourists would usually not know of.  I like the concept of this website because it a center where you can find different activities to do without having to search all over the web.

http://twitter.com/

3.  Although this may be an obvious choice, I think Twitter gives the user a great sense of community in which topics of interest within a city/a group can easily be accessed with a click of a button.  Posts are short and sweet, so readers can read their tweets and continue on with their daily lives.

Continuation of website redesign: