Just another MA Web Design & Content Planning Sites site

TABLE OF CONTENTS

1. Grids – Overview

2. Grids throughout history: from the Middle Ages handmade books until today’s websites

3. Websites Analysis

4. Conclusion

5. References

 

1. Grids – Overview

In design, some of the main principles are balance, proportion and rhythm. According to Joshua David McClurg, balance is “the arrangement of the objects in a given design as it relates to their visual weight within a composition”, proportion “is the relationship in scale between one element and another, or between a whole object and one of its parts” and rhythm “is the repetition or alternation of elements, often with defined intervals between them.” (McClurg, 2005). When these principles are successfully applied, the design is more likely to achieve better results in terms of aesthetics and usability. The most efficient way to have a balanced, proportional and rhythmic design is through the use of grids. In a few words, a grid system is a set of guidelines used to structure content.  The use of grids results in a more attractive and logical layout. Although it’s possible to create an aesthetically pleasing design without using grids, it’s not possible to do it with the same efficiency and precision.

There are many possible ways to create a grid system, and mathematical calculations are used according to the intended design.  A design created with grids has a solid structure and designer’s decisions are easier to be made following this structure. When choosing where to place some text or deciding the size of an advert box, for example, the designer has structured columns and decisions are made easily without hesitation. It helps the designer to create a logical and more pleasing design. The user experience is enhanced as well, as grid based designs are more attractive and also more usable. According to Mark Boulton, a pioneering supporter of grid-based design for the web, “The grid is the most vivid manifestation of the will to order in graphic design. [...] Units are the basic building block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.” (Boulton, 2007).

 

2. Grids throughout history: From the Middle Ages handmade books until today’s websites

The use of grids remounts to the Middle Ages, when in the 13^th century, a French artist and architect called Villard de Honnecourt used a system today known as the “Villard Diagram” which consisted in dividing a straight line into logical parts. Villard is known only through a handmade portfolio he left with approximately 250 drawings dating from the 1220s to 1240s preserved in Paris.

Around 1439, the German Johannes Gutenberg introduced the printing press, commonly considered as the most important event of the modern period. His most important work, the “Gutenberg Bible”, is acclaimed for its high aesthetic and technical quality. In the 20^th century, the page layouts of these early books were widely studied by names such as Jan Tschichold.

In 1923, Jan Tschichold, a German typographer, book designer, teacher and writer, converted to Modernist design principles and, in 1927, published his most noted work: Die neue Typographie. In this book-manifesto, Tschichold went through various aspects of modern design. According to Mark Boulton, “As with all manifestos, it’s a work of vision, new ways we should think; a work of unwavering principles on how we should design printed material.” (Bolton, 2011). In the book, Tschichold writes about logical construction in nature and in human activities: “Construction is the basis of all organic and organized form: the structure and form of a rose are no less logical than the construction of a racing car –both appeal to us for the ultimate economy and precision. Thus the striving for purity of form is the common denominator of all endeavour that has set itself the aim of rebuilding our life and forms of expression. In every individual activity we recognize the single way, the goal: Unity of Life!” (Tschichold, 1927)

In another publication called “The Form of the Book”, Tschichold writes about methods that are known as the Canons of Page Construction: “Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life.” (Tschichold, 1991). Mark Boulton defined the Canons of Page Construction as “geometric systems that create beautiful text for books. Text that belongs. Text that feel connected to the physical form in a binding manner that should make it invisible.” (Boulton, 2011). Typographers and book designers apply these laws to this day.

The Van de Graaf canon, also known as the “secret canon”, is a method used in medieval manuscripts and incunabula (books, pamphlets or broadsides, not handwritten, printed before the year of 1501 in Europe). It consists in dividing a page in pleasing proportions. The geometrical solution of the construction of Van de Graaf’s canon works for any page width: height ratio, enabling the book designer to place the text body in a specific area of the page.

Raúl Rosarivo analyzed books from the Renaissance and conclude in his “Typographical Divine Proportion”, first published in 1947, that Gutenberg and others had applied the Golden Canon of page construction in their works. The “secret number”, as Rosarivo called it, was 2:3. Tschichold also concluded that the Golden Section was used in many book design and manuscripts, mostly in the ones produces between 1550 and 1770.

The Golden Section, or Golden Ratio is a mathematical ratio used in design since Greek and Roman times and can be found in nature, being also called Divine Proportion. The Golden Ration creates compositional proportions aesthetically pleasing. In the 19^th century, a German psychologist called Gustav Fechner found through experiments with rectangular items (books, newspapers, boxes, buildings etc) that the majority of people prefer to look and use rectangular objects with the Divine Proportion (1:1.618). Many grids are built based on the Golden Ratio. The Golden Ratio can be found if you divide a line into two parts so that: the longer part divided by the smaller part is also equal to the whole length divided by the longer part.

Expressed symbolically:

a : b :: a + b : a

Expressed algebraically:

a/b = (a + b)/a, where a > b.

The golden ratio is approximately 1.6180339887

The Golden Section is not restricted only to design. According to Mario Livio, “Some of the greatest mathematical minds of all ages, from Pythagoras and Euclid in ancient Greece, through the medieval Italian mathematician Leonardo of Pisa and the Renaissance astronomer Johannes Kepler, to present-day scientific figures such as Oxford physicist Roger Penrose, have spent endless hours over this simple ratio and its properties. But the fascination with the Golden Ratio is not confined just to mathematicians. Biologists, artists, musicians, historians, architects, psychologists, and even mystics have pondered and debated the basis of its ubiquity and appeal. In fact, it is probably fair to say that the Golden Ratio has inspired thinkers of all disciplines like no other number in the history of mathematics”. (Livio, 2002)

In architecture, the most well know example of the Golden Ratio applied is the Parthenon, in Athens.

In art, the Golden Ratio can be found in Leonardo da Vinci’s “Vitruvian Man” and Rene Magritte’s  “The Blank Check” for example:

In the example below, the Golden Ration is applied to Web Design, with the main content (1) and the navigation and second column (2) built following to the Divine Proportion.

The use of grids in web design was a natural development of its use in print design. According to Mark Boulton, the Canons of Page Construction and other principles to design grid systems are “about comfort. Creating a comfortable, invisible reading experience.” (Boulton, 2011). Grids in printing design are created in a paper, and that is the main difference to grids for the web. There are no edges or a canvas. Boulton states that to design a layout system for a website, some points have to be considered: “Screen resolution ranging from 2560px wide and above, down to 300px wide and less and, quite literally, everything in between; Different devices all with potentially different pixel densities; Context and usage. We have mobile, tablet, laptop, desktop, TV, fridge, car… etc.” (Boulton, 2011).

As there isn’t a page as a reference like in printing design, the grids for the web have to be planned based on elements of existing content. Boulton states: “Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don’t start from an imaginary page. […] Start designing from the content out, rather than the canvas in.” (Boulton, 2011)

