Www.le.ac.uk Plone Redesign Michelle Heap Senior Multimedia Designer (Web) IT Services University of Leicester.

Slides:



Advertisements
Similar presentations
Announcement Ben Ellis – office hours canceled tonight.
Advertisements

ECA 228 Internet/Intranet Design I
Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can.
Page Design Scroll zone Data Tables Screen Readers
© Mark E. Damon - All Rights Reserved. Custom Color is taking more than one hue of a color and giving it a name.
GraduateCareersScotland.com. GradauteCareersScotland.com Content migration & revision Agcasscotland.org.uk graduatecareersscotland.com Content reorganised.
15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens.
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2: Planning.
Principles of Web Design 5th Edition
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,
Tinonee Manning River (n.d.). Source: Midcoast Property Central.
PDFs & Dorsetforyou.com Laura Hall Senior Website Officer
Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Use a Large Bold Type for the Main Title Use Smaller Type for the Subtitle. Above type is 96 pt, this type is 66 pt Make Authors’ names smaller. This is.
© 2012 Boise State University1 WordPress Training February 14, 2013.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Layouts with CSS Web Design – Section 4-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
2015 Webmaster Training. 1.Site Navigation RWD Structure Sharing content areas 2.Dynamic Content Updates News/Blog Containers Calendars – Priority, Standard.
Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.
An Ebiquity company How to use the new Power Point template Steps for creating a better presentation.
© 2012 Boise State University1 WordPress Training February 14, 2013.
Web-designWeb-design. Web design What is it? Web-design features Before…
Actual Building the Pages Tables. Using Table Elements  To build effective page templates, you must be familiar with the HTML table elements and attributes.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Objective To create a professional, affordable, and easy to use website Create a user friendly interface with accessibility and effortless navigation.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Website Development with Dreamweaver
Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.
Using Dreamweaver Web Page Design. Introduction to Web Page Design Developing a New Site Building a web site involves creating individual pages and linking.
Page Layout with CSS Learning Web Design: Chapter 16.
Review of last session Add text to your website Add text to your website Title Title Paragraph Paragraph Title and paragraph Title and paragraph Add photographs.
Introduction to Web Page Design. General Design Tips.
HTML Concepts and Techniques Fifth Edition Chapter 6 Using Frames in a Web Site.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.
CH. 7 Web Page Design –Page Layout with Frames Mr. Ursone.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
Microsoft Access 2000 Presentation 3 Creating Databases Part II (Creating Forms)
Principles of effective web design NOTES Flo Morris-Duffin.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.
Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.
Creating Google Sites Laura Assem, Director of Technology.
Barclays User Interface 24 th July 2013 UX Design: Bill Fogarty, John Connolly, Stephen Labanyi Pheonix Product: John Breen, Thomas Kuriakose Presentation.
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
Web Design Principles. Designing a Website Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location.
BASIC EDITING Word VIEW OPTIONS Read Mode Print Layout Web Outline Draft.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
Creating a Presentation
Create and edit web pages 4
Concepts for fluid layout
Tables and Frames.
HTML and Website Development
Web-design.
Web Technologies for Business
Consult America Technology Consulting Services
Setting up the Write Up Template
Web Design Principles.
Title of presentation | Presentation by [Enter details in 'Header & Footer' field 18/05/2019.
Concepts for fluid layout
Designing Web Site Layout Using Fireworks
Presentation transcript:

Plone Redesign Michelle Heap Senior Multimedia Designer (Web) IT Services University of Leicester

Why redesign the website? Websites date and design evolves Consistent quality across the Universitys website Attract more visitors and potential students Communicate with the audience more effectively Make the site easier to use, help the audience find what they want

Fixed width design... All sites will become fixed width: Fluid layout - the webpage's actual width is determined by the visitor's monitor resolution and how large their browser window is set Fixed layout - have a "fixed" number of pixels determining the width of the site

Why fixed width? The website owner has more control over the layout of their site. It will look the same to all who visit Multiple style sheets and graphics arent required to cater for different resolutions – e.g. banner images The main disadvantage is scrolling for users with monitor/browser settings smaller than the site's minimum width (800 x 600 only 1.5% of visitors last year)

1024 x 768

1280 x 1024

Who will be affected? All magazines – Alumni, Business, Research, Staff, Study with us Information pages – maps, indexes, directories etc Office and Service sites Departmental, College, Project, Institution, Group and Centre sites (all use same template at the moment)... everyone in Plone

Redesign highlights... New position for the title (H1) The entire width of the banner image will be visible. All departments will need a banner image/s Default orange and grey will become lagoon (blue) only search in current section will be replaced by advanced search

Redesign highlights... Streamlined table options – new colours that reflect the visual identity colour palette and a reduction in available finishes (no shadow or glossy options) Tables used for layout (no borders) will have a key line visible in edit mode More colours will be available in the visual identity colour palette. Plus 50% versions of the more popular colour schemes

Possible problems... Banner images with content concentrated in the left-hand might be covered by the new location for the H1 - departmental heading All banner graphics have been resized but I might not have caught them all

Possible problems... Image sizes - in the central column (three columns) is 540px, anything any larger will be hidden. Portlet images will automatically resize Issues with readability of text due to the lack of contrast

How we can help... Make the most of your content – formatting and layout, banner images, image slideshows, portlet usage etc Skins – match with printed material Image library & Streaming Media Service Brand identity, design guidance and usability for anything screen-based