Content Management

eCommerce Shop I Use

05/02/2012 – 7:39 pm

These days, i do a lot of my shopping online. Especially at Christmas time, it is much more convenient to browse, buy and have presents delivered ready gift-wrapped straight to my front door where i can then give them to the relevant people! Nothing beats this convenience, especially for someone who hates shopping and everything related to it. However eCommerce websites really have come to the rescue!

I personally am a great fan of Amazon. The easy browsing method and the extended product details really provide all the information a customer requires. And if not, a simple email to the seller with your question will soon get you updated.

Furthermore, the recommendations are an extremelly useful service provided when shopping as are the special offers. The shopping basket experience and payment method are also very easy to understand and work through. All in all a great service and much preffered over the traditional shopping method!

Permalink | Comment (0)
Content Management

Extended Blog Post: Writing for the Web

05/02/2012 – 7:23 pm

This extended blog post accompanies my presentation on Writing for the Web and elaborates on the topics discussed during. The slides for the presentation can be found at http://speakerdeck.com/u/mawebdes/p/yiannis-gaitanos .

During the presentation, I discussed 6 Rules for Writing for the Web which were derived from an article by Merry Bruns titled “The Six Rules for Web Writing.” The article can be found at http://www.asaecenter.org/Resources/EUArticle.cfm?ItemNumber=11758 .

Merry Bruns’ Six Rules for Web Writing are as follows:

  • Create content for the readers
  • Show them the benefits
  • Write to reach them
  • Write more concisely
  • Format for scanning
  • Become interactive