The way to apply these concepts to reality is through Responsive Design. “We can now design effective adaptive layouts that respond to their environment. If these layouts are based on a system that defines its ratios from the content, then there is connectedness on two levels: connectedness to the device, and connectedness to the content”. (Boulton, 2011). Responsive Design force designers to re-write rules and canons established over centuries of graphic and book design practice.

 

3. Web sites Analysis

The genre chosen was News websites, with emphasis on the online versions of the most important Newspapers in the world.

3.1 New York Times

http://www.nytimes.com/

 The New York Times website was built based on a 6-column grid system. It could be also divided in a 12-column grid. Only the first column has a different width, and that was calculated based on the Golden Ratio rule. It was a great solution to resize the first column as it needed to be different from the others, and the use of the Divine Proportion made it balanced and harmonious. The columns 2 to 6, from left to right, have approximately 170 pixels and this first column has approximately 104 pixels. To check that the Golden Ration was applied, I simply divided a (170) by b (104) and the result was 1.63. The aim when stipulating a different width to the first column was to make clear that it was the main navigation of the website. The vertical menu was the solution to display more than 50 links. All the main navigation items are displayed along with the sub-navigation items, an efficient idea to avoid the use of scrolling navigation.

The structure is very solid and the design clear, with visual rhythm and organization. The grid system enables the design to be organized even with a great amount of content being displayed. The 5 remaining column have the flexibility needed to place elements across 2 columns if needed. The main content of the website spans the second and third columns of the grid. The same happens with the advert box that spans along the last two columns. That’s the solution found to achieve emphasis, giving more space to the main news and the ad box. This structure gives the New York Times website the look and fell of the print version, but with the flexibility and dynamism.

 

3.2 The Guardian

http://www.guardian.co.uk/

The Guardian website has a beautiful and efficient design. If compared with the other news websites analyzed here, it’s clear how it stands out with the others. The Guardian website was built based on a 6-column grid system. As in the New York Times website, it could be also divided in a 12-column grid; however the smallest element in the website is placed in one of those 6 main columns, so for this analysis it can be seen as a 6-column grid system. The division of the columns and how the elements spam through it has an unorthodox but very effective hierarchy. The 6 columns are divided in 3 main blocks, and the first one is formed by 2 columns, the second by 3 and the third by 1. This sequence of 2-3-1 seems odd but it has a great effect on the website.

The first block is strict, and the content placed in it always spans the first and second columns with no exception. A diverse range of news with pictures or only text is displayed, with even horizontal divisions. The second block is the main one, and the content placed in the top of the page spans all three columns of this block. This content is usually a big picture. Right below this main picture, an interesting method is used, as news with pictures are placed in the first column of the block and the remaining two columns are used together. These two columns are the first spot where adverts are placed. It is a subdivision of the main block, first formed by 6-columns that worked very well. Finally the last block is formed by a single column and adverts, site map, forms and sponsored features are placed in there. In overall is a great use of a 6-column grid system.

 

3.3 Le Monde

http://www.lemonde.fr/

The website of French newspaper Le Monde was built based on a 4-column grid system. As in the previous examples, it could be also divided in an 8-column grid but the elements are placed in one of the 4 main columns in the whole website. With only 4 columns, the content is displayed in large areas, and the rhythm is affected. Aesthetically, the 4-column grid doesn’t help, and the layout is bland and weak.  The typography also brings problems; in the title for the main picture, for example, it is centralized, while the picture is aligned to the left. The gutters don’t follow a standard and different sizes can be found through the website.

The website doesn’t give credibility and has no identity either. Perhaps a 6-column grid layout could improve the overall look and feel of the website, as elements would be placed with more harmony and a clearer division would be achieved. The content is badly organized and the there’s no clear hierarchy. I couldn’t identify positive points in this layout or benefits in using a 4-column grid system, especially when compared with great websites such as The New York Times or The Guardian, analyzed previously.

 

3.4 El País

http://www.elpais.com

The website of the Spanish newspaper El País has a much better layout when compared with Le Monde, and has some points in common with The Guardian website. Having a neat 5-column grid system, the website also enhances the user experience, displaying its content in a very clear and organized way. In common with The Guardian, El País has a very clever division of the grid in three blocks. Instead of using The Guardian method of division (blocks with 2, 3 and 1 column respectively), El País presents a more structured format with 3 blocks formed by 2, 1 and 2 columns respectively. The main content is presented in the top right corner of the first block, and this first block also brings interesting features such as a slide box.

The layout is very balanced and organized, presenting a good rhythm and logical visual hierarchy. As in the other websites, the adverts are placed in the last block, in this case formed by two columns. The logo is placed in the centre of the page, and is harmonious with the rest of the layout. A nice touch was a different colour background for the middle column. While the background of the website is white, this column has a grey background, making the grid even more evident. The overall layout is very clear and organized, making the user experience more logical.

 

3.5 Pravda

http://english.pravda.ru/

The online version of Russian newspaper Pravda is the worse one among the sites analyzed here. The problems with the grid system start with the division of the columns. Apparently there was an intention of creating a 5-column grid layout, but the columns have different widths. In the header, the logo is placed in the left hand side, roughly inside the first columns, however, three news are placed besides and they are not inside any column, already causing a discomfort and making the navigation confusing. In the first column, the “readers top” news were placed also following the grid, as it was done with the logo, and then a series of headlines are placed without any organization out of the structure that supposedly was there.

The grid is only clearly used in three main blocks of news, inserted within the second, thirds and fourth columns. This organization is ruined, though, in the elements right below it. A few more blocks of news are placed once again with no organization and not following the columns. Given the lack of a grid system, the navigation is confused and has no logic or organization. This website is an example of how the lack of a good grid system can ruin a layout.

 

4. Conclusion

Through the analysis of these websites, it’s clear how important is to have a strong and consistent grid system when designing. The use of grids in web design has its basic elements based on grids used in printing design and even before that, in handmade books. It’s interesting to observe how the Canons of Page Construction were deeply analyzed throughout the 20^th century, concluding that since Gutenberg’s Bible, certain rules regarding grids and page layout had been followed with great results, and how, although these can still be applied when designing for the web, a new paradigm was created. Grids in web design are related to a Responsive Design. Structured and organized layouts have to be created considering all possible devices and resolutions, and, above all, the user experience.

 

5. References

Boulton, M. 2005. Five Simple Steps to Design Grid Systems [online]Available at: <http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1> [Accessed 14 January 2012].

Boulton, M. 2007. Grids are Good (Right?) [online]

Available at: <http://www.subtraction.com/pics/0703/grids_are_good.pdf> [Accessed 15 January 2012].

Boulton, M. 2011. A Richer Canvas [online]

Available at: <http://www.markboulton.co.uk/journal/comments/a-richer-canvas> [Accessed 14 January 2012].

