Archive for the ‘Project 5 – Technoculture Web 2.0 & mobile’ Category

The project consists of 5 pages – 3 completed ones.

Designing the website

The pages were designed in Photoshop – divided into separate elements and saved in the appropriate file formats.

I decided to go for a fontbased logo and tried to create a punched out effect to give it a web 2.0 feel. I used a downloaded a free font called Tuffy which was recommended for contemporary web design. To created the punched out effect I applied a clipping mask which contained a copy of the background gradient. The font has an inner shadow applied.

To the overall background image (gradient and main container for the website) I applied a noise filter just to add a slight texture to keep the whole thing from appearing too flat.

I repeated the punched out text effect for the navigation bar. The shapes for the nave bar where created by using the rectangle tool from the toolbar with rounded corner options added. I then applied a drop shadow to these.

The header and navigation bar were saved as a single image. I added hotspots in Dreamweaver to make the navigation links work.

I made a narrow gradient for the background image.

The pages in Dreamweaver were made from scratch using AP Divs – the home page consists of a main content div – with header, footer and the join/search box at the top of the page.

Other AP DIvs on this page is the box containing the introductory text and the coda slida plus four boxes with brief descriptions of other pages and links.

The other pages consist of header, footer, main content, side bar and the join/search box.

CSS3 styling

I have used CSS3 styling throughout the site to produce rounded corners and drop shadows. I used a couple of  online tutorials – which I managed to get to grips with after some trial and error as they consisted of examples plus code but no step by step explanation as to where to place the code! – Anyhow it gave me more insight into how the css styles, code and pages work and fit together.


I used font squirrel to generate a font kit for the Tuffy font (which was permissible) and for the main body text I used Trebuchet

Groups and Forums

I joined and created Better by Design pages for Facebook and Twitter (I got 3 hits for this on the first day – even though there were only two trial posts) and a Better by Design e-mail address – these can all be linked to via the icons in the header and footer (these were readily available from the internet). On the resources page I added in a Twitter feed specific to designers – I did this through Twitter which generated a piece of code which was cut and paste into the appropriate place. I also joined vanilla and set up a free forum using one of their templates – I chose one which fitted best with my existing design. They are minimal adaptable without going down the route of paying for one. I tried to embed the forum into my site using the cut and paste coded generated but it would not display correctly so I have added a screen shot which has a hotspot that links to the actual forum.

Coda Slider

On the home page I used Coda Slider to display images pertinent to the website. It is a piece of J-query software that creates a slideshow. I pasted the code in the appropriate place (the head area of the html code) and added it to a new AP Div. I added the images required (sized to specific size – the same for the thumbnails) – adding links to websites on some of them. I tweaked the styling to slow down the change of the images and remove unwanted elements


On the resources page – I used Dreamweaver’s spry accordion which I tweaked to remove unwanted elements. I could then divide and collapse all the different sections of information (list of links) without have to create a long page which the visitor would have to scroll down to find relevant information.

Additional information

I have tried to keep the amounts of written information on each page minimal – In keeping with Web 2.0 principals, visitors to websites want bite sized chunks of digestible information – to be able to find links fast and to be able to navigate easily and appropriately around the site. This site is conduit to more in-depth information, as on the resource page or the forum page where members can discuss topics with each other in more depth. The gallery would be a showcase of members work with links to their e-mails/ contact /work details. The news page would act in the same way – probably using the accordion system  with headlines and links to the sources of news. This page might need some kind of archiving system built in. I hope that if this site was real that it would help to raise the profile of designers who work in and for the NHS by:

presenting work through a professional looking website,

extending links with other NHS designers,

building links with community based sites such as Facebook, Twitter,

building links throughout the community forum,

creating links with other websites and therefore increasing traffic to this site.


Read Full Post »

Vimeo is a cleanly designed website that allows people to upload their videos to share and view with others.

It was founded in November 2004 by Zach Klein and Jake Lodwick and is owned by the media conglomerate IAC/InterActiveCorp and operated by Connected Ventures.

The name Vimeo (coined by Jake Lodwick) is a play on the words video and me – it is also an anagram of the word movie.

It does not allow commercial or gaming videos, pornography or anything not created by the user to be hosted on the site.

It is a leading video hosting platform and has supported high-definition video since Oct 2007.

Vimeo is currently up for three Webby Awards – the leading International award honoring excellence in interactive design, creativity, usability and functionality on the Internet. The Webby Awards are presented annually by The International Academy of Digital Arts and Sciences which was founded in 1998 in New York to help drive the progress of the Internet and evolving forms of new media.

The three award categories Vimeo are up for are Best Visual Design – Function, Best Events Website (For their  first annual Vimeo Festival Awards  October 8-9, 2010. Judges included David Lynch, Morgan Spurlock and M.I.A. – they had over 6,500 entries) and Best Social Media Website.

The actual website is simple, friendly, uncluttered and easy to navigate.

It has a simple but distinctive logo using ‘Black Rose’ a free downloadable font available on Dafont. The body text is a simple, clean sans serif font.

The site uses a distinctive and clean strong palette of blue, green and grey colours and a simple vector image on it’s home page of a sun in the top right hand corner with a ‘cheery’, pastoral  landscape at the bottom. The imagery changes from page to page, but is contained with in a recognisable format. It allows individual forums, groups or communities to create some kind of unique identity.

The format of the site is simple – header, content section and side bar. The home page has three main navigation elements:

  • Videos we like – showing current favorite videos
  • Explore – which is split into categories of videos (which are then divided into further sub-categories i. e.  animation – 2D, 3D, animated typography etc…)
  • Right now – recently uploaded and ‘liked’ videos

The side bar is divided into sections

  • Advert
  • Link to staff blog
  • Explore Vimeo which is divided into sections and is where you can access groups, forums  and communities within Vimeo. It is also where you can link to  tutorials, advanced Vimeo features and High Definition video.

The main content is easy to navigate and consists of a main video to view which constantly changes, underneath which are listed other videos to link to. These are presented as a small image and some text, each of which is divided by a thin line – this design feature carries through the site – varying slightly throughout.

There is sparing use of simple vector based illustrations in the side bar to to distinguish the different sections. There is no flash or animation as part of the site design.

The site is host to many easily accessible and active communities, forums and groups that have been set up to accommodate the many permutations of video it terms of technique, styles, content, genres, interests etc.. Members are able to set up their own channels to which they can showcase videos they have made or videos they like. The White House has set up it’s own channel that presents the weekly address from the president of the United States.

It is a great site to view amazing and interesting work from around the world and to be able to comment on the work that people present.

Read Full Post »

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 »