university website design - the home page

8/7/2019 University Website Design - The Home Page

1/9

University Website Design The Home Page

University websites have to deal with a large range of visitors and a large amount of

content. Because of these two factors, thehome page designneeds to strike a delicate

balance of functionality and attraction: enough content to be interesting, but not too much

so that the visitor will be overwhelmed; a user-friendly layout that accommodates firsttime visitors and regular users alike. On top of this, the home page (like that of any

website) has to efficiently communicate the kind of institution the university is (or would

like to appear to be). This in itself is a tricky objective, as universities combine a range ofroles (education, business, community, etc).

Here are 3 main areas we think are most important to thedesign of the home page:

1. Communication: reflect the way you want the institution to be perceived.

First and foremost, is the immediate impact of the home page. As with any other, this needs

to communicate what a business is about. For a university, this means impressing potentialstudents, academics, researchers and businesses with the core ethos of the institution. For

most this means choosing whether they want to be primarily recognised for:

Cutting-edge research

Glasgowcaptures the cutting edge nature of its research (all 3 items in its banner display

are related to research) and also hints at tradition in the background which displays a

traditional university scene.

The history or traditional reputation of the university
http://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.phphttp://www.gla.ac.uk/http://www.gla.ac.uk/http://3.bp.blogspot.com/-7q--JGbxkXM/TWYnXoYznBI/AAAAAAAAAYY/vMeA3hkVN10/s1600/glasgow.JPGhttp://www.gla.ac.uk/http://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.php


2/9

The home age is centred around theHull's history through the dominant image of the olduniversity building.

Perhaps unsurprisingly,Harvard Universityis also is also keen to emphasis its traditional

reputation and the website secures this through its use of the university's colours in the

design. Interestingly enough the design choices of the home pages ofOxfordandCambridgedo not indicate a desire to base their appeal on tradition.

Its influence in a global area, such as political debate
http://www2.hull.ac.uk/http://www2.hull.ac.uk/http://www.harvard.edu/http://www.harvard.edu/http://www.harvard.edu/http://www.ox.ac.uk/http://www.ox.ac.uk/http://www.ox.ac.uk/http://www.cam.ac.uk/http://www.cam.ac.uk/http://www.cam.ac.uk/http://1.bp.blogspot.com/-eMOV9qAIlvg/TWYxBYOIPRI/AAAAAAAAAYk/Y38eZ475_Uo/s1600/Harvard.JPGhttp://2.bp.blogspot.com/-b7FP-eSHtX4/TWYw48A_spI/AAAAAAAAAYg/Xb3SyabFZdo/s1600/University+Home+page+-+University+of+Hull_1298306684936.jpeghttp://www.cam.ac.uk/http://www.ox.ac.uk/http://www.harvard.edu/http://www2.hull.ac.uk/


3/9

The striking use of a limited colour palette for LSEensures visual impact, while the

prominence of up-to-the-minute political news and debate make it seem highly relevantand dynamic.

Its internationality

Manchester Universitystresses its reputation as an international university through the

prominence of its multi-ethnic student body.
http://www2.lse.ac.uk/home.aspxhttp://www2.lse.ac.uk/home.aspxhttp://www.manchester.ac.uk/http://www.manchester.ac.uk/http://4.bp.blogspot.com/-zkrvRWbDTng/TWYxMC44guI/AAAAAAAAAYo/GFcgSr2AIjM/s1600/The+University+of+Manchester_1298306945588.jpeghttp://4.bp.blogspot.com/-Bpt-yOIpFgo/TWYwt-Ma1RI/AAAAAAAAAYc/rlcJ9CerPhw/s1600/LSE.JPGhttp://www.manchester.ac.uk/http://www2.lse.ac.uk/home.aspx


4/9

WhileCardiff Universityinstantly displaces any regional specificity by the use of a

strikingly colourful illustration which contrasts with the minimal presentation of the rest of

the page, achieving maximum visual impact.

Its modernity

Northumbria Universityemploys a minimal background with a dynamic and colourful

navigation bar which dominates the page and displays images which address the

importance of art and design to the university.
http://www.cardiff.ac.uk/http://www.cardiff.ac.uk/http://www.cardiff.ac.uk/http://www.northumbria.ac.uk/http://www.northumbria.ac.uk/http://4.bp.blogspot.com/-AoBGE-NyrTI/TWYxahdFiqI/AAAAAAAAAYw/Inlx_UlaBJg/s1600/Northumbria.JPGhttp://1.bp.blogspot.com/-tzrFw5HPIfs/TWYxS9pomoI/AAAAAAAAAYs/DFv7fBvw5ns/s1600/Welcome+to+Cardiff+University_1297939508383.jpeghttp://www.northumbria.ac.uk/http://www.cardiff.ac.uk/


5/9

Its setting

St Andrewscelebrates its history as the oldest Scottish university, but more importantlyplaces this in the drama of its geographical setting.

Each of these examples has a clarity in itsapproach to web designthat indicates the

university's particular appeal, achieved by the use of a central banner made of images and a