David McClurg, J. 2005. The Principles of Design [online]

Available at: <http://www.digital-web.com/articles/principles_of_design/> [Accessed 15 January 2012].

Friedman, V. 2007. Designing with a Grid Based Approach [online]

Available at: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ [Accessed 15 January 2012].

Livio, M. 2002. The Golden Ratio: The Story of Phi, The World’s Most Astonishing Number. New York: Broadway Books.

Tschichold, J. 1928. Die neue Typographie. Berlin: Tschi.

Available at: <http://www.olivertomas.com/books/the-new-typography/> [Accessed 17 January 2012].

Tschichold, J. 1991. The Form of the Book. Vancouver: Hartley & Marks.

(6.2) Compare, contrast and criticise the various formats for eReaders (PDF, ePub and other formats) and comment on the workflow software for their production.

-        Introduction

-        Format descriptions

-        About Digital Rights Management (DRM)

-        Building Files for eReaders in InDesign

-        Selling an e-book through your Website

Introduction

The number of eReaders available on the market is growing quickly, and different file formats are required to support all those different eReading devices and reading methods. Comparing with the battle between Betamax and VHS format in the 70s or more recently Blu-ray vs HD DVD, the confusion involving eBook formats today is way more complex. It’s been called the “Tower of eBabel”, where no one seems to be speaking the same language.  If you release a file only in PDF – one of the most well-know formats – for example, you’re excluding 81% of readers that won’t read this specific format.

Companies and organizations are fighting to establish their own formats. Amazon with their Kindle wants you to read your e-books in their DRM-encrypted version of Mobipocket, while Sony would prefer you to read in ePub, which is compatible with their reader.  The storage size for texts without images depends on the file format, but is always relatively small compared with a richly illustrated text. For publishers, e-books are lucrative as they eliminate distributors and printing.

The eReaders and Tablets have some differences. An eReader basically has the advantage to work quite well in the sun or in very bright environments, is gentler on the eyes and usually smaller and lighter, making the reading experience more comfortable and, of course, eReaders are considerably less expensive. The tablet has a great range of apps, full colour screens and 3G connection, however the “e-ink reader” can have some difficulties when reading in sun light for example, and it is way heavier than an eReader, a very important fact for its use as an e-book. Carl Howe, director of the Anywhere Consumer’s research division, said: “Carrying around a Nook  (eReader) is like carrying a paperback. An iPad is like a hardback. They’re both perfectly viable but they are different experiences.

Format descriptions

According to Wikipedia there at least 28 different formats for eReaders at the moment, and this number keep increasing. Here are the 5 most important ones.

1) ePub (.epub)

ePub (short for Electronic Publication) is arguably the most important format today. Managed by the Independent Digital Publishing Forum (IDPF), is a free and open e-book format. Text created in ePub is a linear flow and reflows according to the screen size of different readers. If your book is available in ePub, it can be read on some of the most popular e-book readers and e-book reading software applications (like Stanza on the iPhone or Adobe Digital Editions). In other words, it’s an open e-book format that allows readers to read books on a variety of devices. ePub can be seen from the monitor of your PC to your mobile phone, tablets or eReaders each with different resolutions and screen sizes, and ePub provides a way of easily viewing images and text on any of those devices.

The .epub format can be read by the Kobo eReader, Apple’s iBooks app running on iOS devices such as the iPhone and iPad, Barnes and Noble Nook, Sony Reader, BeBook, Bookeen Cybook Gen3 (with firmware v. 2 and up),COOL-ER, Adobe Digital Editions, Lexcycle Stanza, BookGlutton, AZARDI, Aldiko and WordPlayer on Android and the Mozilla Firefox add-on EPUBReader. Several other reader software programs are currently implementing support for the format, such as dotReader, FBReader, Mobipocket, uBook and Okular.

So, to summarize, ePub features are the following: it is free and open; re-flowable and re-sizable text; inline raster and vector images; embedded metadata; DRM support ; CSS styling; support for alternative renditions in the same file. One criticism of ePub is that, while good for text-centric books, it may be unsuitable for publications which require precise layout or specialized formatting, such as a comic book.

2) Portable Document Format (.pdf)

Portable Document Format (PDF) is a file format readable by devices such as eReaders, PDAs and computers. It’s ideal if the book contains complex formatting and layout. There’s a plug-in called Pitstop Professional that allows you to edit the PDF: change colours, font-styles, delete or move elements and add or remove pages, for example. The format was created by Adobe aiming to provide a standard format for storing and editing printed publishable documents.  PDF is a very popular format on the World Wide Web as it can be viewed and printed by users on many computer platforms.

PDF files are supported on the following e-book readers: Mobipocket, iRex iLiad, iRex DR1000, Sony Reader, Bookeen Cybook, Foxit eSlick, Amazon Kindle (1, 2, International & DX), Barnes & Noble Nook, the iPad, PocketBook Reader, Bebook Neo and the Kobo eReader. Also, pdf files can be read on the iPod Touch using the free Stanza app.

3) Plain text files (.txt)

Plain text is the most widely supported file format, working on most of the readers and devices. It has limitations regarding formatting (no bolding or italics for example), but will work in any device. It doesn’t include images.

4) eReader (.pdb)

Formerly Palm Digital Media/Peanut Press

PDB or Palm Doc can be read in Ereader. It’s a  freeware program for viewing Palm Digital Media electronic books.  There are versions available for IPhone, PalmOS, WebOS, Android, Symbian, Blackberry, Windows Mobile Pocket PC/Smartphone, desktop Windows and Macintosh. The reader shows one page at a time and supports embedded hyperlinks and images.

A wide selection of eReaders-formatted e-books are available in the company’s website, which can be purchased and downloaded, and they also offer a  handful of public domain titles available for free. The program has features such as bookmarks and footnotes. The footnotes can be written in any part of the text and then exported as a Memo document.  Barnes & Noble uses the eReader format as their method to deliver e-books for their eReader Nook.

5) Mobipocket (.prc)

Mobipocket is the format used by the Amazon Kindle and is supported on Windows PCs and on eReading apps used by many handheld devices. Amazon has been criticised by the industry for insisting publishers must supply DRM-protected books for Kindle. The Kindle’s AZW format is basically just the Mobipocket format with a slightly different serial number scheme.

The Mobipocket e-book format is based on the open e-book standard using XHTML and can include JavaScript and frames. The Mobipocket Reader has a home page library. Readers can add blank pages in any part of a book and add free-hand drawings. Annotations — highlights, bookmarks, corrections, notes, and drawings — can be applied, organized, and recalled from a single location. Images are converted to GIF format and have a maximum size of 64K,  sufficient for mobile phones with small screens, but rather restrictive for newer gadgets. Mobipocket Reader has also a built-in dictionary.

About Digital Rights Management (DRM)

