OVERALL STYLE AND TONE OVERALL STYLE AND TONE

UEA’s visual style for websites underlines the bold, confident and direct tone of our brand.

The overall style is clean and unfussy – letting content, instead of heavy design elements, take the lead.

We use an element of white space in designs to avoid heaviness.

UEA Website Examples

Screenshot of UEA Portal homepage

 

In line with our print designs, we prioritise flat design, clean layouts and strong typographic treatments.

 

UEA Print text examples

Rollovers Rollovers

Rollovers and other ‘tactile’ interactive elements are used to add warmth and interest.

Example of roll over text

Animation Animation

Where pages use animation it is uni-directional, fast (and therefore unobtrusive) and smooth. Complex, multi-stage transitions and animations are never used on UEA websites.

If you are considering using animation, review “Google Material Design” guidance on movement and apply it to the UEA brand style.

Example of digital animation

Effects Effects

We do not use bevels, drop shadows, gradients or textured backdrops to pages, content areas or any other site design element.

Example of digital effects

Line work Line work

Line work can be used sparingly to contain or separate areas of designs – however this should be used to frame areas or text only.

Do not use line work excessively on pages – restrict it to specific and contained elements so it’s purpose as a framing device is retained.

Screen shot of UEA's navigation menu

Image washes Image washes

Image washes and out of focus images can be as used as backgrounds to draw the eye on pages or to add drama and interest – provided legibility isn’t compromised.

Image backgrounds are never used for copy block areas on UEA websites.

Examples of image washes

Mobile Mobile

For mobile devices and responsive pages we simplify layouts and put a focus on legibility and usability over everything else. Mobile design for UEA should start with considering user experience and interaction elements, rather than simply making desktop designs smaller.

We use overlays and animated elements in mobile to give breathing room for menus and points of interaction.

Examples of UEA site on mobile

Still not sure? Still not sure?

Contact digital@uea.ac.uk if you need help with a design brief or reviewing designs.

Identity Elements

 

 

Third Party Websites

 

 

Coming Together