Web 2.0 Workshop

Understanding Web 2.0

Web 2.0 was coined in 1999 to describe web sites that use technology beyond the static pages of earlier web sites. It is closely associated with Tim O’Reilly. Although web 2.0 suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and end-users use the Web.

A Web 2.0 site may allow users to interact and collaborate with each other in a social media dialogue as creators of user-generated content in a virtual community, in contrast to websites where people are limited to the passive viewing ofcontent. Examples of Web 2.0 include social networking sitesblogswikisvideo sharing sites, hosted servicesweb applicationsmashups and folksonomies.

– taken from Wikipedia.

Web 2.0 is a style of web design from a period in the life of the world wide web. It is still in this style now, 2012. The styles primary idea is design which includes interaction with the viewer and social interaction such as online communities.

Broken down Web 2.0 means:

  • more user interaction
  • AJAX & XHTML & JAVASCRIPT (Asynchronous)
  • Community based websites like Youtube and Flickr
  • Syndication, was stickiness. This makes people want to come back
  • Wikipedia, was Britannica. A online encyclopaedia, source of information.
  • Blogging, was personal websites.
  • Participation, was Publishing.


Web 2.0 design is based around making interface design look more real, 3D. If a button looks 3D, you believe you can actually push it, albeit wit a mouse and cursor. There are many ways to make interface design interactive such as rounded shapes, bold logos, gradients, sans serif fonts, pastel colours, footers/headers and buttons.

Beyond Design

Web 2.0 is a type of design, but also includes other ways of creating interaction such as WordPress, Blogger for blogging. Also Flickr, a online photo community, Google apps such as maps and calendars. Also widgets such information on the weather. Podcasts, Tagging, web content voting and social bookmarking. All of these things that are included in a website mean that the viewer is getting more from a static website.

I am going to look into the broken down ways in which to incorporate Web 2.0 into a website so that I can get a thorough understanding of the different elements.

Simplicity is a way to sum it up. Remove unnecessary components without sacrificing effectiveness: web 2.0 design example simplicity

This is a example of a photographers website which has been designed to be simple and self explanatory. It is easy to use and navigate.

Central Layout also used in web 2.0 design because its bold and simple and more like a magazine than a book to read:web 2.0 design example central layout

This website shows that designing with a central layout looks orderly and symmetrical (in a way).

Solid areas of screen real estate is used in interface design and layout to block off areas that makes it easy for your eye to flick around the page and easily finding information. web 2.0 design example solid area of screen real estate

The page is easy to navigate because the block areas of colour separate different sections of information. This website uses colour blocks to divide the logo/navigation, from the ‘pre-order now’ button, from the photo and info box on the right, with a black one holding a image and link to video.

Navigation Bar designed with Web 2.0  are large and bold, easily readable and clearly positioned and clearly differentiated within the website:web 2.0 design example navigation bar


This navigation bar is 100% good example of Web 2.0 design, firstly it is simple, bold, clean and obvious, secondly it uses a clear rounded font, and thirdly it is a rounded rectangle.

Bold Logos are part of the interface design as well, as I know from my logo workshop and research a logo must be strong on its own, recognisable and distinctive and at the same time represent the brands identity and personality. It must be clear upon first viewing:web 2.0 design example logo


This logo is simple and clear, it uses just three colours, red, green and white. It is only a example logo but it shows the effectivness of easy to read fonts with a shine added to the stroke around the text with a simple strawberry to illustrate what it is saying in the text.

Sans Serif type is used often in Web 2.0 because it is so easy to read and contemporary. Decorative typeface is NOT appropriate in Web 2.0. Here are a few good examples:sansserif type web 2.0 design example


All of these fonts are contemporary and to me, quite similar, but what is key is the simplicity of their design. There is nothing ‘fancy’ about any of them, and has no connotations.

Big text is used, this ties in with the clear, bold, strong, easy to read way of designing a Web 2.0 interface:web 2.0 design example apple big textThis is Apple’s website, they use Web 2.0 design. Every home page (which changes often) uses very large type, with very little words. Its very effective. BIGGER IS BETTER!

Strong colours are a important design feature in Web 2.0 as they are eye catching, and also helps to draw the eye around the page’s elements. This is linked into the solid areas of screen real estate design:web 2.0 design example colour bold strongThis example of some colour palettes for Web 2.0 websites shows the effectiveness of choosing bold colours, the more different they are from each other the more each one will stand out from the rest. Colour choice’s can also vary what is looked at first when the website is viewed, colour can highlight important elements of the page. USE SPARINGLY.