E-readers normally use DMR restrictions to try to limit copying, printing and sharing of e-books.

An interesting story involving Amazon’s DMR occurred in 2009. Through the system, Amazon remotely deleted purchased copies of George Orwell’s “1984” and “Animal Farm” from customers who had it in their Kindles after providing a refund for the purchased products.  An Amazon spokesman, Drew Herdener, said in an e-mail message that the books were added to the Kindle store by a company that did not have rights to them, using a self-service function. “When we were notified of this by the rights holder, we removed the illegal copies from our systems and from customers’ devices, and refunded customers,” he said. That case shows the power Amazon has to remotely censor what people read through its software. Jeff Bezos, CEO of Free Software Foundation called upon Amazon to free its e-book reader and drop DRM.

In Sony Reader DRM rules allow any purchased e-book to be read on up to six devices. The owner can’t share a purchased e-book but can register five eReaders to a single account and make the books available to those devices.

Building Files for eReaders in InDesign

Text in a well built e-book is fluid; it is a linear flow and reflows according to the screen size of different readers. Reflow works very well but is not compatible with complex layouts.  According to stonehillgraphics.com, “True drop caps, carefully controlled text sizes, large spaces at the top of chapter pages, etc., are either difficult to create or are not possible. Punctuation used in print books, such as curly quotes, em or en dashes, and special characters, will often fall out of eBook files and be replaced by nonsense code.”

Adobe InDesign is the best software to create an ePub file. E-books in this format can be read on the Adobe Digital Editions, iPad, Lexcycle, Barnes & Noble Nook for PC, Sony Reader, Stanza, and many other eReaders. If you’d like have a book formatted for a specific eReader, it is simple to convert ePub to another format, like Amazon’s Mobipocket for example.

When generating an ePub file, Adobe InDesign automatically reduces images to a size that can be viewed on all eReaders. The Kindle displays larger images than most of eRedaers, but even those are still smaller compared to a printed book. If in colours, images are converted to greyscale, but the best procedure is to convert them before insert into the InDesign project. About fonts, web-safe fonts are the best options, although in case the reader doesn’t have the font, it will be default to one closest to the original.

STEP BY STEP – EPUB in Adobe InDesign

a)     For this example I will create a 16 pages book for demonstration.

In InDesign: File > New > Document

Now you can choose Number of Pages, Page Size, Orientation and Margins. Uncheck the option Facing Pages.

After create your document paste the book cover followed by publisher’s information and index. Then select the whole content of the book (in Microsoft Word or some text editor) and paste it in InDesign. It’s important that the content is pasted as one long story, with no breaks. The chapter division will be done later on.

b)     To confirm that you have an unique piece rather than separate parts, go to View > Show Text Threads and the connectors will show you

that you have a long story.

c)     When placing images, it’s important to make sure that they are part of the text or into the long story, as an ePub file is read from left to right and top to bottom. If the images are inserted as separated elements, they will appear together before the text starts. The following examples taken from an Adobe’s tutorial video show the behaviour of an ePub file. In the first example, 5 separated objects were placed in a particular order and were read in an eReader (in this case, Adobe Digital Editions, a free software to read e-books in a computer) from left to right, top to bottom.

In the second example, the elements 1 and 2 were aligned, so an eReader will read it left to right, (block with elements 1 and 2), then top to bottom, as the eReader image shows. That helps to understand the linear flow generated in ePub.

d)     To place images, the first step is to convert them to greyscale in Photoshop, as most eReaders haven’t got colour displays. After dragging the image into your document in InDesign, you’ll have to make it part of your text, so cut it (Edit > Cut), move the cursor to the exact place where you want it (in this example, right before the text “illustration here”) and paste (Edit > Paste) then press return key. Doing this, the image will become an inline graphic, meaning it is part of the flow of content.

e)     To place this graphic in its on paragraph, having total control on how it will be displayed in an eReader, you first quadruple click besides the image to select the paragraph, then set the leading value to zero. Then go to Window > Text Wrap and click in the second option of text wrap so you can drag your image and place it where you want it to appear in the eReader.

f)      To separate the chapters without split the document in separate documents, we will use the InDesign Table of Contents feature. First you need to decide where you want your chapters to start and apply Paragraph Styles in the beginning of each chapter. First, select the text where the chapters begins (Chapter 1, Chapter 2 etc), the go to Type > Paragraph Styles. Click in Create New Style. You’re going to see a Style Name called Paragraph Style 1. Double-click and an option box will appear. Name it and choose options like Alignment, Character Formats etc. I named mine Demo e-book Style.

g)     Next Step is going to Layout > Table of Contents Styles. Click New in the box that will appear. Name it, let’s call this one epub. Then in Other Styles you select the Paragraph Style that you just created. Click add and your style will be moved to Include paragraph Styles. Click OK.

h)     Now, to save your final ePub file, go to File > Export for Digital Editions, name it and click save. So, we need to tell InDesign to use our Table of Contents. Go to the Contents Panel, turn on Include InDesign TOC entries and select your style. Turn on the other option as well (Suppress Automatic Entries for Documents) and click Export. Your ePub file now have the images placed where you wanted, is divided by chapters and can be read in most eReaders. To make it available for Kindle, for example, just use a converter and convert it to .mobi. Mobipocket has developed an .epub to .mobi converter called KindleGen. In this example, the ePub created is being read in Adobe Digital Editions.

Selling an e-book through your Website

In the Internet, distribution of any type of media is easy. Music, distributed mainly in mp3 format, started as a free peer-to-peer file sharing that led to lawsuits, and ended up with the creation of a successful business, the Itunes music store. Books have begun to enter the online market place, aided by the increasing popularity of Amazon’s Kindle, Apple’s iPad, Barnes and Noble’s Nook and other e-Readers, therefore starting an on-line e-book businesses or implementing a method to sell e-books in your website may have a great chance of success.

It’s possible to create your own e-book as it was described above or sell other e-books. To do so, you must acquire licenses from various publishers to sell the eletronic version of their products. You’ll need a web host with enough storage space to host all the books you will sell on the site. Then integrate a payment provider such as PayPal or Google Checkout.

REFERENCES

The New York Times, Amazon Erases Orwell Books From Kindle, available online, accessed on 21th February 2011.

Smashwords, Smashwords eBooks, available online, accessed on 21th February 2011.

Stone Hill Graphics, eReader Formats, available online, accessed on 21th February 2011.

Wikipedia, ePub, available online, accessed on 21th February 2011.

Wikipedia, eBook Collections Usage Guide , available online, accessed on 21th February 2011.

Images for the web. Image selection is an important way of communicating the ‘message’ of what a website is about. The job of sourcing images is done by photo journalists, picture editors and advertising agencies. Journalists and advertisers are close to web publishers in their need to ‘speak volumes’ with images.

‘How can the image selection principles used for advertising  images be adapted and used by web publishers?’