minimal amount of text. It is interesting to notice how these categories apply to most

universities, and that often a range of them are using flash with a sequence of images to

change the focus of each banner.

2. Content management: avoid overloading the homepage with text.

As part of this effective communication, a university website needs to deliver a lot of

information, but in a way that supports the visual impact and therefore doesn't overload

the home page with text. All of the above examples manage to present snippets of

information which are graphically compartmentalised (using colour, layout or boxes) and

so are slightly split up, that can be accessed elsewhere, thus cutting down on the amount of

text. It seems that a main feature of a university home page is to direct a visitor further

inside. The home page needs a visual hook which will encourage the new visitor to explore

and direct regular users efficiently to where they want to go, which brings us neatly to ournext point.
http://www.st-andrews.ac.uk/http://www.st-andrews.ac.uk/http://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.phphttp://www.gwsmedia.com/web_site_design.phphttp://3.bp.blogspot.com/-dn7a9AUuGE8/TWYxmDpPMAI/AAAAAAAAAY0/LgXEwzHUpxQ/s1600/St+Andrews.JPGhttp://www.gwsmedia.com/web_site_design.phphttp://www.st-andrews.ac.uk/


6/9

3. Functionality: ease of navigation.

As we've discussed, the sheer size of a university website presents its own problems and

the accessibility of its various areas is crucial for new and regular visitors alike. In this

respect the layout and organisation of navigation is vital. Here are some examples we

thought have come up with good solutions to the difficulty of directing attention, makingthe various areas easier to pick out from one another.

The use of colour to separate the main areas of navigation in theUCL websitemakes the

site easy to engage with and avoids confusion through fussiness. In this way the home page

has immediate impact.

Oxford Universityadopts an opposite approach by making the whole page a uniform colour

(Oxford blue, naturally) and giving a very clear map of all the different areas. The one

image that is used becomes more striking as a result.
http://www.ucl.ac.uk/http://www.ucl.ac.uk/http://www.ucl.ac.uk/http://www.ox.ac.uk/http://www.ox.ac.uk/http://3.bp.blogspot.com/-wBxsRcpjwkM/TWYx3LoZ7rI/AAAAAAAAAY8/fqwoSxsLpF8/s1600/Oxford.JPGhttp://1.bp.blogspot.com/-6uk2c90mPLE/TWYxxbMq-9I/AAAAAAAAAY4/J9KNrAsHmL4/s1600/UCL+%25E2%2580%2593+London%2527s+Global+University_1297939398935.jpeghttp://www.ox.ac.uk/http://www.ucl.ac.uk/


7/9

Bristol Universityuses a slightly different layout that places navigation to the side, broken

up from the news at the other side with a central panel of images communicating key

information about the institution (its internationality, for example). The prominence of the

A-Z bar at the top also indicates an approach geared to help the visitor find information.

Northumbria's navigation is incorporated more into the components of the site's design, so

that the overall sleekness of the page is not compromised.

Finally, an almost universal feature we noticed, that ties in with all 3 of these main points is

the dominant use of flash on the university home page. This use of revolving images in a

main banner enables the site to maintain a striking and attractive design, while

incorporating extra content and a range of ideas into its brand image. Here theUniversity

of Londontransforms the site through the use of flash in an image that takes up over half

the page. Through this the site communicates its relationship to:
http://www.bris.ac.uk/http://www.bris.ac.uk/http://www.northumbria.ac.uk/http://www.lon.ac.uk/http://www.lon.ac.uk/http://www.lon.ac.uk/http://www.lon.ac.uk/http://www.lon.ac.uk/http://3.bp.blogspot.com/-nb4g4bjHXb0/TWYyBQJMpqI/AAAAAAAAAZE/n8Sbc5jg-gQ/s1600/Northumbria-navigation.JPGhttp://1.bp.blogspot.com/-O9cg3tVkPQI/TWYx71iFNUI/AAAAAAAAAZA/V6sziEeBZpI/s1600/Bristol+University+homepage+-+a+place+for+learning%252C+discovery+and+enterprise_1297939634227.jpeghttp://www.lon.ac.uk/http://www.lon.ac.uk/http://www.northumbria.ac.uk/http://www.bris.ac.uk/


8/9

Tradition

The dynamic location of London

And cutting-edge research in new technology
http://3.bp.blogspot.com/-3_K-nkiMw9k/TWYyT9Wh4tI/AAAAAAAAAZQ/2Pmd1b7wIN0/s1600/University+of+London_new+technology.JPGhttp://3.bp.blogspot.com/-IqPhIn8nKf8/TWYyPU4LrzI/AAAAAAAAAZM/jD8yaDgfs0Y/s1600/University+of+London_London.JPGhttp://2.bp.blogspot.com/-G6AlRBqjBok/TWYyKT3cZyI/AAAAAAAAAZI/tzC4LmghRt8/s1600/University+of+London_tradition.JPG


9/9

About the Author

GWS Mediais aBristol-based Companyestablished in 2000. We have over ten years track record

producing highly effective Websites, marketing material and campaigns integrated into a