Rounded corners in Web 2.0 design means that the page has a softer look, and also they mix well with straight edges, used with gradients makes a effective area/button that really stands out:web 2.0 design example rounded corners bright coloursThis website shows that rounded corners add a soft approach, also bold colours are used to separate areas of the website effectively.

Rich surfaces are used and this is what is done to make areas become 3D. This could be from giving something a glow, orb, gradient, drop shadow or shine in Photoshop. Gradients look best when mixed with other elements that do not have gradients. Gradients can be used in backgrounds, text boxes, buttons and navigation bar, so anything! I am going to look at and practice all of the rich surfaces later on in Photoshop, so for now here is a example of a gradient:web design 2.0 example gradient


Here we see a gradient of blue going into green.

Reflections are also added onto areas or buttons as they help to highlight and make it look 3D. The rich surfaces and reflections all add up to making the website look more real and touchable, less flat, making the viewer want to interact with it.web 2.0 design reflection example


This house is a house, but the highlights and shadows plus the reflection al help it to look real. This is because in real life everything is lit by the sun, a light coming from one place, giving everything a highlighted area, and a shadow. Unless its cloudy, then everything looks flat and has less contrast. Here is a link to a website with a tutorial to make a reflection.

Icons, flashes & badges are used to draw attention to offers, sales and any other links that you want someone to see. They buttons that are used to resemble stickers in shops like ‘buy 1 get 1 free’ which is a classic. They can be round, square, star shaped, any shape, but need to have some rich textures added to bring them to life and stand out.web 2.0 design example badges


This is a downloadable selection of editable ones. They vary in colour, shape etc and all have a shine, gradient, glow, orb or shadow added to make them standout. These are blank (text wise) and would have a offer such as ‘sale’ or ‘click here’ added to them which would take the viewer to a new page.

Letterpress is a way of making it look like text has been stamped out, so the background is the same as the hollow (looking) text. With highlight and shadow done carefully and precisely (not too much) this effect can look very realistic. This effect is done to emulate a real letterpress effect:web 2.0 design example letterpressThis example was done in Illustrator, see this tutorial of how to do it, the website Tutorial Magazine has many more tutorials to look at too!






Vector Image Workshop – Path, Stroke & Fill

Understanding Path, stroke & fill in Adobe Illustrator


Paths are invisible lines that join the coordinates that define a shape. For a path to become visible it must have a stroke applied to it.

In more detail:

When you draw an object, you create one or more lines called a path. A path is made up of one or more curved or straight lines, known as segments. The start and end points for a segment is called an anchor point. An anchor point is a bending point to modify the line segment. A path can be open or closed. An open path has open-ended endpoints, such as a line, while a closed path has connected endpoints, such as a circle. Paths can have two types of anchor points: smooth points or corner points. A smooth point connects two curved segments to create a smooth line, while a corner point connects two straight or curved segments to create a path direction change. You can draw a path using both smooth and corner points. The outline of a path is called a stroke, which you can format with different characteristics. You can specify stroke weight (thickness), color, or a dashed pattern. The interior of an open or closed path is called a fill, which you can also format with a color or gradient. You can change the shape of a path by dragging its anchor point. A selected anchor point or endpoint appears as a solid square, while an unselected one appears as a white square.

open and closed paths

Stroke & Fill

A fill is a color enclosed by a path. A stroke is a line of color that precisely follows a path. Here is a example of stroke and fill:

fill stroke example


The blue star is showing the path, which has then had gray added as the fill and black as the stroke, around the original path. Below is the fill and stroke box and what it does.

fill and stroke box example

Vector Image Workshop – Understanding Graphic Formats

In this workshop I learnt about different graphic formats and how to use and create them in Adobe Illustrator.

Some basic information about the different graphic formats are:

Bitmapped Image – obtained from scanner or painted, video, can also be a photograph. AKA Raster Graphics.

  • Image is stored as an array of pixels
  • Good for representing natural objects
  • Can require large amounts of storage
  • Cannot be resized well

Vector Image – are drawn and created from scratch.

  • Image stored as mathematical object with paths and shapes, so much smaller file size than Bitmap
  • Can be stored efficiently
  • Resolution Independant
  • Doesn’t produce natural looking objects

vector vs bitmap example

So in a little more detail I am going to look at creating vector graphics in Illustrator. Because Illustrator doesn’t work in pixels like bitmap images, everything that you produce in it is resolution independent.


Vector images are built using a number of predefined shapes, they are used because they can be represented compactly and rendered quickly:

  • Lines
  • Polyline
  • Curve
  • Eclipse
  • Rectangle
  • Polygon