Advertising => copy + images to sell a product

Website => text + images to form  the content

To communicate the message in advertising, not just words are needed, but visuals too. The visuals and the words work together to present the creative concept. To succeed, an ad needs to be visually remarkable. A few questions need to be asked: Doit grab your attention? How do the visuals build brand personality? Is it interesting? Do you remember it?

The power to get attention in most advertising lies with the visual. There are some points related to the visuals in advertising that shows its importance. For example, print designers have found that a picture in a print ad captures more than twice as many readers as a headline does, the bigger the illustration, the more the advertisement grabs consumers’ attention. Some research shows that top-scoring ads devote an average of 82%of their space to the visual. Pictures tend to pull more readers into the body copy and initial attention is more likely to turn to interest with a strong visual. People not only notice ad visuals, they remember ads with pictures more than those composed mostly of type. Research indicates that 98% of the top-scoring advertisements contain a photograph or illustration, proving that human beings are highly visual creatures, according to Cahners Advertising Perfromance Studies.

A big idea is intriguing and captures attention. Big ideas can be puzzling, shocking or funny. Creative advertisements work better, are more memorable, and make their point more effectively in the marketplace. One of the most difficult problems faced by art directors and those who work on the creative side of advertising is to transform a creative concept into words and pictures. During the brainstorming process copywriters and art directors work in the visualization, imagining what the finished ad might look like. The creative team forms mental pictures of how the basic appeal can be translated into a selling message. The art director translates the advertising big idea into a visual story. And it’s commonsense: When in doubt, leave a great idea alone.

“What I try to do is express things as simply as possible, and hope that because it’s expressed so simply, the core idea will come across”

Neil French, former Creative Director at WWP Group

“The strongest ideas are the simplest”

Jim Aitchison (The Cutting Edge Advertising)

Advertising can only be successful if it has an impact on the audience it is addressing. The only way to achieve this is if the idea is so compelling that it creates a desire among those exposed to it to want more information, to want to know more.  When a good idea is used, people remember it after seeing it three times rather than 30 times. The design needs to relay as much information as possible to the audience in the shortest time possible.  In a website, the content and the images used to illustrate it have the same role, aiming to create the same kind of desire among those exposed to it, expecting them to want more information. It can be seen as even more challenging with websites, because if the exposure to adverts is massive in daily life, whereas a potential user will take maybe only one quick look in a website and decide between staying and returning other or leaving the page to never come back. Like a remarkable ad, the look and images of a website need to be memorable, not only commanding attention but also holding it.

According to Business Dictionary website, Image in advertising attempt to create a favorable mental picture of a product or firm in mind of consumers. This image aims to associate the advertised product and/or firm with certain lifestyles or values. Its three basic functions are to (1) increase consumer awareness, (2) convert the awareness into familiarity, and (3) use the familiarity to influence consumer buying behavior.

Art directing and photography are twin disciplines. Having a great photo in the wrong layout makes for bad advertising, therefore image selecting and design need to be seen as a whole. Although different terminologies are often used, some of the principles used in advertising for image selection and design are described below with explanations of how these concepts could be applied in web publishing.

-    Unity: Visual confusion must be avoided. The choice of the image and the layout must be related to one another to give one overall, unified effect. If the advertising does not have unity it falls apart. The same happens with a website. All the elements such as text, images, navigation, header and footer must be related to one another and the image choice needs to fit the concept of the website and the layout itself.

-       Harmony: Closely related to unity is the idea that the image and all elements from layout must be compatible. Harmony is achieved by choosing elements that go together. (condom / fellswoop)

-       Sequence: The advertisement should be arranged in an orderly manner so it can be read from left to right and top to bottom. The same principle is easily applied for a webpage layout, where a directional pattern should be evident so the reader knows in what sequence to read.

-       Emphasis: Involves accenting or focusing on an element (or group of elements) to make it stand out.  When selecting the image, choose what element is the most important one and make it stand out, or, looking at the ad as a whole, choose the most important element and give it emphasis. In a website the same rule can be applied.

-       Balance: Control the size, tone, weight and position of the elements in the advertisement. Contrast can make a website layout more interesting.

-       Proportion: We sense discordance when things aren’t in proportion. If a layout violates the rules of proportion, the consumer may reject the whole advertisement.  The Coca-Cola Light advert is a good example of proportion, and also shows another aspect of image selection: use people, not things. When its possible to use images with people, it could be the best option, as people like to see other people.

The effective use of visuals in advertising can be related to a number of the effects:

-        Grab attention: Visuals are generally better at getting and keeping attention than words.

-        Stick in memory: Visuals persist in the mind because people generally remember messages as visual fragments, or key images that are filled easily in their minds.

-        Cement belief: Seeing is believe. Visuals that demonstrate add credibility to a message. In other words, clarify claims made by the copy.

-        Tell interesting stories: Visual storytelling is engaging and maintains interest.

-        Communicate quickly: Pictures tell stories faster than words. A picture communicates instantly, while consumers have to decipher verbal/written communication word by word, sentence by sentence, line by line.

-        Anchor associations: To distinguish undifferentiated products with low inherent interest, advertisers often link the product with visuals associations representing lifestyles and types of users. (Hemingway and Bogart for Thomasville Furniture)

Some other goals in mind when selecting the image for an ad

-        Identify the subject of the ad

-        Help convince readers of the truth of copy claims

-        Arouse the reader’s interest in the headline

-        Emphasize the Product unique features

-        Create a favorable impression of the product or advertiser

-        Provide continuity for the campaign by using a unified visual technique in each ad

Selecting the focus for advertising visuals is also very important in the process of selecting images for ads. It often determines how well the big idea is executed. The authors of Creative Execution: Art and Copy came up with this list:

-        The package containing the product. Especially important for packaged goods, it helps the consumer identify the product on the grocery shelf.

-        The product alone. This usually does not work well for non packaged goods

-        The product in use. Automobile ads typically show a car in use while talking about its ride, luxury, handling or economy. Cosmetic ads usually show the product in use with a close-up photo of a beautiful woman or a virile man.

-        How to use the product. Recipe ads featuring a new way to use food products have historically pulled very high readership scores.

-        Product features. Computer software ads frequently show the monitor screen so the prospect can see how the software features are displayed.

-        Comparison of products. The advertiser shows its product next to a competitor’s and compare important features

-        User benefits. It’s often difficult to illustrate intangible user benefits. However, marketers know that the best way to get consumers’ attention is to show how the product will benefit them, so it’s worth the extra creative effort.

-        Humor. If used well, a humorous visual can make an entertaining and lasting impression. But can also destroy credibility if used inappropriately.

-        Testimonial. Before and after endorsements are very effective for weight-loss product, skin care lotions, and bodybuilding courses.

-        Negative appeal. Sometimes visuals point out what happens if you don’t use the product. If done well, that can attract interest.