companys overall marketing strategy. GWS offer a full range of Business Media Services, including

Corporate Video,Print Design,PR, and a host of website services including specialistmultilingualwebsites. View ourblogfor internet marketing tips, and other posts of interest to small businesses,

like this article. We specialize in site renewal, search engine promotion, marketing reports and

online reputation management. Ourmultilingual sitesgive a competitive edge to exporters, and our

marketing reports provide critical information about the return on your marketing investment. Our

national and international clients include Mensa International, Nicholl Food Packaging Ltd (a

company with a turnover of 60m which has expanded into Europe and for which we have

provided a multilingual site), the British Cattle Veterinary Association and the National Eye

Research Centre. GWS can offer database-backed sites, ecommerce, flash animation, content

management,accessibility complianceand3D imaging. By visitingour website, you can see details

of some of our current clients, a number of case studies, press reports andtestimonials.
http://www.gwsmedia.com/http://www.gwsmedia.com/http://www.gwsmedia.com/bristol_queen_square.phphttp://www.gwsmedia.com/bristol_queen_square.phphttp://www.gwsmedia.com/bristol_queen_square.phphttp://www.gwsmedia.com/web_site_services.phphttp://www.gwsmedia.com/web_site_services.phphttp://www.gwsmedia.com/marketing_and_promotion.phphttp://www.gwsmedia.com/marketing_and_promotion.phphttp://www.gwsmedia.com/film_and_video.phphttp://www.gwsmedia.com/film_and_video.phphttp://www.gwsmedia.com/stationery_design.phphttp://www.gwsmedia.com/stationery_design.phphttp://www.gwsmedia.com/stationery_design.phphttp://www.gwsmedia.com/pr_and_marketing.phphttp://www.gwsmedia.com/pr_and_marketing.phphttp://www.gwsmedia.com/pr_and_marketing.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://onlinemarketing.gwsmedia.com/http://onlinemarketing.gwsmedia.com/http://onlinemarketing.gwsmedia.com/http://www.gwsmedia.com/web_site_renewal.phphttp://www.gwsmedia.com/web_site_renewal.phphttp://www.gwsmedia.com/seo_organic_search_engine_promotion.phphttp://www.gwsmedia.com/seo_organic_search_engine_promotion.phphttp://www.gwsmedia.com/seo_organic_search_engine_promotion.phphttp://www.gwsmedia.com/web_site_statistics_analysis.phphttp://www.gwsmedia.com/web_site_statistics_analysis.phphttp://www.gwsmedia.com/web_site_statistics_analysis.phphttp://www.gwsmedia.com/online_reputation_management.phphttp://www.gwsmedia.com/online_reputation_management.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/web_site_databases.phphttp://www.gwsmedia.com/web_site_databases.phphttp://www.gwsmedia.com/web_site_ecommerce_selling_online.phphttp://www.gwsmedia.com/web_site_ecommerce_selling_online.phphttp://www.gwsmedia.com/web_site_flash_animation.phphttp://www.gwsmedia.com/web_site_flash_animation.phphttp://www.gwsmedia.com/web_site_accessibility.phphttp://www.gwsmedia.com/web_site_accessibility.phphttp://www.gwsmedia.com/web_site_accessibility.phphttp://www.gwsmedia.com/web_site_graphics.phphttp://www.gwsmedia.com/web_site_graphics.phphttp://www.gwsmedia.com/web_site_graphics.phphttp://www.gwsmedia.com/about_gws.phphttp://www.gwsmedia.com/about_gws.phphttp://www.gwsmedia.com/about_gws.phphttp://www.gwsmedia.com/portfolio.phphttp://www.gwsmedia.com/portfolio.phphttp://www.gwsmedia.com/gws_testimonials.phphttp://www.gwsmedia.com/gws_testimonials.phphttp://www.gwsmedia.com/gws_testimonials.phphttp://www.gwsmedia.com/gws_testimonials.phphttp://www.gwsmedia.com/portfolio.phphttp://www.gwsmedia.com/about_gws.phphttp://www.gwsmedia.com/web_site_graphics.phphttp://www.gwsmedia.com/web_site_accessibility.phphttp://www.gwsmedia.com/web_site_flash_animation.phphttp://www.gwsmedia.com/web_site_ecommerce_selling_online.phphttp://www.gwsmedia.com/web_site_databases.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/online_reputation_management.phphttp://www.gwsmedia.com/web_site_statistics_analysis.phphttp://www.gwsmedia.com/seo_organic_search_engine_promotion.phphttp://www.gwsmedia.com/web_site_renewal.phphttp://onlinemarketing.gwsmedia.com/http://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/multilingual_web_sites.phphttp://www.gwsmedia.com/pr_and_marketing.phphttp://www.gwsmedia.com/stationery_design.phphttp://www.gwsmedia.com/film_and_video.phphttp://www.gwsmedia.com/marketing_and_promotion.phphttp://www.gwsmedia.com/web_site_services.phphttp://www.gwsmedia.com/bristol_queen_square.phphttp://www.gwsmedia.com/

university website design - the home page

Documents