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.

 

Posted in Uncategorized | Leave a comment

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.

 

Posted in Uncategorized | Leave a comment

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:

Posted in Uncategorized | Leave a comment

Week 4 – Web Redesign Process: Wireframe and Sitemap

Wire frame and Sitemap:

3 articles:

1.  http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

In this article, La gives a short description of overflow, which prevents content from wrapping around a floated element when the element does not expand.  To do this, type in the CSS property {overflow: auto;} or {overflow: hidden}.  Although this is a powerful tool, some of the disadvantages of using overflow are that when using overflow: auto, the content can expand to the width of the boundary of the container causing a scroll bar to appear.  One way to solve this problem is to use overflow: hidden, but this can cause some content to be cut off because it exceeds the border of the container.  In order to override these problems, the author suggests to either add a word-wrap: break-word to the container, which will force text to wrap onto a new line, or use set the max-width of the image to 100%, which will resize the image to fit the max width of the container boundaries.  This article was helpful for me because it reiterates the concepts of how to use floats and overflows in CSS when coding my website.

2.  http://coding.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/

In this article, Spooner reveals that web designers can push their designs to the next level with some new features of CSS3.  One of the new features is border radius where instead of square corners; designers can now make their border corners rounded.  CSS3 also allows for border images where file images can be used as a border for an object.  Two other features are box and text shadow and transparency with RGBA and opacity.  These are powerful tools because they eliminate the need to first style in Photoshop before transferring the image to the CSS, and these features can be coded directly into CSS.  Finally, the last feature of CSS3 is the ability to use custom typefaces in web design.  So far in class, I felt that CSS was a rigid tool that only allowed for certain design elements to appear in web design especially when picking typefaces.  After reading this article, I realized that CSS actually gives designers freedom to design their web pages however they want as long as they can implement their designs through code.

http://css-tricks.com/css-sprites/

A CSS sprite is one image that is made up of an unlimited number of images in which only parts of the image are displayed.  This is like the “on” and “off” button we made in class, but without having to slice the image up.  Instead, the image shifts around to reveal the part you want displayed on the page.  Before sprites, each item in the CSS would have an anchor tag, but not the background image, but now with the sprite, the background image has the anchor tag while the items are coded to just shift positions.  This is advantageous because sprites help lower the number of HTTP requests, which in turn reduces the response time helping a webpage load more quickly.  From this article, I learned that by implementing sprites into my CSS, I do not have to go into my Photoshop document and slice each individual item up.  Instead, I can make one big image, create an anchor tag to the background image of my CSS, and just shift the image around.  Not only this, my webpage loads more quickly and efficiently.

Posted in Uncategorized | Leave a comment

Week 3 Homework

3 Article Summaries:

http://www.adaptivepath.com/ideas/myspace_advertising

1. During the days of Myspace, the company generated money through ads on their website where users could click on the ads while navigating through their Myspace pages.  But this layout became a problem because the ads interfered with users’ experiences for they cluttered the entire website.  In order to create a symbiotic relationship between advertisers and users where each party could profit and enjoy the website, Myspace ditched their 9 panel layout, and opted for a simpler two column spread.  With this new layout, there was only one, eye capturing ad on the website.  It not only generated more profit for Myspace, but it also allowed the user to have an interactive experience within the advertisement as well.  Having been a Myspace user, I know that this one ad format was very effective, for it was the advertisements on the homepage that would always entice me to click on the advertiser’s website.  Had Myspace stayed with its 9 panel layout, the company would probably have lost more users over a shorter time period because having too complicated of a layout will make a user confused; whereas, a simple website layout draws the user in quickly and efficiently.

http://webdesignerwall.com/tutorials/the-simpler-css-grid

2. Nick explains that the 960 px grid is outdated because the gutters are too narrow, and do not work for modern day design.  When people work with the 960 px grid system, they have to add padding to parts of the content area in order to give the illusion that the gutter is wider.  Also, since the live content is only 940 px, the layout contains unnecessary margins on both sides of the piece.  The author suggests a 978 px layout instead because not only does it get ride of the margins, it also increases the gutter space from 20 px to 30 px.  I believe this system allows designers more creative freedom to display their content without having a rigid grid system dictate how a composition must be laid out.

http://www.alistapart.com/articles/responsive-web-design/

3. Web design is transient, for its formula is always changing within one of two years; therefore, making web designers’ lives hard for they must make sure that their designs can adapt to the different devices on the market.  For now, most web designers use the fluid grid, which can maintain the same layout when a browser’s width is adjusted or when the browser is turned to portrait mode; but, this system has its limitations such as that it can only maintain the layout up until a certain width.  Marcotte suggests that designers use a new technique called responsive web design in which both the design and any kind of media device work together to give the user an optimal browsing experience.  The three main players in responsive web design are fluid grids, flexible images, and media queries.  This new format allows websites accessed from any device to maintain their original layout without compromising resolution or format.

2 & 3 Column Grid Layouts:

(760 px x 980 px)

(560 px x 980 px)

3 well designed websites:

http://www.facebook.com

http://www.abc.com

http://www.amazon.com

Aside | Posted on by | Leave a comment