Archive for March, 2011

Web.20 practice logo

Web 2.0 practice logo

This was a classroom project where we are beginning to look at what constitutes Web 2.0 design.

In this case we had to design a logo in Photoshop. Web 2.0 design demands simplicity and boldness mixed with up-to date trends in typography to ensure that your website looks contemporary and relevant, has impact and is readable across a range of platforms.

Logo for project


Read Full Post »

I plan to create a Web 2.0 site for the community of designers who work primarily for the NHS or Health Care Promotion units around the UK.

It is a resurrection of a network that existed a few years ago which was a fantastic resource for all who work in this area. These designers often work in Medical Illustration departments and can vary from a single employed person up to a large department of several designers, Medical illustrators often have dual roles acting both as photographers and designers if working in very small departments. They are all working on tight budgets with constraints and protocol that need to be abided by; many work in isolation.

The network brought the designers together and gave them  the chance to discuss, learn and swap ideas about relevant topics in their area of practice. It took the form of a website and also an e-mail discussion group. The whole enterprise was very successful resulting in several annual conferences that managed to raise the profile of designers and also consolidate areas of good practice within the new (at the time) NHS identity and branding as well as highlighting the need for good quality patient information and how that can be approached.

However the two main people who set up this Network have moved into other areas plus the present financial climate means it now operates on a diminished scale as an  e-mail discussion list to which designers regularly still air concerns, discuss ideas and ask questions. I feel this would be a good venture to take on as many elements of Web 2.0 design are highly relevant to this area.

I e-mailed the main person who set up the Designers in Health to see if he would mind me basing a project around this as it would be uploaded to the Web for marking – he said this was fine! I now need to come up with a good alternative name.

The slide show contains all my ideas, plans, source material, research and inspiration

This slideshow requires JavaScript.

I have come up with a name – ‘Better by Design’ !

I have been trying to think about the important elements to include in the website, in light of the research carried out for the written part of the project (see below)

I think it should be divided up into distinct areas – A forum, a gallery, a resource area, relevant news including events/meetings/competitions.

Subsections could include things such as  relevant areas of interest/ cross overs/ inspiring things. Also blogs and maybe a more social area. RSS feeds can be included as well as Twitter and maybe the inclusion of a tag cloud if I can work it out!

I want the design to be clean and simple, but vibrant. I have been looking at some of the design forums on-line and find a few look very busy. The web design forum is  quite nice.

I think that I will use an orange and light blue colour combination against white – these colours are fresh and are both associated with health. They are complementary colours so can work very well together The orange gives warmth, while the blue can cool the design down an balance it out. I also think that colour coding the pages may help with navigation as long as the colours are not competing with the overall design.

Read Full Post »

The Web 2.0 Phenomenon

What is Web 2.0?

Web 2.0 is a term associated with Tim O’Reilly (founder of O’Reilly Media and a supporter of the free software and open source movements), due to a Web 2.0 conference held by O’Reilly Media in late 2004.

However according to an article on Wikipedia it was originally coined in 1999 by Darcy Di Nucci, a consultant in Electronic Information Design in her article ‘Fragment Future’, where she argues that the Web is “fragmenting” due to the widespread use of portable Web-ready devices. Tim Berners-Lee (often viewed as the founder of the web), on the other hand, described it as ‘a piece of jargon’, as he views the Web 2.0 phenomenon as a manifestation of what the Web was originally intended to achieve.

Web 2.0 refers to cumulative changes in the way software developers and end users use the Web.

These changes have moved away from the user passively viewing content created for them, towards a collaborative process of interacting with the Web based around sharing information.

A Web 2.0 site allows the user to read and write information in various formats to it. This is normally achieved by the user uploading information to the site.

There are several types of Web 2.0 phenomenon, the main ones are:

Social Networking i.e. Facebook, Twitter, Linked in

Social networking sites are used by millions of people every day and are often integrated into their daily pattern of life.

A social network is an online service, platform, or site that focuses on the creation and maintenance of relationships among a group of like-minded people.

They operate by allowing the user to create an online public or semi public identity that can be accessed via the site, platform or services they have subscribed to.  Links from other people are added to this identity with whom they then interact with.

Social networks can help friends and family maintain contact with each other as well as allowing users to connect and share ideas, activities, events, and interests within their individual networks.

Online communities work in the same way; the distinction being that a social network service usually means an individual-centred service whereas online community services are group-centred.

Collaborative sites

Wikis i.e. Wikipedia. These are collaborative websites that allow the creation and editing of interlinked web pages via a web browser, normally using a simplified markup language or WYSIWG text editor.  The pages can be edited by anyone or by designated users. The creator of a wiki can receive notice of all changes and track and monitor the development of the site content.

Other collaborative sites such as Twiddla and Stixy allow individuals to create or upload documents to the web that can be edited by others using familiar formatting tools – some provide the ability to create presentations.

Blogs i.e Blogger, WordPress

These are sites set up by the individual user, often in the form of a journal, to share information and opinions with readers online.  Text, images, audio and video can all be added as well as links to other external sites.

Blogs use customizable templates and layouts so that the user can create a site that is unique to them. They can also add widgets and plugins to extend their sites versatility.

Blogs should be regularly updated with new entries.

They solicit feedback and visitors can comment or link to them or send e-mails to the blogger.

Blogs have had a real impact on the web in terms of journalism and politics.  They have given millions of people a voice to express themselves over an infinite range of subjects.