However, before these rules are discussed in greater detail, it is important to understand how people read online. The easy answer to this, according to Jakob Nielsen, is that people don’t read online with only 16%* of users reading a webpage word for word. Instead, 79%* of users scan through content (*http://www.useit.com/alertbox/9710a.html).

Further study showed when we read a webpage, our eye automatically traces the text in an F-shape. We usually read the first paragraph in its entirety, as we trace the first long line of the ‘F.’ The next paragraph gets only half that much attention as we track about mid-way through the paragraph, forming the second short line of the ‘F.’ The last step is simply to skim down the rest of the article, vertically.

Heat-maps from user eyetracking studies of three websites. The areas where users looked the most are coloured red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations. (www.useit.com/alertb)

So, what does this mean for us as web-designers? As a general guideline, we should aim to use 50% less words than print  for our online content seeing as users will not read it all anyway. The most important information should placed in the first two paragraphs as the user probably won’t read more than that. And content should be broken up into little bit sized paragraphs or sections.

Now, back to Merry Bruns’ Six Rules for Writing for the Web:

1. Create content for users.

It is extremely important to identify who your target audience is. Are they young children, teenagers or adults for example? Are they university graduates or primary school pupils?

Once the target audience has been identified, you want to gear your website and content toward them. For example, teenagers are much less likely to read through content thoroughly. So make use of images, graphics or videos to make the content interesting and get the message across in a different format.

Determine what is important to the user. Put yourself in their shoes and think to yourself: what am I looking for? What questions do I have about the topic? How do I want to find it? What format do I want it in?

Remember: Content is King!

2. Show them the benefits.

It is very important to edit the information for maximum impact. If you are selling a product/service online, the audience must be able to see why and how it will benefit them immediately. If a user is bogged down with a wordy and complicated explanation of a service, they are likely to get confused and frustrated.

A frustrated user tends to move off a website quickly to seek the information elsewhere. And once that happens, it is very unlikely that same user will be visiting your site again.

3. Write to reach them.

Write your content as if speaking directly to your audience and therefore use appropriate language. If you are writing for young children for example, do not use language that only a Phd graduate would understand! Also, if writing for a global website, decide which dialect of a language you are going to use and stick to it. So, if writing in UK English, use this dialect throughout the website and do not switch between UK English and American English.

In general, web writing is more conversational than print. Even if you have decided on a formal tone for your content, keep it a bit friendlier. If a tone of superiority or an overly formal writing style is adopted, pages can seem canned and artificial. Also, it can seem as if you are trying to big yourself up which in turns put down the user.  In addition, a more conversational tone ensures the reader will understand what is being read and reduces the likelihood of misinterpretation.

Moreover,  do not use industry jargon or company in-house terms because a user will not understand them. This also it alienates the user. Finally, do not talk down to your audience as it is condescending and puts people off!

4. Write more concisely

In general, reading online is harder than reading print. There are various reasons for this such as:

  • It is extremely tiring looking at screens for any extended period of time. The backlighting causes eye strain.
  • On-screen text is not as legible as print. Even on high definition screens there are still tiny gaps between each pixel compared to a solid line of ink found in print.
  • There are also many environmental factors which effect an on screen reading experience such as overhead lighting, natural light from windows and screen glare.

Think to yourself: Do you like reading long documents or paragraphs on screen or would you rather print them off and read them on paper?

So, as website designers, we should aim to reduce the amount of time a user has to spend looking at a screen and reading. Concise means expressing much in few words, and the benefits of this are numerous.

Content has a greater impact when its concise. This has been proven by many studies. Users are able to take in more information in less time. In addition, users retain the information they have read better if it is concise. Consider reading a whole article in Wikipedia or simply reading the summary at the start. You get the same information from both but the article is wordy and time consuming to read while the summary is short and sweet. Which are you more likely to remember?

Use the inverted pyramid writing style. This is good for journalism but it’s even better for the web!

The widest part at the top represents the most substantial, interesting, and important information to convey, illustrating that this material should be at the head the article.  The tapering lower portion illustrates that other material should follow in a declining order of importance.

5. Format for scanning

Users are busy and impatient. They have a lot of factors to contend with online such as page load times, finding the correct content and filtering through it for the required information.

Their overall aim is to find the information they want and then get on with their lives! They do not want to get bogged down on the computer for hours on end looking for the right content.

As mentioned previously, users scan through information quickly and for that reason they appreciate content that takes this into consideration and facilitates it. When writing a website’s content, think about keywords and phrases in the subject that a user might be looking for. Outline key ideas and concepts and determine what needs to be communicated.

There are many tools available to a web designer to assist users in scanning through content so use them! For example bullet points and numbered lists. Bold and italic formatting to highlight and emphasise. Spacing should be utilised to break content up into short paragraphs & sections. And finally, headings and sub headings. Use keywords and phrases in these as well so the user can find the relevant section quickly.

6. Become Interactive

Web design allows for a lot more than just text. If you were to come across a website of just text on a white background, you are likely to leave.

There are several interactive tools:

  • Images. These allow us to make content more interesting and brighten a page.
  • Infographics. Data and information can be displayed and summarised on tables, charts etc and save the user from a lengthy, descriptive written paragraph.
  • Animations. Can visually represent processes easily and clearly.
  • Video. Adds interest and can visually represent processes and demonstrations.
  • Flash Content. These include interactive methods of scrolling and navigation which can make a page much more interesting.

These tools can be used to substitute lengthy descriptive text and prevent the user from having to read it. We have all heard the saying “a picture is worth a thousand words.” You can also visually represent content which can enhance it and  further assist users retain information. Furthermore, colour and images can be used to set moods and evoke emotion in users.

Overall, interactivity helps improve usability for users which in turn makes them happy and more likely to stay on your site. However it is important not to overdo it with interactive features. Too many can be annoying and distracting from content which is likely to encourage a user to leave.

Following the Content Management class and a lesson on Content Strategy, additional points to consider include:

  • Use narrow columns of text to reduce a user’s likelihood of losing their place when reading. It is much easier to get confused and start reading the wrong line of text if columns are long which can frustrate a user and reduce readibility.
  • Avoid justified text as these can cause ‘rivers’ of white space between the text rows which reduce readability and can be frustrating.
  • Use an easy-to-read font and size with appropriate line-heights. This ensures the text is readable and clear.
  • Use appropriate contrast between text and background image. Dark grey or black text on a white background ensures the text is clearly visible.
  • Write primarily for people and not specifically for search engines as your users are people!

Examples of good web writing include the BBC News page and MSN news page. These can be accessed at:

Examples of bad web writing can be found here:

 

 

Permalink | Comment (0)
Applied Art for the Web

Grids in Web-Design

25/01/2012 – 9:47 pm

What is a Grid?

A grid, as defined by Wikipedia, is a “two-​​dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.” (http://en.wikipedia.org/wiki/Grid_%28page_layout%29, accessed 20/01/2012) The grid is basically a set of horizontal and vertical divisions used as guidelines to organise and structure content.

Our brains are wired to make things simpler in order to make them readily understandable which is why we are compelled to impose order on things that seem chaotic. The easier it is to impose order, the quicker we can identify a pattern and move on. Grids are so organised and logical that they require hardly any interpretation.

Ratios are at the core of any well designed grid system such as the ‘Rule of Thirds’ and the ‘Golden Ratio.’ These ratios are everywhere in modern society and it is using them successfully in a grid system that can determine whether a design functions properly and is aesthetically pleasing.

 

A Brief History:

The use of grids can be traced back hundreds of years with evidence of grid systems being utilised as early as medieval times. These were used for writing the hand copied books of the Middle Ages and were based on optimal proportions. An example of such a grid system is ‘Villards Diagram.’

Villards-Diagram

The modern grid system did not appear until after World War II when a group of graphic designers, many of whom taught at the famous Bauhaus school, began to question the relevance of the conventional page layout of the time resulting in a more flexible system helping designers achieve coherency in organising the page. The overall outcome was the typographic grid which today is associated with the International Typographic Style.

 

The Advantages of Grids

The advantages of using grids for design are numerous. In his book, Ordering Disorder Grid Principles for Web Design, Khoi Vinh describes the major advantages as:

  • Grids add order, continuity and harmony to the presentation of information.
  • Grids allow an audience to predict where to find information, which aids in the communication of that information.
  • Grids make it easier to add new content in a manner consistent with the overall vision of the original presentation.
  • Grids facilitate collaboration on the design of a single solution without compromising the overall vision of that solution.

While grid systems have seen significant use in print media, it was not until recently that the use of grids in website design has exploded in popularity.

 

How are Grids used in Web-Design?

Design for the screen poses unique challenges. Grid design and frameworks need to be flexible because information is variable and subject to viewer selection. There are many grid system frameworks available for use, the more popular being the 960 Grid System. There are also many online tools which will assist a designer in creating a custom, flexible and semantic grid system to use.

The 960 Grid System is 960 pixels wide and comes in two primary variants, a 12 column and a 16 column grid. The grid system effectively is a CSS framework 960 pixels wide. This width was chosen because it fits nicely on a large majority of screens which have 1024 pixel wide displays and because 960 is easily divisible allowing whole numbers when factoring in column widths and margins.

By organising visual communication with a grid system, the designer hopes to create strong interrelationships between the typographic and visual elements. A grid is a system designed to assist designers in creativity and organisation of content and in no way should be used as a fixed system. A grid must be flexible and seen as a “springboard for creativity”– Khoi Vinh.

“To say a grid is limiting is to say that language is limiting, or typography is limiting.”– Ellen Lupton, 2009.

Below is an example of a restaurant business website which utilises grids in its design:

Pizza-Express Homepage

Pizza-Express Homepage

Pizza-Express Grids

Pizza-Express Homepage Grids

Pizzaexpress.com is a good example of a website using a grid system. The website utilises a 6 column grid 940px wide even though the overall site is 956px wide. This is close to the widely used 960 grid system and means the whole site width will display on a 1024px screen.  Each column is 140px with a 20px gutter (displayed in white on the screenshot).

On first entering the website, the grid is not immediately visible. This is due to the interactive CSS3 slider which scrolls through images of pizzas and other dishes taking up all the screen space above the fold. (The fold is shown as a yellow dashed line on the screenshot).  However, once the user scrolls down, the grid layout becomes more apparent. The grid assists in the lining up of content horizontally throughout the page and ensures spacing (gutter) between elements is equal.

In addition, the grid helps ensure the different content elements are an appropriate size. For example, the ‘Find, Book or Order Online’ section found just below the fold on the left is 4 columns wide including the gutters. The ‘Our Food’ and ‘Offers Worth Sharing’ sections found immediately below are both 2 columns each and have a gutter between them. Both of these sections together add up to the same width as the ‘Find, Book or Order Online’ section found directly above. This strongly affects the continuity and the visual balance of the site, making it more appealing and clearer for the user to interpret, understand and experience.

It also creates a visual hierarchy of content elements. As a user scrolls below the fold, the  ‘Find, Book or Order Online’ section will be the next object to draw his or her attention. This is because this section is the next biggest element on the page and is also a direct call to action for the user to find a restaurant nearby. The typography styling in this section and the fact that the web designer has made the heading bigger for this part further reinforces the visual hierarchy and that this section is more important than the ‘Pizza Express on Facebook’ section which is on the same level on the page.

Branding and the navigation menu span across the top and whole width of the website. The restaurant’s logo is slightly to the left of the grid lines and therefore off the grid.  This in turn emphasises the restaurant branding (logo) and the website’s navigation resulting in a more apparent usability experience. Also, its placement in the top left hand corner of the website continues to emphasise branding and brand awareness to the user. This is encouraged because people in the ‘Western’ world read from left to right, top to bottom and therefore an object placed top left on a webpage is often the first element to be seen by a user.

Below the navigation, there is a clear call to action where a user can search for a restaurant nearby and download the menu. This section of the content takes up the whole width of the page filling all four columns clearly creating visual hierarchy against the rest of the page’s content. Moreover, the off grid section further reinforces the call to action as do the extremely noticeable pink coloured buttons against a black background.

The negative (white) spacing of the gutters between columns and the overall layout of content elements have a strong positive effect on the content’s legibility and user’s understanding.

The website, utilises different grids systems throughout the pages depending on the different types of content. This perhaps is not the best idea as a grid should be constant throughout so users can predict where content is going to be as they navigate through the website.

Pizza-Express 'Our Food' page

Pizza-Express 'Our Food' Page

Pizza-Express 'Our-Food' Page Grids

Pizza-Express 'Our-Food' Page Grids

The ‘Our Food’ > ‘Discover’ page employs a 4 column grid system with a 12px gutter. The branding, navigation bar, ‘Find a Restaurant’ search and ‘Download Menu’ buttons remain in the same position at the top of the page and provide a clear, easily identifiable and continuous user interface.

Following on down the page, another section titled ‘The New Stars of Pizza Express’ can be seen half above the fold and half below encouraging the user to scroll down. This section can also be seen on the homepage however it only occupies 2 columns from the grid whereas on this page, it can clearly be identified as the main content as it fills 4 columns, the whole page width. The actual content inside the section is not aligned to the grid lines emphasising the photos and paragraphs of text about the restaurant’s dishes.

Below this, 4 individual sections can be seen relating to the restaurant’s different menus. Here, the grid is being used to present the content horizontally (on the grid) as each section fills a whole column from the grid. These individual sections are then wrapped in a border and headed ‘Discover Our Menus’ presenting them as one section overall.

Negative (white) spacing is being utilised again to emphasise the section and almost mirror the white gaps of the top third of the webpage. This, consecutively emphasises the ‘New Stars of Pizza Express’ section by enclosing it in a thick white border.

The web pages containing the menu use the same 6 column grid system as the homepage. The branding, navigation, ‘Find a Restaurant’ and ‘Download Menu’ call to action sections are again present where expected at the top of the page, further reinforcing the continuity of the user interface.

Pizza-Express 'Menu' Page Grids

Below this, the menu can be seen clearly divided into 3 columns with the content aligned to the left. Headings are emphasised as they are the largest type on the menu and placed in a Serif font therefore creating visual hierarchy and making the content more legible and clearer to understand. The dish names are also found in a Serif font but slightly smaller than the heading. In addition they are styled in the same pink colour as the call to action buttons found below the navigation creating continuity through the website’s colour scheme and making it aesthetically pleasing. Dish descriptions are found in a Sans Serif font and much smaller than the dish names showing the third level of hierarchy through the text size.

Menu Close-Up

The alignment of the menu items on the grid makes a much more visually appealing and balanced page. If these items were placed haphazardly on the page, the menu would be illegible and the user would get extremely frustrated when trying to read through. The grid further assists in creating visual balance by aligning menu items to the top of the page and listing them.

It is clear this page is extremely content rich containing not only menu items and dishes, but also links to reviews  from celebrities. Further emphasis is placed on certain dishes by placing them in a pink coloured box. In addition, as a user scrolls down, black boxes appear within the menu containing photos and headings concerning reviews from celebrities. These boxes are emphasised by their high contrast typography, beautiful imagery and the white spacing all around. Both the menu item boxes and celebrity review boxes are aligned to the grid as well ensuring the visual continuity of the lines as a user reads and scrolls down the page.

Pizza-Express 'Desserts' Page Grids

The ‘Desserts’ page again utilises the same 6 column grid as the previous menu page and the home page. This continuity in content layout makes it easy for a user to identify the content he or she might want to read. In addition, the navigation is in the same place as before as is the ‘Find a Restaurant’ and ‘Download Menu’ call to action section. Again, this continuity in layout and navigation ensures easy functionality of the site and reinforces a good user experience.

In addition, the grid layout of this website helps enhance the brand image and identity of the restaurant and assists in providing credibility to the content and business. Ensuring the content lines up on a grid system not only makes it more legible and easier for the user to skim through and find the content he or she is looking for, it also assists in providing visual balance, emphasis where it is needed, a positive effect on legibility, usability, accessibility and an overall better user experience.

As a result, the website appears more professional which gives the content credibility and the user a sense of security. This is extremely important when creating a website online because effectively anyone with the knowledge to build a website can publish content online. Once again, from his book Ordering Disorder Grid Principles for Web Design, Khoi Vinh says “If a user encounters some evidence that there is order in place, his confidence in and sense of ease with the system increases dramatically.”

This is extremely important as, very often the user does not know the source of the content on a webpage. However, if the page looks good, is well laid out, and so on, it gives a professional feel and look to it therefore reinforcing the credibility of content and putting the user at ease.

 

Conclusion

Overall, even though one restaurant’s website has been discussed, it is apparent that many of the more professional and successful restaurants and businesses utilise grid systems on their websites. A grid is an extremely useful and powerful tool, however great care should be taken at the start of a web design project when designing the grid.

“A grid is only useful if it is derived from the material it is intended to handle.” – Derek Birdsall, Notes on Book Design.

Furthermore, Khoi Vinh also says “ when we use a grid for the Web, we must be responsive to our users, we must create experiences around the fact that they will not just consume them but also use them, and so we must take into account the grids behavioural dimension as much as its formal dimensions. We must also keep in mind that the grid is not a tool to impose order on users or to usurp their control; it is a tool to impart order to our users so they can create their own experiences.”

Here, Khoi Vinh is basically saying that the user is not just going to read a website, he is going to interact and negotiate the information being portrayed for himself. For this reason, a grid must not be overly complicated and instead should be kept ‘everyday’ simple. In other words, a web designer should not design the content layout in a way that he believes people should look at it, but keep it basic so that the user can interpret the content provided in a way he or she wants to.

In general, grids are used to line-up and present visual content in an orderly and logical manner to support a good user experience. In addition, a grid assists in the creation of a visually balanced website which is paramount in helping a user to understand the content and interpret it correctly and effectively.

In addition, a grid allows emphasis to be placed on content by ensuring the object to be emphasised is placed off the grid. This method of emphasis is extremely useful and also very aesthetically pleasing when used effectively. A grid can also guide a user into the content and guarantee it is clearly legible and accessible by ensuring elements are lined up, flow correctly and found where they are expected to be.

Furthermore, a grid layout can assist in enhancing the brand image or identity and provide credibility both to the content on a website and a business overall. By ensuring a website’s content is lined up on a grid system, not only is it more legible and easier for a user to skim through to find the required information, it also assists in providing visual balance, emphasis where it is needed, a positive effect on legibility, usability, accessibility and an ultimately better user experience.

The overall result is that a website appears more professional. This in turn gives the content more credibility and makes the user happy with the information due to the sense of security gained. Arguably, this is one of the most important reasons for using a grid system as  anyone with the knowledge to build a website can publish content online and users know this. So it is fundamental that a user gets a sense of security about the content, otherwise he or she will simply leave the website and disregard the information therein.

 

Bibliography

Typographic Systems: Design Brief by Kimberly Elam, New York: Papress Enfield: Publishers Group UK 2007, ISBN: 1568986874, 9781568986876

Geometry of Design: Studies in Proportion and Composition by Kimberly Elam, New York: Princeton Architectural Press 2001, ISBN: 1568982496, 9781568982496

Grid Systems: Principles of Organizing Type by Kimberly Elam, New York: Princeton Architectural  London: Hi Marketing 2004, ISBN: 1568984650, 9781568984650

Grids: The Structure of Graphic Design by Jute Andre, Crans-Pres-Celigny: RotoVision 1996, ISBN: 2880462770, 9782880462772

A Practical Guide to Designing for the Web by Mark Boulton, Penarth: Mark Boulton Design 2009, ISBN: 0956174019, 9780956174017

Ordering Disorder: Grid Principles for Web Design by Khoi Vinh,  Berkeley, Calif: New Riders  London: Pearson Education 2010, ISBN: 0321703537, 9780321703538

Permalink | Comment (0)
Webpage Design

17/11/2011 – 6:32 pm

I am trying to replace my <h1> with an image of my logo however i am getting this problem:

 

Code wise, i have given my <h1> a class similar to the slides example.
<h1>Smith’s Family Greengrocer</h1>

and then the css code is:
h1{
width:182px;
height:151px;
background-image:url(../images/smiths-logo.jpg);
background-repeat: no-repeat;
background-position: top left;
}

.move{
position:absolute;
text-indent:-5000px;
}

Does anyone have any idea why the <h1> text is not dissappearing off screen?

Permalink | Comment (0)
Webpage Design

3 Examples of Websites With Bad Typography

07/11/2011 – 9:50 pm

http://www.esther-williams.com/ is a website dedicated to a person. Now whether it really is the Official Site or not is unknown, but it certainly does not look like it! Even though this is a small website, with not much content, there seems to be many different typographic styles fighting between themselves to grab the user’s attention.

The main site title (where a logo should be) is comprised of a heading with font-family ”Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L” ,sans-serif, default colour (black) and font-size 30px. Directly to the right of this, the site description can be found italicised using font-family Georgia, “Bitstream Charter”, serif at 12px font-size and with colour #666666 (light grey). Already on just one line, the website is repeating itself with two different typography styles.

Below this, there seem to be a welcome message and an image. It turns out that the image includes the text and it is simply inserted at the top of the page. This image again has two types of fonts in it, one being Lucida Calligraphy and the other a signature. Again, in the space of about 350 pixels, there are four different typographic styles.

There seems to be two navigational bars, one horizontally just below the logo, and another vertically on the left side of the page.

The horizontal navigation bar uses the font-family “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif, a font-size of 13px and colour #666666 (light grey). This follows the same theme as the site description.

The vertical navigation bar uses a size 12px font and the font-family  Georgia, “Bitstream Charter”, serif just as the main title. The text here is white against a blue background.

In conclusion, logos and typography direct the user in too many different directions and inconsistent type sizes and fonts create no hierarchy. Also, type is incorporated as html, gifs and jpegs and uses different fonts, colours, line-height and inconsistent font-sizes which is not clear and simple to read and does nothing for the personality of the site except label it as amateur.

 

http://wordsarepictures.co.uk/ is a very minimalistic portfolio website belonging to Craig Ward (art director and designer). As is clear from the image above, the contrast between the content and the background is quite low resulting in text that is hard to read. In addition, the text is aligned to the left of the page which is quite annoying to the user seeing as there is so much free screen space in the centre.

The font-family used for the text is Times, font-size 12px and a reduced letter spacing of 0.025em. The colour used is a light grey with hex number #A9A9A9. When the user clicks on a link, it simply widens out and displays more text within the navigation bar. The text displayed is the same colour making it equally as hard to make out against the background, the same size and font and with the same letter spacing.

Clicking on some of the links results in an image or picture being displayed on the whole page. The images are set as a background image with the text in front. However for some images the text cannot be made out at all because of the low contrast.

In conclusion, this website is a very beautiful piece of work, however it is difficult to make out the text and there is too much wasted screen space.

 

http://www.timecube.com/ is a weird website I came upon during research for this homework. I actually have no idea as to what its purpose is and I have not read the content as it is so long.  The text throughout the page is centre aligned and starts off as Times New Roman. The font-size starts off as 24pt and with the dark blue colour. However as the user reads and scrolls down the font-size systematically starts becoming smaller and smaller. In addition, for various paragraphs the font-colour changes to red and then black for others.

In conclusion, I do not know if it was the intention of the website creator to make a completely illegible website where the content cannot be read but that is what has happened!

Permalink | Comment (0)
Webpage Design

3 Examples of Websites With Good Typography

07/11/2011 – 8:09 pm

In my opinion, http://www.gizmag.com/ is an example of a website where good typographic styles have been used. This is a content rich website with articles and photographs about new technologies and products being invented around the globe, so it is important that the content is displayed to the user in a way that is interesting, easy to read and with extreme clarity. It is also important that the correct typographic style is used in order to give personality to the overall website and therefore encourage readers to read the content and come back for more.

The two column layout of the webpage further promotes the clarity of the site with ‘featured articles’ appearing in the main (left-hand) column and links to other articles and advertisements appearing in the smaller right-hand column.

The main text or articles on the webpage are very legible and easy to read. This clarity comes from a combination of: a line-height of 20px, font-size of 14px, font-family as Arial, Helvetica or Sans-Serif and a text colour #444444 (which is a very dark gray) against a white background that provides a high contrast.

The titles to the articles seen on the homepage are also very clear and easy to read. They use the same font family however a larger text size is used at 18px and the colour is #F36031(a shade of orange). On the homepage, where article titles are links to the main article, the user can clearly identify this from hovering over the text. As the mouse hovers over, the text becomes white and the background takes the orange colour. This provides a large visible means of seeing that the title is a link.

Links throughout the content use a similar method to show they are links as the titles however they are the same font-size and font-family as the main content. The only difference is that the links are marked in a blue colour #3366CC rather than the dark grey of the content. Again, when hovering over the links, the background takes the blue colour and the text becomes white. This technique continuity contributes to the website’s overall theme.

 

http://www.speedinprint.com/ is another example of a website using good and effective typography. This website belongs to a professional printing service and therefore uses a colourful and joyful looking theme and colour scheme.

The company logo is made up of 2 colours, a dark purple and a dark pink colour. These two colours have been used throughout as the colour scheme (except for the vertical navigation bar) ensuring the website does not look too busy. For the typography, the font-family Arial, Verdana, Trebuchet MS has been used throughout resulting in a consistent theme and clear and legible text.

In the two navigation bars, the text is coloured white and sized to 20px. The white text provides a high contrast against the purple background for the horizontal navigation bar and the four other colours used in the vertical navigation bar.

In the main content, the titles are composed from size 24px text and colour #EC008C (dark pink to match logo colours). This ensures the titles stand out from the rest of the content text which is 12px in size and #5859B (dark grey).  The titles have a line-height of 3 and the text 1.5, clearly and obviously ensuring the titles stick out over the respective content.

Links throughout the website are displayed in #EC008C (dark pink) colour with underlines as text decoration. When the user hovers over the link the colour changes to #752B92 (dark purple).  However, the testimonials section on the left of the page has the whole testimonial as a link in the pink colour but with no underline. When the user then hovers over that, the colour changes to the dark purple and is underlined.

One other point I would like to make about this website is that it contains a lot of white spacing. This is done intentionally and in my opinion is another colour of the colour scheme. In some ways the website looks like a professional and tidy print job which is a good relation to the company’s purpose (printing).

 

http://www.biblegateway.com/ is a website designed to allow easy searching of Bible passages, in many languages and from many different versions. Evidently, the site does not contain many images and decorations as it would simply distract the user. Few colours are used throughout the site again to reduce distraction meaning that the typography is relied upon to give some sort of personality.

The website is made up of four main features that can be identified as a horizontal logo banner along the top of the page, a vertical navigation panel located on the left,  a Search Box at the top under the logo and then two columns of content below an advertisement banner.

Helvetica, Arial, sans-serif font-family is used throughout the site. The main content has a font-size of 16px making it easy and clear to read. Headings in the content are distinguished simply by making them bold. The colour of the typography in the main content is mainly black and where the text is a blockquote, the author is emphasized in a dark red, the same colour from the logo banner.

For the navigation bar, the font-size is reduced to 10px and some of the headings are also bold. This makes them stand out to the user (for a reason unknown to me). The colour used for the navigation bar follows on with the colours used for all the links, that dark red from the banner.

Results to the search bar are displayed with font-family “Charis SIL,” charis, Verdana, Arial, Helvetica, sans-serif. This is very similar to the font used throughout the rest of the site.

In conclusion a simple website with no images and decorations. Content rich so therefore highly reliant on typography styles to keep the reader interested The fonts and styling used ensures readability for the user.

Permalink | Comment (0)
Webpage Design

3 Examples of Websites With Poor Colour Schemes

01/11/2011 – 12:50 am

http://www.rzent.co.nr/ is a very nice example of a website with a terrible colour scheme. It seems the website designer did not have any idea about colour schemes, he or she simply chose a few basic colours and put them wherever necessary. For a start, I feel the red background is too ‘heavy’ and dark. The yellow typography, even though it is high contrast against the red background, does not seem pleasing to the eye. Furthermore, a class of colours can be identified between the blue text and the red background. Moving down the page, the reddish-purple box doesn’t exactly clash but generally does not look good. Again moving down, more blocks of solid colour and a very annoying animation result in further disturbing the user. In conclusion, this website has too many blocks of solid colour that do not harmoniously correspond with each other resulting in an unprofessional and slightly obnoxious site.

The website for the Spanish Embassy in London can be found at http://spain.embassyhomepage.com/. In my opinion this is another example of a bad colour scheme. The site is using the colours of the Spanish flag (red and yellow) and the colours of the British flag and blending them into one, big mess. I understand the use of the colours and wanting to relate to the flags, however the overuse of the colour red simply feels tiring and makes me (as a user) want to get off the page as soon as possible. The animated Spanish flag in the top left corner of the page is extremely distracting. At least there is good contrast between the text and the background. As a website, it is pretty basic, and you would definitely not expect it from such an official organisation.

http://www.manleymere.co.uk/. This website is another example of a website with a bad colour scheme. The web designer has tried to use the colours from the company logo in the colour scheme (blue and orange) but then also seems to have thrown in blue, green and black for reasons I cannot think of! The black background and black content text make the website look extremely dark.  The grey colour used for the page title does not provide a high contrast against the black background. Furthermore, four different shades of green can be identified as being used in the navigation bar and content background which is three too many. The blue text used for the navigation bar contrasting with the green background does not seem right and a famous rhyme seems to spring to mind “Blue and green should never be seen unless there’s something in between”. The three stripes of colour located on the right hand side of the content are something I have never seen before on a website and hope never to see again as it does not do the page any justice whatsoever!

Permalink | Comment (0)
Webpage Design

3 Examples of Sites With Good Colour Schemes

01/11/2011 – 12:26 am

http://www.eltesorotequila.com/ is the promotional website for El Tesoro tequila. The colour scheme is nice and simple and in my opinion portrays a sense of harmony. The light green gradient background matches the colours of the images of the plant the tequila is manufactured from. It also gives off a sense of freshness and high quality. The navigation bar is coloured black so as to relate to the brand name on the bottles and the white typography corresponds with the brand name located at the top left of the page. The flash scrolling banner also follows a similar colour scheme to the rest of the site with a black background. Furthermore, in each image of the scrolling banner, the master distiller’s (man manufacturing the tequila) shirt changes colour from yellow to blue to a sheepskin jacket. Even this is in harmony with the website and corresponds to the three different tequila products advertised on the site. In conclusion, I like the website and the colours used as it really gives the feel of a Mexican ranch or tequila plantation.

http://www.morrisons.co.uk/ This website recently impressed me with its colour scheme. The blues, greens, reds and yellows pleasantly blend together to make an attractive and pleasing to the eye website. Not only does the background image of an apple orchard portray freshness (and therefore freshness of the Morrisons brand) it also blends seamlessly in with the current special offers campaign which has been launched. The Morrisons logo is made up of green and yellow which can both be found in the background image as trees, leaves, grass and the yellow on the apples. The red shades of the apples also fits into the ‘special offers’ tags and subconsciously gives the impression that Morrisons stores are full of cost effective products. Moreover, most of the typography and headings are green with a yellow background to reflect the brand’s familiar colours. In conclusion I think this is a very clever colour scheme and I would definitely not have a problem spending a while on the site doing my grocery shopping!

 

Another example of a website with a good colour scheme is http://lifelab.com.au/. In my opinion, a triad of three main colours has been used: the kind of dark yellow, pink and a few variations of blue, and these are all very cleverly found in a real life image (the photographer knew what he was doing!). The colours seem to complement each other as well as the building which is being advertised. The typography is in white and provides a high contrast against the colourful backgrounds. This technique is also used for the navigation bar where a semi transparent black background is used and then white typography placed on top. The colours used on the site can actually be found on the building and can be seen as the background photograph scrolls up and then changes to another. I think this website looks quite sophisticated and professional and provides the user with colourful and happy emotions about the building.

Permalink | Comment (0)
Webpage Design

What I Learned This Week:

18/10/2011 – 12:00 pm

- The purpose of markup is to add meaning to content.

- Some of the many elements of (X)HTML.Block-Level elements begin and end with a line break.

- Images are Inline elements.

- Relationships between elements such as Parent, Child and Sibling elements.

- The importance of semantically correct markup:

  • All documents must have a document declaration (doctype)
  • Tags must be in lower case
  • All tags must be closed
  • All attributes must have a quoted value
  • All tags must be correctly nested

- How to make links and that it is best to allow control over navigation to the user by not forcing links to open in a new tab/window.

- The different types of links such as absolute, relative and relative to document root and when to use them.

- The XHTML doctypes.

- The homepage is always called index.html and hyphens or underscores should be used instead of spaces in file and folder names.

- How to use a FTP Client (I used FileZilla).

- Code and website validation using http://validator.w3.org/

Permalink | Comment (0)
Webpage Design

Inspiration for 3 New Websites

11/10/2011 – 8:00 pm

In order to design a website for The Dead Sea Squirrels indie rock band from Sheffield, I looked at many websites for inspiration. A quick Google search for indie rock bands from Sheffield revealed three existing bands. These were Milburn, the Arctic Monkeys and Take To The Seas. From looking into their websites at http://www.milburn-music.com/, http://arcticmonkeys.com/ and http://www.taketotheseas.co.uk/ a few trends became apparent such as links to music and videos as content. This is an important feature to any band as they want their music to be heard and promoted.

http://www.milburn-music.com/ is a one page website with a two column layout. I like this simplicity however it may only be relevant where there is not much content for the website such as this band’s (as they have split up). A short intro about the band is a nice touch explaining to users who Milburn are. Links to music and videos can be found as well as embedded YouTube videos.

The Arctic Monkeys website http://arcticmonkeys.com/ seemed a bit more professional and I particularly liked the fixed logo and navigation bar and how it always stays on top and the page content scrolls below it. Another nice feature of the site is a music video embedded at the top just below the logo and navigation bar, ready for the user to press Play if he or she wants to see it. I am glad it doesn’t automatically play as well! This website goes into quite a depth with many pages, however I like how the mainpage has only useful information on it such as a News and Gigs section. I can imagine this is the most useful information for the website’s users and putting it on the mainpage makes it easy and quick to find.

The Take to the Seas website http://www.taketotheseas.co.uk/ looks great in an arty kind of way however it is very much lacking in content. YouTube links and videos provide users with a way to hear the band’s music and Facebook and MySpace links allows users to follow and support the band.

Many other websites were looked at for inspiration and it became clear that on a band’s website, key features displayed on the homepage are News about the Band, Gigs and Music or Music Videos.

Many of these sites were very artistic and seemed quite ‘alternate’ in order to keep with the theme of the music genre. In general there were very few adverts on the websites as their purpose is to promote the bands and not other products or services.

 

Inspiration for a website for Beech Farm bed and breakfast situated in Cornwall again came from a number of websites belonging to existing B&Bs from around the UK:

From examining the websites themes, it is apparent  the colours blue and green have been used extensively. This can be for various reasons such as these colours portray relaxation and rest, it can also be the green of the countryside and the blue of the seaside. Some of the sites do have an online booking form and others do not. Any of the hotels or B&Bs which have received famous awards or start ratings ensure to clearly put an image of them on their homepage.

I particularly like the way http://www.boscastlehouse.com/ and http://www.camelotcastle.com/ have made their content available to potential oversees guests by adding the possibility to translate text into French, German, Italian and other languages. Furthermore,  I like how http://www.boscastlehouse.com/ has added a link to www.tripadvisor.co.uk in order for potential customers to read reviews from previous customers.

The online booking and availability form is extremely useful for potential guests and should definitely be included on any related future website.

On the website http://www.trevillaguesthouse.co.uk/ there seems to be an emphasis on photographs in order to portray the beauty of the area to potential customers. This website seems to follow the idea that ‘a picture is worth a thousand words’ and so there are no long winded paragraphs of text describing the accommodation which is a good thing.

 

A website for Primary Health, a London based private healthcare company, would get its inspiration from analysing a number of existing private healthcare companies’ website based in London and across the UK. Initially I looked at the large well known  healthcare companies such as BUPA, Saga and AXA PPP at http://www.bupa.co.uk/, http://www.saga.co.uk/ and http://www.axappphealthcare.co.uk/. All of these websites are extremely content rich and it would be easy to get overwhelmed by the large amount of information and numerous tabs on the navigation panels. However, an additional method for the user to find the information he or she is seeking has been added in the form of a Search Box.

http://www.axappphealthcare.co.uk/ appears to have kept its navigation options to a minimum and followed Hick’s Law by reducing the number of options provided to users.

Other sources of inspiration are the following websites:

The colour white or blank spaces are used well throughout all of these websites. This makes the sites look clear and clean not only allowing the user to browse the page easily but also giving a sharp and sterile feel to the page. This in a way could portray the cleanliness of the hospitals and company facilities.

Two of the above sites have catered for people who may have accessibility difficulties. The websites http://www.saga.co.uk/ and http://www.privatehealth.co.uk/ have both added the function of being able to enlarge text on the website. I believe this is an important function and should be incorporated because there could be many people with sight problems who would use a healthcare company’s website.

It is clear that a Site Map is a standard for these websites. This is probably due to the large volume of content and it is simply another way for the user to find what they are looking for efficiently. Images and photographs are found on all of the websites portraying happy people or children smiling. This I believe is intended to portray the friendliness of the healthcare company.

Permalink | Comment (0)

Next Page »

Next Page »