Also the pen tool is available for freehand drawing to create curves. It was created in 1962 by the French engineer Pierre Bézier. His curves were widely publicised.  Bézier curves are used to model smooth curves that can be scaled indefinitely. “Paths,” as they are commonly referred to in image manipulation programs, are combinations of linked Bézier curves. Paths are not bound by the limits of rasterised images and are intuitive to modify. Bézier curves are also used in animation as a tool to control motion. Bézier curves are also used in the time domain, particularly in animation and interface design, e.g., a Bézier curve can be used to specify the velocity over time of an object such as an icon moving from A to B, rather than simply moving at a fixed number of pixels per step. Here is a example of a Bezier curve

bezier curve

So creating vector images in Illustrator means that the possibilities are endless, like when drawing on paper. The images that can be created is infinite. As well as creating pictures or drawings from scratch, Illustrator is used a lot in web and interface design. So backgrounds can be created using vector images, also whole interfaces , mascots & logos.

Vector design in logos

A logo design is of great importance to any business. Often seen as the first impression of a company, its logo must be tailored to communicate specific values and ideals in an instant. However, logos not only have the look good, they should also be thoughtfully designed and capable of taking on a variety of uses. This could include being scaled to a range of sizes, being reproduced in flat color and being printable on paper stock.

castleprintrbone leafblack sparrowaramovapangurfire fishgreener

These example shows logos designed using vector images, it is a simple way to illustrate something, a flower, a animal, a shape, something made up from imagination, anything without using a photograph. And I don’t even need to label them as they are self explanatory, and that is what makes a great logo design. It speaks for itself.

bigomaha vector design logo

big omaha site vector image design

So these examples show the logo that has been used for this website’s company. The top image is the logo on its own, it uses 3 simple colours and white, the brightest colour that makes the text really stand out from the bland yellows and browns used in the cow and background. The image below is their whole website. The cow is the main feature, and its really quite a simple website, there is no hero image or much of a background except the plain cream that makes it easy to read the text. So instead of the traditional hero image and background elements they have used the logo  as a header to bring their branding including logo, text and colour into the design. I feel that this works well as a very simple website. The cow and the green behind him show a basic landscape/horizon, so this main strip of colour is showing what the company is about through the branding.

Vector design in headers

go glamping

This header comes from the website Go Glamping, like the one above it also features a landscape, personally I think this header is beautiful, probably because I love the idea of glamping (glamourous camping) and so their header is really selling the idea to me! See their full website here.

monster vector design

Here is a header design using vector image, although this one differs from most, the header does not include a logo, but instead holds the navigation bar, it is a clean and quite simple design, and the image goes beyond the header area and into the background, this works really well for the particular design as the blue monsters mouth appears to be eating the link into another area of the website.

n.design studio

This is the header design of Nick La, a web designer and illustrator, so that explains why it is a large, detailed and throughly thought out design. He does a lot of this style I noticed when looking through his website, using the Koi carp fish and oriental design around it. In the top right hand corner is ‘freebies’, he offers WordPress themes and desktop wall papers for free, all designed by him. He also has a large amount of Adobe Illustrator tutorials for the intermediate user, great for me to use at a later date! See his fabulous website for yourself here.

Vector Design in backgrounds


This website for Lowdi, which I think us some kind of musical box that plays music from phone or ipod wirelessly. The vector design is used in a simple way to divide up the layout of the site, the colours guiding your eye around the page. It uses three colours, plus black and white. I think that this design is great, I think for a website that doesn’t have much on it, ie information or images, it needs to have a striking design and layout to keep your eye occupied and moving around.

with love

This website has a much simpler design as the background, it just has a blend of colours to form a blue sky at the top with some clouds. The simpler background has been used to not draw attention away from the photographs  that are being displayed. Personally it is my worst of the three background as I can’t really see anything original or artistic about it and also I can’t see how the background has any relevance to the images. Also I can’t really work out what the website is actually selling or supposed to be informing to me, the viewer.


So this website has used a large vector image for the whole site. Its called HTML4 Lab and from the illustration I can see that they have something to do with building websites as jpg, png and psd’s are going in one tube and coming out another tube as CSS3, HTML5, and JS’s. So it does coding, but didn’t seem to have any links to anything. I thought I’d add this image to show a lovely Vector design rather than a website design’s layout.

Saul Bass – the great graphic designer of the mid-20th century

Saul Bass                              “Design is thought made visual”

