New content<\/h2>\n
This is the content we\u2019re planning to release in the new theme by the end of February 2017:<\/p>\n
- \n
- new homepage<\/li>\n
- new top-level showcase pages – research, courses, engage<\/li>\n
- new course detail pages<\/li>\n
- new events pages<\/li>\n
- new search results pages<\/li>\n
- new news pages<\/li>\n
- new error pages (404, 500)<\/li>\n<\/ul>\n
Much of this has been completely rebuilt, or written from scratch following both business needs and user needs. The aim is to convey something of what Kent is about in a way which is engaging to a range of people using the website.<\/p>\n
We’ve also tried to adopt much more of a content-centered approach. What are the stories we want to tell, and how do we want to tell them? We’ve put a lot of time into thinking about what tone to\u00a0adopt for certain pieces of content, and how each page can successfully meet overt user needs (for example my analysing our stats to see what people are trying to get done) while providing\u00a0latent user needs and marketing expectations from the business.<\/p>\n
Design principles<\/h2>\n
Our new theme follows atomic design principles<\/a>, reusing basic design components in a consistent way. It also aims to enhance the user experience through the use of:<\/p>\n
- \n
- space<\/li>\n
- bold, high quality imagery<\/li>\n
- clear typography<\/li>\n
- plain English<\/li>\n
- simple, content-rich layouts<\/li>\n<\/ul>\n
The use of bold imagery has in particular been a key area\u00a0for the redesign. It assumes a level of marketing sophistication not readily\u00a0available on our old website, and web publishing has not previously been particularly visually focused. Shifting this focus is a challenge.<\/p>\n
Page types<\/h2>\n
Our web pages fall into three basic types.<\/p>\n
- \n
- Feature Pages. Navigational pages, primarily visual and relatively low on text. These pages typically act as subsite (e.g. departmental) homepages, or key corporate pages.<\/li>\n
- Content pages. Content Pages are the core content people might typically be looking for, such as finding out how to apply, course details, or a video of a student explaining catering facilities on campus.<\/li>\n
- Navigation Pages. In between the extremes of Feature Pages and Content Pages are a range of Navigation Pages which mix links, images, video, and text to different levels to achieve different business and user needs. However their primary aim is to get people quickly and easily to the content they are interested in.<\/li>\n<\/ol>\n
High-level building blocks<\/h2>\n
All pages are made up of a relatively small number of high-level core building blocks. We’ve tried to keep things as simple as possible. This helps us (we’re simple folk) and it helps the user.\u00a0Too many competing design elements just get in the way of the message, the content,\u00a0and the task someone is trying to do.<\/p>\n
As much as possible we’ve kept asking ourselves whether a design element is really necessary. Does a feature have some use in highlighting something as important or useful? Or does a design feature help make\u00a0things clearer for someone using the site? Quite often there are corporate or business needs to think about too in a design choice.<\/p>\n
Below is a list of key elements that go to make up a page. It’s not fully exhaustive, and there are variations of some of the elements. If you’d like to see a fuller example of our elements take a look at our pattern library<\/a>\u00a0on our beta website.<\/p>\n
Corporate header.<\/h3>\n
Present on every page. This consists of high-level navigation to key corporate pages, search, and key services for staff and students.<\/p>\n
![\"screenshot-2016-12-08-11-44-57\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.44.57-300x26.png\")
<\/a><\/p>\n<\/h3>\n
Local header with menu.<\/h3>\n
The subsite title and associated top-level navigation.<\/p>\n
![\"screenshot-2016-12-08-11-45-51\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.45.51-300x22.png\")
<\/a><\/p>\n<\/h3>\n
Breadcrumb and page title.<\/h3>\n
For Content Pages only.<\/p>\n
![\"screenshot-2016-12-08-11-46-40\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.46.40-300x33.png\")
<\/a><\/p>\n<\/h3>\n
Text panel.<\/h3>\n
This can be many paragraphs long (on Content Pages) or just a few lines (on a Feature Page). Text panels have an optional lead text section at the top of Content Pages and Navigation Pages. The lead text should not be used where the text panel joins two feature panels.<\/p>\n
![\"screenshot-2016-12-08-11-47-09\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.47.09-300x194.png\")
<\/a><\/p>\nContext menu.<\/h3>\n
Primarily for Content Pages as a means of linking to closely related content.<\/p>\n
![\"screenshot-2016-12-08-11-47-55\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.47.55-280x300.png\")
<\/a><\/p>\nFeature panel.<\/h3>\n
A key element across the website, feature panels consist of a full-width image with one of three types of overlay: blue title block, short text, or an editorial panel with several paragraphs of text. Feature panels can also take the form of carousels, news\/events panels, and profile panels (the latter two being a grid of separate elements, but presented in approximately the same dimensions as other feature panels).<\/p>\n
![\"screenshot-2016-12-08-11-48-43\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.48.43-300x130.png\")
<\/a><\/p>\nLink panel.<\/h3>\n
Links panels must always contain a link, but optionally also have a thumbnail image, and associated text. These panels always contain 4 cards in a row (desktop) and can consist of more than one row where needed.<\/p>\n
![\"screenshot-2016-12-08-11-51-10\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.51.10-300x63.png\")
<\/a><\/p>\nSearch results.<\/h3>\n
Results for internal Google search, course search, news or events searches. The same pattern will be extended to other types of search as other services come online.<\/p>\n
![\"screenshot-2016-12-08-11-51-57\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.51.57-300x159.png\")
<\/a><\/p>\nFooter.<\/h3>\n
Again, a non-negotiable corporate element. It contains various subsidiary corporate links, contact details, and other information.<\/p>\n
![\"screenshot-2016-12-08-11-52-31\"](\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2016\/12\/Screenshot-2016-12-08-11.52.31-300x163.png\")
<\/a><\/p>\n