Colour is an important visual element used to attract attention, provide realism, establish moods and build brand identity. Ads with colour get more attention than ads without colour.

-       Black & White can lend dignity and sophistication to the visual. Communicates high drama and can express power.

-       Spot colour highlights important elements.

-       Warm colours such as red, yellow and orange convey happiness. They have the most attention power.

-       Pastels are soft and often bring a friendly tone to an ad.

-       Earth tones are natural and no-nonsense.

-       Cool colours, such as blue and green are calm, serene and reflective.

Photography for an ad can be very expensive depending on the photographer’s reputation, and often clip-art or click-art images are used, being taken from collections of copyright-free that anyone who buys the clip-art service can use. Royalty-Free Stock images has some advantages: very reasonable costs, extensive choice of images, no royalty payments and the time pressure, meaning that its easier to meet tight deadlines and fast turnarounds. The disadvantage is that you have to match your idea to available images, and many of the images are rather average. In some cases it’s possible to get great illustration for a cheaper price. If an illustration is needed an artist is hired.  The same procedures can be used to select images for a website.

The concepts and principles used for image selection and ad layout in advertising, can be applied directly into web publishing. Principles can be used in the images that are chosen to illustrate the content or in the layout itself as it was described in this post. The colour principles mentioned above are also interesting and easy to apply. Image selection is very important and, in a way, determines whether a website will be successful or not, as the exposure of your homepage to a potential user can last only a few seconds until this user makes a decision of staying and returning or leaving.

References

Altstiel, T. & Grow, J., 2010. Advertising creative: strategy, copy + design. 2nd ed. London: SAGE.

Arens, William F. & Weigold, Michael F. & Arens, C., 2011. Conteporary advertising and integrated marketing communications. 13rd ed. New York: McGraw-Hill Higher Education.

Atchison, J., 2004. Cutting Edge Advertising. 2nd ed. Singapore: Prentice Hall.

Drewniany, Bonnie L., 2008. Creative strategy in advertising. 9th ed. London: Thomson Wadsworth.

Lane, W. Ronald, 2011. Kleppner’s advertising procedure. 18th ed. London: Pearson.

Powell, H., 2009. The advertising handbook. 2nd ed. London: Routledge.

Wells, W. & Burnett, J. & Moriaty S., 1998. Advertising: principles & practices. 4th ed. London: Prentice-Hall International.

Website Planning

Week 1: SEO, SEM and Site Promotion

Coursework

Select 3 websites and analyze their SEO/SEM

1 Northern Guitars

http://www.northernguitars.co.uk/

Second hand guitars, amps and pedals shop in Leeds.

Can you find their key phrases?

Although most search engines no longer give any weight to the keywords meta tag, it’s possible to analyze them aiming to have an overview of the designer’s key phrases choices.

In the description meta tag it was used: “Northern Guitars – the finest source of secondhand and preloved guitars, bass guitars, amplifiers and effects pedals in the north of England, Secondhand Guitars”

In the keywords meta tag the designer used the following words: “Northern Guitars, Secondhand Guitars Leeds, Secondhand Bass, Guitars Leeds, Second Hand Amplifiers Leeds, Second Hand Effects Pedals Leeds, Second Hand Guitars, Second Hand Bass Guitars, Second Hand Amplifiers, Second Hand Effects Pedals”

SEO Moz Term Extractor shows us what words the search engines may find particularly relevant on the webpage. It’s important that any search term or phrase the designer is attempting to rank for appear in the top 5. Here are the results:

1 word

1. leeds
2. guitars
3. amps
4. home
5. second

2 words

1. second hand
2. quality second
3. hand guitars
4. guitars leeds
5. fx pedals

3 words

1. second hand guitars
2. quality second hand
3. valve amp specialist
4. style working mans
5. premier blues guitarists

What is their Google search rank for those phrases (how high in the listings)?

Using the key phrase Second Hand Guitars in the Keyword Tool (Google AdWords), the results aren’t very good for this website as Global Monthly Searches are 9.900 and competition is high. However, when searching for the word guitar alone, Global Monthly Searches are high (3.350.000) and competition is medium, which could end up attracting users to their page.

What is their page rank?

Searching for Second Hand Guitars

-        Google #5

-        Bing  #18

-        Yahoo Search #42

Can you work out what their traffic is?

According to Alexa.com, the traffic rank is 5.330.831. Alexa had No other data available for northernguitars.co.uk.

Suggest any improvements that you think could be made

a)     Title

As search engines read content from left to right, the title should have started with the specific content (second hand guitars) instead of starting with a generic title (Guitars Leeds).

b)     <h1>

There’s no h1 tag in the HTML document. The designer should have used the h1 tag for writing the relevant key words once again.

c)     Body

In the body, the term “second hand” was only written once. It would be ideal to write as many times as possible, particularly in the first few paragraphs on homepage.

d)     Folders and Files

The folders and image files weren’t named using the key words. Ideally, the main keywords should be used to name all folders and files

e)     Alternate keywords / Links

For this particular website, the designer used Second hand Guitars as his main keywords. Analyzing the results in Google AdWords, it’s possible to read that if instead of guitars, the designer had used guitar, the term Second Hand Guitar has more Global Monthly Searches and lower competition. Another possible would be the term Used Guitars, which has high Global Monthly Searches and medium competition.

The website has 17 links to external pages, and checking some of these websites, I’ve seen that they don’t have Northern Guitars in their link list. It would be ideal if they exchanged links, so Northern Guitars would have more pages linking to their website.

______________________________________________________________________

2 Caraffini

http://www.caraffini.co.uk/

Italian restaurant in London

Can you find their key phrases?

As in the first chosen website, here are the meta tags, aiming to have an overview of the designer’s key phrases choices.

In the description meta tag it was used: “Relaxed, welcoming and elegant, Caraffini, a stones throw away from Sloane Square in fashionable Chelsea, serving fine traditional Italian food.”

In the keywords meta tag the designer used the following words: “Traditional Italian food London, elegant Italian restaurant Chelsea.”

Results using SEO Moz Term Extractor:

1 word

1. sloane
2. guitars
3. traditional
4. square
5. food

2 words

1. traditional italian
2. sloane square
3. italian food
4. restaurant sloane
5. italian sw1w

3 words

1. traditional italian cuisine
2. restaurant sloane square
3. italian restaurant sloane
4. italian food london
5. italian cuisine chelsea

What is their Google search rank for those phrases (how high in the listings)?

The key phrase traditional italian cuisine was inserted in the Keyword Tool (Google AdWords). A quick look at the results tells that for this website the Global Monthly Searches are really low (210) and the competition is also low. Searching for italian food london, the Global Monthly Searches are better (1000) and the competition is medium.

What is their page rank?

Searching for italian restaurants london, term which Google AdWords shows as being the most popular for this specific business:

-        Google #21

-        Bing:  not on the list after 400 results

