Webdesign - inspiration, colours

Content of the lesson:

Inspiration

Inspirate from others

• Conception - how do contemporary webpages look like.
• Possibilities - what is currently feasible.
• Ideas - finenesses, details, improvements.
• Colour combinations.

Examples of creative webdesign

http://www.pojeta.cz - webpages of creative graphic designer Tomáš Pojeta

http://shoeguru.ca - shoe shop - minimalistic and also very nice design

http://www.meomi.com - design studio

Where to find an inspiration?

• Webdesign galleries - Internet CSS webpage galleries. You can find them via google by entering css gallery to search input. Some css gallery links:
  • http://cssmania.com
  • http://cssdrive.com
  • http://www.csselite.com
  • http://www.bestcssgallery.com
  • http://www.divvoted.com - here you can vote for designs and comment them via Twitter (take notice of very nicely used DIV tag in the webpage name :).
  • http://cssgalerie.cz
  • http://css-galerie.tomcik.cz
• Google's web directory (this text taken from http://www.google.com/intl/cs/dirhelp.html) - The Google Web Directory integrates Google's sophisticated search technology with Open Directory pages (Open Directory Project is a large public directory managed by Netscape. The ODP is maintained by a group of volunteer editors from around the world who evaluate sites for inclusion in the directory. The web pages selected by these editors are organized into a number of broad categories under which are many more specific subcategories. Google uses this hierarchy as the basis for its directory.) create the most useful tool for finding information on the web. Key improvements include the following:
  • Importance ranking. The Google Web Directory starts with a collection of websites selected by Open Directory volunteer editors. Google then applies its patented PageRank technology and other factors to rank the sites based on their importance. Horizontal bars, which are displayed next to each web page, indicate Google's view of the importance of the page. This distinctive approach to ranking web sites enables the highest quality pages to appear first as top results for any Google directory category.
  • Smarter search within directory categories. Google uses the advanced technology that powers its regular web search to learn more about each page listed in its directory. This capability enables users to search deeper within categories and produces more relevant results than any other directory search.
  • Web search integration. Google's innovative classification technique connects regular Google search results with information in the Google Web Directory. This technology gives users one-click access from regular Google search results to the most relevant hand-selected web pages in the Google directory.
  • Clean, uncluttered user interface. The Google Web Directory uses the same no-nonsense, user-friendly interface design that distinguishes the google.com site from other search engine sites.
• Webdesign books.
  • http://knihy.cpress.cz/knihy/pocitacova-literatura/webdesign-tvorba-www-stranek/
  • http://www.zonerpress.cz/kniha/pro-webdesignery

Photos

If we want to use some photos for our webpage then we have to take our own photos (but it requires time, expensive photographic equipment,...) or we can buy photos.

We can buy photos for example in Internet photobanks (price of one photography is usually about 100-1000 Kč). Photos which can be directly downloaded from fotobanks often contain watermark and have small resolution (usually good enough for our needs). We can search photobanks with keywords similarly like google.

• http://www.dreamstime.com
• http://www.photos.com/en
• http://www.shutterstock.com
• http://www.gettyimages.cz
• http://www.jupiterimages.com
• http://www.istockphoto.com

Results of one photobank search with keyword "fast car".

Take special attention to server http://www.deviantart.com. This website (webserver) is intended for graphic designers, photographers, artists, painters and all others who want to exhibit their work.

Colours

We can mix colours for our web by ourselves or we can use some colour combination generator.

• http://kuler.adobe.com - here we can find colour combinations with keywords.
  
• http://www.colorcombos.com
  
• http://www.wellstyled.com/tools/colorscheme2/index.html - this webpage was created by Petr Staníček (pixy).
  
  On website www.wellstyled.com we can find pseudo-czech dummy text generator which is used during the webdesign process to fill spaces for text. If we want to look for some other text generator then we can search google for "pseudo text generator" keyword. Then we can find webpage http://www.lorem-ipsum.infowhere we can read about "Lorem ipsum" and use generator with many various settings on webpage http://www.lorem-ipsum.info/generator3.
  
  
  Example of pseudo-czech dummy text
  Těmumaj děpro ňuchlo tkat o myštkrý bůč tisk. Mizrou z slu mléskos peh dřouniř lam s oneť. Tré šur ktákoul a tě. Vrouced di lypajtkůpo něvděh dlo v vrýfrouť žlesý v tkyn? žlíčlou tědi cluch jeviktot o dru plevě flifry v mědi febu o mlast. Prdit sličlýh mid o tibru nazremok. Toblý člachoj cryr. Nýbouk foť.

Lorem ipsum

In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. It is a form of "greeking" (Greeking is a term that refers to a style of displaying or rendering text or symbols.).

Even though using "lorem ipsum" often arouses curiosity due to its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design in order to direct the focus to presentation. "Lorem ipsum" also approximates a typical distribution of spaces in English.

History and discovery

The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it"). It is not known exactly when the text acquired its current standard form; it may have been as late as the 1960s. The passage was discovered by Richard McClintock, a Latin scholar who is the publications director at Hampden-Sydney College in Virginia, by searching for citings of the rarely used word 'consectetur' in classical literature.

This text was taken from Wikipedia (http://en.wikipedia.org/wiki/Lorem_ipsum).

Practical part

In next lessons we are going to create design of some webpage. Think of some specific website which are you going to create and search the Internet for webpages you want to be inspired with and suitable colour combination. If you need then look for some suitable photographs. Result of your work should be this:

• at least one graphic file with webpage picture for your inspiration (download webpage picture from Internet or display chosen webpage in browser and capture the screen to the Windows clipboard with the PrintScreen key (PrtScr) on your keyboard and then create new document in Photoshop and paste screen capture from clipboard to it)
• plaintext file which contains some information about your webpage: subject matter (např. ZOO, some artist, musical group,...), optionally further information (web title, web content), url of your chosen inspirational web
• eventually photos which you want to use on your web

Further reading

Questions

1. Why is it good to inspirate from others?
2. How to find some creative webdesign on the web?
3. Try to find out what is Google PageRank technology.
4. Find at least one czech and one english-written book about webdesign and its price.
5. How can we get some photos for webpage design?
6. Try to find some suitable photo for your web and find out how much does it cost.
7. How to mix some suitable colour combination for our website?
8. What is the Twitter?
9. What is pseudo-text generator good for? How to find some pseudo-text generator on Web? What´s the alternative name for such a preudo-text generator?