This post is completely dedicated to the American graphic designer and film title designer Saul Bass. I actually watched North by Northwest two days ago and commented about the opening titles and how I thought that they were great, the wording sits along the same horizon as the building does which comes in slowly so that the words are over the building and the texts slant becomes obvious why. Although I did not know it was Saul Bass who has designed it when I watched it!

As well as doing over 50 film titles collaborating with film makers such as Martin Scorsese, Alfred Hitchcock and Otto Preminger, he has also designed many groundbreaking film posters, and logos. His iconic work is often in only two colours, if you search his name on Google images the screen is dominated with orange and black. Two of my personal favourite film posters of his are Vertigo and The Man with the Golden Arm, both Hitchcock films, I feel that for Hitchcock to use the same designer for many of his films poster design really shows that Hitchcock feels Bass’ work fits the bill for what he wants, especially as he uses Bass more than once. Contemporary designers have designed new work that in ‘in the style of’ Bass as his work was and still is very influential to other designers. I have got a few examples here…saul-bass-north-by-northwest-title

Vertigo-1958-USA-Movie-Poster-Art-by-Saul-Bass-James-Stewart-in-Alfred-Hitchcocks-Vertigo1ManWithTheGoldenArm saul bass North by Northwest is a 1959 American thriller film directed by Alfred Hitchcock

North by Northwest is a 1959 American thriller film directed by Alfred Hitchcock.

Vertigo is a 1958 psychological thriller film directed by Alfred Hitchcock based on the 1954 novel D’entre les morts by Boileau-Narcejac.

The Man with the Golden Arm is a 1955 American drama film by Otto Preminger.

The design I have included here for The Man with the Golden Arm is a square design Saul Bass did for the record accompanying the film.  He also did a landscape and a portrait version with the same design of colour blocks.

“When the reels of film for Otto Preminger’s controversial new drugs movie, The Man with the Golden Arm, arrived at US movie theatres in 1955, a note was stuck on the cans – “Projectionists – pull curtain before titles”.

Until then, the lists of cast and crew members which passed for movie titles were so dull that projectionists only pulled back the curtains to reveal the screen once they’d finished. But Preminger wanted his audience to see The Man with the Golden Arm’s titles as an integral part of the film.

The movie’s theme was the struggle of its hero – a jazz musician played by Frank Sinatra – to overcome his heroin addiction. Designed by the graphic designer Saul Bass the titles featured an animated black paper-cut-out of a heroin addict’s arm. Knowing that the arm was a powerful image of addiction, Bass had chosen it – rather than Frank Sinatra’s famous face – as the symbol of both the movie’s titles and its promotional poster.

That cut-out arm caused a sensation and Saul Bass reinvented the movie title as an art form. By the end of his life, he had created over 50 title sequences for Preminger, Alfred Hitchcock, Stanley Kubrick, John Frankenheimer and Martin Scorsese. Although he later claimed that he found the Man with the Golden Arm sequence “a little disappointing now, because it was so imitated”.   –  taken from the Design Museums website.

Martin Scorsese once described his approach as creating: “an emblematic image, instantly recognisable and immediately tied to the film”.

Anatomy of a Murder is a 1959 American courtroom crime drama film directed by Otto Preminger

Anatomy of a Murder is a 1959 American courtroom crime drama film directed by Otto Preminger. Similar to the poster above this one also features black block design of the human limbs, but here also the whole body is included, along with simple blocks of colour providing the background. This design is then made better with Bass’ choice of typeface which are simple but so very effective. Also in his work it is common to see little or hardly any text as part of the design, he has done some film posters where the accompanying text is made very small and unreadable without close inspection as I feel this leaves the graphic design and title room to breath. Some examples of this are belowbunny lake is missing otto premingerthe human factor saul bass

 Bunny Lake Is Missing is a 1965 British psychological thriller film directed and produced by Otto Preminger.

The Human Factor is a 1979 British thriller film directed by Otto Preminger.

All his work is instantly recognisable and I feel that that is why a designer stands out from other designers, because of their style. To end this post I have finished on his iconic poster for the Design Museum’s exhibition of Saul Bass in 2004.saul bass design museum poster design

Web Design is 95% Typography

I came across a interesting article about web design and the use of typography within it. What I think sums it up is this paragraph

“With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him”

Have a read of Oliver Reichenstein’s article Web Design is 95% Typography here.

Typography Research – 50’s Bomber

Looking at quite a lot of different fonts on websites I came across one that really stood out, it is called Bomber by J. R. Long. J. R. Long’s Bomber is a reminiscent style of the 50’s with condensed lettering it allows designers to utilise narrow design space. It comes with 3 fonts: Regular, In line and Do-dads. bomber font regular

bomber font inline


