Web Design 2 #2

Typography seems like such a simple concept , but yet there is so much to understand with this term. When it comes to websites and coding, typography can become very tedious and cumbersome. The book gave us 6 guidelines for using typography when designing a website. You must first limit yourself to two fonts. If you use anymore than two it can become very distracting and lead to someone leaving your website. Such as this example : http://www.soccergiftshop.co.uk/ . The next thing that the book said about typography was how we should restrict color. Meaning if the page uses unnecessary color it may confuse the viewer. Although this is an interesting website this use of color on this website becomes confusing and unnecessary : http://www.posttypography.com/. The third guideline that the book gives us would be matching font size to margin width so that it is easily readable. This website does the complete opposite which is why this is a great guideline to follow:http://www.giftshop.ed.ac.uk/site/index.cfm?killnav=1. The fourth guideline would be using a grid format. As suggested in chapter 12 the grid can be your best friend. It will allow for your viewer to follow your page easily. An example of a great grid website layout would be : http://www.wilsonminer.com/. The fifth guideline would be to design to encourage reading. This means that you are to use things such as pull quotes or oversized opening paragraphs to get the viewer engaged. This website does an excellent job with that: http://99designs.com/ . And last but certainly not least the sixth and final guideline would be to set your type to a baseline grid. This will bring overall harmony to your page. An example of this would be :http://www.alistapart.com/d/settingtypeontheweb/example.html. This video that i found on youtube emphasis this whole set of guidelines very well: http://pixeldreams.com/2011/. So as you can see with following all of these guidelines you can create an interesting and dynamic website and keep the viewer engaged .

Advertisements

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