-        Yahoo Search not on the list after 500 results

Searching for traditional italian cuisine, term chosen by the designer as being the most relevant for his website

-        Google #12

-        Bing  #99

-        Yahoo Search not on the list after 200 results

Can you work out what their traffic is?

According to Alexa.com, the traffic rank is 13,346,058. Alexa had No other data available for caraffini.co.uk.

Suggest any improvements that you think could be made

a)     Title

The title should have started with a general information (Italian food London) instead of starting with the restaurant name (Caraffini).

b)     <h1>

In the <h1> tag the designer inserted the following content: <h1>Relaxed, welcoming and elegant</h1>. As the spiders read the h1 content looking for some relevant key words, the content should have been changed for something that would have included relevant keywords like Italian restaurant in London, for example.

c) Body

In the body, the term “Italian restaurant in London” or even “Italian restaurant” wasn’t used at all. It would be ideal to write these terms as many times as possible, particularly in the first few paragraphs on homepage.

d)     Folders and files

The folders and image files weren’t named using the keywords. Ideally, the main keywords should be used to name all folders and files

e)     Alternate keywords / links

For this particular website, the designer used traditional italian cuisine as his main keywords. Analyzing the results in Google AdWords, a more general term such as “Italian restaurant London” would have been more effective. Exchanging links with other popular restaurants would also be a good idea.

______________________________________________________________________

3 Sutton Tennis Academy

http://www.suttontennisacademy.com/

Tennis academy in London

Can you find their key phrases?

As in the first two chosen websites, here are the meta tags, aiming to have an overview of the designer’s key phrases choices.

In the description meta tag it was used: “Sutton Tennis Academy has excellent tennis coaching programmes and facilities to enable Tennis players of all ages and abilities to fulfill their potential.

In the keywords meta tag the designer used the following words: UK Tennis Academy, Tennis in Sutton, Tennis in Surrey, Tennis Coaching, Tennis Lessons, Tennis Courses, Holiday Camps, Tennis School, Tennis Membership, Tennis Club, Tennis Centre, Tennis Squads, Tennis & Education, Vacation Camp, Tennis Training, Junior Tennis, Mini Tennis, Tennis Courts, Indoor Tennis, Tournaments, Competitions.

Results using SEO Moz Term Extractor:

1 word

1. sutton
2. tennis
3. academy
4. london
5. winner

2 words

1. sutton tennis
2. tennis academy
3. london uk
4. tennis aademy
5. come dancing

3 words

1. sutton tennis academy
2. sutton martial arts
3. strictly come dancing
4. sutton tennis school

5.   sports psychology support

What is their Google search rank for those phrases (how high in the listings)?

The key phrase sutton tennis academy was inserted in the Keyword Tool (Google AdWords). The result tells that for this website the Global Monthly Searches are low (1000) and the competition is also low. Searching for tennis academy, the Global Monthly Searches are considerably higher (74000) and the competition is very low. And finally using the term tennis lessons London, the Global Monthly Searches are slightly higher (1300) and the competition is medium.

What is their page rank?

Searching for tennis lessons London:

-      Google #11

-        Bing #48

-        Yahoo Search #63

Can you work out what their traffic is?

According to Alexa.com, the traffic rank is 7,038,366. Alexa had No other data available for suttontennisacademy.com.

Suggest any improvements that you think could be made

a)     Title

The title should have started with a general information (Tennis Lessons in London) instead of having just the academy name (Sutton Tennis Academy – London UK).

b)     <h1>

There’s no h1 tag in the HTML document. The designer should have used the h1 tag for writing the relevant keywords once again.

c)     body

In the body, the term “tennis lessons” was only written once. It would be ideal to write as many times as possible, particularly in the first few paragraphs on homepage.

d)     Folders and Files

The folders and image files weren’t named using the keywords. Ideally, the main keywords should be used to name all folders and files

e)     Alternate keywords

For this particular website, the designer used sutton tennis academy as his main keywords. The chosen term is too specific, and looking for these services, the user would use more general terms like tennis lessons london, for example.

Overview

I’ve started this task using some key words related to some of the websites given in order to know their position in Google. When searching for “biscuit recipes”, I’ve noticed that the position of “biscuit-recipe.co.uk” was very high. If you search for “biscuit recipes”, the website is the first result in Google, Bing, Yahoo! Search and Ask.com. However, although having a high SEO score, the number of visits per day is very low. As reported by Statbrain, the website has 216 visits per day, and according to Cubestat, there are 497 daily page views. Even with this variation between the sources, the number of visitors is very low considering the SEO score.

Domain Tools reports that the website’s SEO score is 85%, and Website Grader gives “biscuit-recipe.co.uk” a score of 83% in terms of marketing effectiveness. According to Website Grader, over 50 different variables are considered, such as engine data, website structure or site performance. ISpionage shows that based on monthly nationwide searches, the average search volume for “recipe” is 37.200.000, and for “biscuit” is 1.830.000. Based on these numbers alone, it’s possible to conclude that “biscuit-recipe.co.uk” has a very strong domain and a high position in all the important searching engines, the subject of the website is relevant and people are looking for that specific content on the web, however the traffic of the website is still very low.

Redesign

One first solution that could have immediate effect is the website’s presentation. The layout of “biscuit-recipe.co.uk” is very poor, unattractive and confused. Considering the numbers above, it’s likely that in a number of occasions some potential user has searched for “biscuit recipes” on Google, clicked in the first result, what happens quite often, and by the looking and confusing navigability of the “biscuit-recipe.co.uk”, just returned to the search and tried another one.

For the redesign, I tried to build a vintage style that would relate to old recipes books and, on top of that, I inserted some contemporary elements like the use of javascript or drop shadows for example. The list of biscuits, very confuse and out of place in the original was substituted by a drop down menu built using jQuery. The navigation is now simpler and more organized. Some items were eliminated such as A-Z Index which was a link that redirected the user to the home. The blog and forum weren’t active for a long time, so I felt they could be deleted. In case someone would be able to keep that blog alive with weekly or even monthly posts, the blog could return to the menu.

The ads were spread through the page in the original layout, and I thought a good solution would be a column on the right just for the ads (Google Ads and Amazon). CubeStat shows that the daily ads revenue in around $1.49. With a significant increase in the number of visitors, the profit could be a lot higher. One of the solutions to attract visitors besides the presentation would be a link exchange strategy, trying to insert some popular websites in the list available on the “cooking links” section and have “biscuit-recipes.co.uk” on some lists through the web. Statbrain shows that there are only 8 Google links for the website.

It’s important not just to attract visitors, but also to keep them coming back frequently, so some ideas could be implemented like “the biscuit of the week” when a picture of a biscuit made using one of the website’s recipes would be send by the user and published. Also, new recipes would be added every 2 weeks or so, and the new recipes would go straight to the slide container, changing the look of the front page frequently.  There is a link showing how the page would look like and a link for the JavaScript functions on my Coursework Website.