So as you can see this font also comes with its own dingbats, a set of patterns and shapes that were popular in the 50’s. The great thing about this site is that it gives plenty of examples of graphic design that includes the featured font so you can get a good idea of all the different  ways it can and has been used. See some examples of Bomber used below and see the site here.

bomber font gonzalesImage

Typography Research

Typography / Typeface / Font

Although we have not studied typography yet in lessons it is a element of the design process that I feel I need to research because it is so important to get it right. Because there are so many different fonts out there I feel its easy to be over whelmed with choice.


In typography, a typeface (also known as font family) is a set of characters that share common design features. A single typeface is represented by a specific weight, style, condensation, width, slant, italicization, ornamentation, and designer or foundry, but not by size. 

 There are thousands of different typefaces in existence, with new ones being developed constantly.

The art and craft of designing typefaces is called type design. Designers of typefaces are called type designers. In digital typography, type designers are sometimes also called font developers or font designers.

Every typeface is a collection of glyphs, each of which represents an individual letter, number, punctuation mark, or other symbol. 

The term typeface is frequently confused with the term font. Before the advent of digital typography and desktop publishing, the two terms had more clearly understood meanings. – from Wikipedia


I have found a website which is called Thinking With Type and it has a page called ‘Type: A Few Good Fonts’, it gives examples of some classic fonts and a mini history about it and who designed it and in what year, also some of the influences behind it. Here they arethinking with type examples of font and mini history behind each onethinking with type examples of font and mini history behind each onethinking with type examples of font and mini history behind each one


So this collection gives a great variety of old ones, dating back to the 1700s John Baskerville designed Baskerville, and some newer examples are shown such as Matthew Carters Verdana in 1996. My personal favourite is Neutraface which is modern but is based on a type that was originally designed in the 1940s/50s by architect Richard Neutra. The 1940’s and 50’s are particularly influential to me, I find a lot of things from that era that is very inspirational and its design; weather from interior, exterior, graphic, or photography always catches my eye and stands out to me as very original work.

So type is used in everything we see and do, and I found a great example of how different typeface’s are used in film. Although until now I have never taken notice of what typeface is used in film, this shows a variety of some. A whole website has been created dedicated to ‘the end’ title screen of Warner Bros films. See the website here. This particular selection is gallery of the end titles from Warner Bros. movies (1924-1967), collated by designer Christian Annyasthe end titles warner bros


So some of the examples here are quite standard, in fact Warner Bros used the same design and typeface for many films in the beginning (1918 was their first film), as seen on the website link, but then in the 1920’s they started designing new ones to go with each individual film. Here two examples stand out to me, the middle one and the bottom left one, clearly a western cowboy film, it is harder to work out what the other film is just from this film still of its end titles but what I like most is how the lettering is isometrically positioned to suit what is in the picture. This really makes the titles ‘fit’ into the film.

I also came across this periodic table of typeface, which is a beautiful way to display them. It is taken from the first page of a book called Just My Type: A Book About Fonts which is a light-hearted collection of stories about fonts that is aimed at non-designers. See the feature here.

just my type example


The book asks questions such as Can a font make me popular? It then goes on to show the cover of GQ magazine featuring Barak Obama and says

“Typefaces are now 560 years old. So when a Brit called Matthew Carter constructed the now-ubiquitous Verdana on his computer in the 1990s, what could he possibly be doing to an A and a B that had never been done before? And how did a friend of his make the typeface Gotham, which eased Barack Obama into the Presidency? And what exactly makes a font presidential or American, or British, French German, Swiss or Jewish?”

Here is another excellent example of some various different typefaces for the words ‘of’ and ‘the’.

typeface design


I like this one because it starts off with the simple line drawing of the ‘of’ word, then builds up to more detailed and fuller designs of the word ‘the’ which then leads on  to the word with some decorative embellishment around it giving it more of a punch and makes it stand out. The next image is just something fun I found which shows real typeface printing blocks that vary  in shape and size.

letterpress exclusive faces example

Early 50’s Poster Design

dollar bill early 50's poster design


This is a poster design that came across on Facebook that I LOVE! It is advertising a gig for a musician called Dollar Bill & his one man band, I know him and his music, but I was so drawn to this poster because its especially good. I feel as well as aesthetically beautiful it also creates the right ambiance for his music as the poster design has a very 1950s feel to it, the shapes, symbols, colours, typeface everything about the design looks like a authentic 50’s poster! I especially like the background pastel colours green and coral/orange that are matched with a dark gray and white to set off the text. The only bad thing is its not very good quality because I got it from Facebook, apologies!