Image/Video Hosting sites i.e. Flickr, YouTube, Vimeo

These are websites that allow subscribed users to share and embed personal photos or videos. These can be commented on, and often can be downloaded by the visitor to be used elsewhere depending on copyright status. They can be used to host images or videos rather than being uploaded to individual/personal websites where they would take up valuable space. YouTube allows videos to be viewed away from the main site, as each one comes with a piece of HTML, which can be copied and embedded to external pages. Both Flickr and YouTube have apps for Apple products such as I-phones. Flickr also has apps for Blackberries and Windows Phone 7.

RSS Feeds – Really Simple Syndication

RSS feeds allow you to see when websites have added new content, most typically news items. The user is able to get the latest headlines and video in one place, as soon as it’s published, without having to visit the websites the feed has been taken from.

Most modern browsers, such as Firefox or Safari, automatically check for feeds when a website is visited. An orange RSS icon is displayed they find one. RSS feeds can be added browser favourite or bookmark folder, automatically updating them with the latest content. Web-based news readers check feeds and display any new articles that have been added. They let the user catch up with their RSS feed subscriptions from any computer. Some email software lets users read RSS feeds. there is also dedicated news reader software available that can be downloaded and installed. RSS feeds cover a wide range of subjects from the news through to the weather and music.

Collaborative tagging i. e. Collaborative tagging, folksonomy, Del.icio.us, bookmarks, web, sharing.

Collaborative tagging is the process by which many users add metadata in the form of keywords to shared content.

Users upload or select content such as text, pictures, music files or websites and mark this content with tags or keywords., to organise content for future navigation, filtering or search.

Users can then browse through tags and by clicking on them find similar material that has been tagged in the same way.

Collaborative tagging has grown hugely in popularity on the Web; a well known example is Flickr.

A tag cloud is a visual depiction of user-generated tags, or simply the word content of a site, typically used to describe the content of web sites. Single words are normally hyperlinks that lead to a collection of items associated with a tag. Their popularity or importance is shown by font size and/or colour and weight.

All these different kinds of applications and sites cross over with each other, adding to their usability, creativity and interconnectedness. They have crossed over into the majority of mainstream sites.

For example sites such as Amazon ask customers for reviews and recommendations of products. La Redoute have Twitter and Facebook pages as well as videos on YouTube advertising their latest clothes. Radio 4 also has Twitter and Facebook pages. Online versions of Newspapers have blogspots offering an alternative form of journalism often from people in trouble spots around the world who can offer valuable insights and alternative views on situations.  They also have forums where the public can subscribe and comment about certain articles.  The Met Office sites have RSS feeds for different regions as well offering alerts via e-mail.

In fact it is important that contemporary and relevant websites have at least one of these Web 2.0 elements included on their sites if only to increase their profile on search engines. These days most visitors will expect a degree of interactivity on a website, the days of passively viewing a webpage are disappearing fast.

Part 2. Web 2.0 design

Due to the rapid development of technology Web 2.0 sites are accessed through a wide range of devices from desktop computers with large display screens through to portable devices such as mobiles, net books as well as televisions and video game consoles – this has had a huge impact on the design of such sites to ensure usability and accessibility.

Web 2.0 designs are simple, friendly, focussed, and clean. The goal of a website needs to be stated quite clearly – unnecessary elements are stripped out. The user needs to interact easily with the screen features and be able to navigate straight to the content required. Visual elements such as lines, words, shapes, images and colour communicate relevant information and not just used as decoration.

The design has to communicate two things:

Hard data – facts – what your Web site is actually about

Soft data – the ‘qualitative aspect of communication’ – does the website look approachable, does the look and feel of the website match the product or information it contains – does it feel trustworthy?

This can be done effectively by considering the following factors:

Layout – The page is often placed centrally and contains lots of white space. The page is often split into two columns – maybe three at the maximum.

The page is divided into solid areas of screen ‘real estate’ such as:

Branding, navigation, background, main content, callouts and cross links.

The main branding and navigation area should be distinct from the main content. It ensures the page starts with a strong bold statement and clarifies the site’s identity.

The rest of content also needs to be distinct from each other to ensure easy wayfaring around the page and site, this is often done with the use of colour or space.

Navigation is simple and is differentiated from normal text.

Logos – Need to be bold – to enforce a clear strong brand – they also have to incorporate attitude, tone of voice and first impressions.

Big text – A distinct feature of Web 2.0 design is large text  – in part to accommodate the different devices the information may be viewed on. It also increases accessibility in other areas such as visual impairment, and draws the eye if page skimming, as it stands out.  Big bold text, especially in introductions, helps to set out the main message of the site.

Strong colour – The use of strong colour draws the eyes, divides the page into distinct section and highlights important elements.

At this present time other elements that are distinct to contemporary Web 2.0 web sites are:

Rich surfaces – these tactile and aesthetic qualities enhance the overall feel of a site. – gradients are often popular as they soften areas that would otherwise be flat, create mood and give the illusion of depth

Buttons – call to actions – these need to look touchable and are often glossy and shiny.

Rounded corners – soften the appearance of boxes, which helps to make the site feel more friendly.

Badges – these are a popular trend, and are use to display important messages in an attention grabbing way

Icons – another friendly, eye catching way of drawing the viewer to essential/interesting information.

Speech bubbles – commonly used for styling comments or block quotes.

Please see later post for analysis of  a Web 2.0 site – Vimeo


Read Full Post »