Statistics

1)    Statbrain

216 visits per day

8 Google Links

2)    Alexa

Based on internet averages, biscuit-recipes.co.uk is visited more frequently by females who are in the age range 25-34, are college educated and browse this site from home

- 4 sites linking in

-       Ranking #1,940,599

-       100.00% of the visitors coming from Google

3)    Domain Tools

Title Relevancy: 100%

Meta Description: Fantastic free biscuit recipes from around the world

Relevancy: 37% relevant.

Meta Keywords: cooking, recipes, food, biscuits, cookies, kids, children

Relevancy: 42% relevant

SEO Score: 85%

Terms: 230 (Unique: 145, Linked: 38)

Images: 15 (Alt tags missing: 10)

Wikipedia: 3 pages

Alexa Trend/Rank: #2,013,230: for the last three months.

Compete Rank: #5,096,656 with 28 U.S. visitors per month

4)    Website Grader

A website grade of 83/100 for www.biscuit-recipes.co.uk means that of the millions of websites that have previously been evaluated, our algorithm has calculated that this site scores higher than 83% of them in terms of its marketing effectiveness.

5)    Cubestat

Website Worth: $1,088.43

Daily Pageviews: 497

Daily Ads Revenue: $1.49

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

This tutorial is called “Getting started with jquery” and it’s basically a step-by-step guide showing how to use jQuery. There is also a very interesting topic explaining how to write a small Ajax application that allows the user to rate something, just like it is done on youtube.

http://www.programacion.com/files/article/20100505100549_jquery-tutorial-beginners.pdf

That’s a 5 page article with some good practical tips about jQuery. It covers topics like selecting elements, showing and hiding elements and manipulating CSS Styles with jQuery.

 http://www.htmldog.com/guides/cssadvanced//

This guide from htmldog.com is an advanced CSS tutorial that covers topics like positioning, for example, giving samples of the codes and clear explanations.

 http://reference.sitepoint.com/css

Here is a list from sitepoint.com with links about CSS covering properties, selectors, at-rules and concepts.

1 Pixies

http://www.pixiesmusic.com/

In this website it’s possible to find a good combination between serif and sans-serif typefaces. The content below the three images starts with serif, and the choice for the font family was Georgia, with options for replacement being Times New Roman and Times. Right below this first paragraph, there is a link where a sans-serif font was used, with a single option of Helvetica. In this case there is a good harmony created by mixing two font types together.

Right at the top, the menu comes in upper-case and the title is huge, with only six letters covering the whole width of the wrapper. The font used was Akzidenz-Grotesk BQ, known as the ancestor of Helvetica (in German Akzidenz means trade type and Grotesk means sans serif). This font was designed for Günter Gerhard Lange in 1896. The title brings also a good idea on how to use shadow in a black background. The layout is also very creative and organized.

2 New York Times

http://www.nytimes.com/

I’ve picked this website mainly because of the font used for the title. This font is a strong aspect of The New York Times layout, and even reading something else written with this font, it’s easy to relate to the newspaper straight away. The closest font I could find was Engravers Old English.

For the body, it was used Georgia, followed by Times New Roman, Times, serif as second options and for the navigation, Arial, Helvetica, sans-serif. The website brings a lot of information being updated constantly, however, all this content is presented with a clean layout, making the navigation and understanding of the structure very simple.

3 Mulletized

http://www.mulletized.com/

This is a portfolio website where the designer does an interesting use of fonts and line spaces to present the content right at the top of the page. The title is displayed on the right side, and the font used was probably Sloop, created in 1994 and based on the designs of contemporary Newport calligrapher Raphael Boguslav.

On the left side, he displayed the menu and all words are in upper-case. Not just the typography is great in this website, but also the colours and the design itself, making it a great example of good layout.

1 Pet Planet

http://www.petplanet.co.uk/

The typography and layout of this website are very confuse. There is no organization for the content and lots of different fonts are used together, with no criteria. The main problem in my opinion is the small space between lines, mainly on the left menu, where an enormous list with nearly 100 item was displayed in a very small column.

The adverts along the website are also displayed with no organization and each advert brings a different font type. There’s no coherence in the font types chosen, and the layout has no plan, with just a lot of information displayed randomly.

2 Jhansi  Animal House

http://www.jhansi4animalhouse.co.uk/

Through the previous website, I’ve found this one, which is also a horrible pet-related website. The main problem with it, in my opinion, is the text aligned in the centre. As it’s been said last week, it doesn’t look good and also makes the reading confusing.

In the body it was used Verdana, and there’s no Serif typeface in the page. The use of Verdana for the main content is not ideal and a Serif font in this case would be more appropriate. The whole layout makes no sense, and for the title in the header, for example, it was used a variation of Comic Sans with a strong shadow applied. Finally the boxes used for the Latest News on the right side of the page are too small. The designer should have used some of the empty space available below the boxes and then applied bigger font-sizes.

3 Hall braves

This page in WordPress is designed to be a website for a Social Club, and has a very poor layout and just one single font for the whole content, with no variations between serif and sans-serif typeface.

The main problem is with the size of the columns where the texts are displayed. Nothing wrong with the left column, displaying the menu, but the middle column is too long, and the text goes on covering the whole wrapper before the line breaks, making it really hard to read. The right column is too small, also making the content hard to read.

1 John Coltrane

http://www.johncoltrane.com/

John Coltrane’s official website brings the covers of his albums displayed in the front page, and shows that it’s possible to use a great range of colours without being messy. The colorful header is beautiful and proves that it’s possible to use effects and still keep the image clean and pleasant to look at.  The colours in the menu were picked from the header, and in general the website presents a basic colour scheme, with variations of yellow and orange. As a balance to all these colours from the album covers, the designer has used some black and white pictures and neutral backgrounds. For the wrapper background, grey was the choice, and for the main one, brown. That’s an example of a perfect solution to display a colorful set of images.

2 Singularity Concepts

http://singularityconcepts.com/

Singularity Concepts has a fantastic colour scheme. It’s a website to present the work of a Web and Graphic Designer and it’s a good example of a great choice of colours. The designer used a small range of colours and displayed it in various creative ways. The orange, for example, is used as a background for the contact box, in some elements of the menu, as a background for a picture, as a font colour for some titles and in the main background. The same happens with the brown or the blue. The design is also very well done with many good ideas.

3 I Love Colors

www.ilovecolors.com.ar/

That’s a great blog that provides information and tutorials about graphic design, typography and web development. As the title suggests, the designer has used as many colours as he could and the result was great. With his colour choices, he creates an atmosphere that catches the user’s attention straight away. The design is also very well done and a few good ideas were used like staples to fix some pieces of information on the screen. The content of this website is very useful and interesting as we are now studying colours, and I recommend it.