Branding and website for the RVU, a project that tracks the progress of sustainable urban growth in the Vancouver region.
To redesign the RVU with a more modern look, and provide a content management system (CMS)-enabled website for easy updating.
With the RVU's wealth of content (accumulated over 5 years), I knew that clear organization and plenty of white space would be necessary.
1) Graphic Designer — Redesigned their logo, and designed 3 layout options for the website.
2) Web Developer — Developed the site using HTML, CSS, PHP, and Wordpress.
1) Meeting to discuss needs & goals
2) Created 4-part development plan (Design, Develop, Testing, Teaching)
3) Redesigned logo
4) Designed 3 layout options
5) Developed the chosen layout
6) Made video tutorials to teach the client how to manage the site
"Fantastic, Derek! The site [and logo] look great- really beyond my expectations. Great work." — Meg Holden, RVU Project Manager
Visit the site at http://www.rvu.ca
Video Tutorial — Example of a tutorial I made to introduce the client to the many features of the website.
Step 1: Observe the original — The original RVU logo was very large and detailed. Because of its size, it was often cropped or stripped when used in presentations and documents. I wanted to address this problem by creating a logo that was simpler, yet conveyed the same message, and could be resized without losing its meaning.
Step 2: Rebuild — I didn’t want to completely wipe out what was already there, so I just took the most prominent identifier of the original logo (the Harbor Centre tower) and made it the sole graphic element, making the overall logo easier to visually absorb, and then surrounded it with clear, readable type. To tie-in the original logo, I kept the blue/green colors (interchangeable).
Step 3: Final changes — After the client made their choice (the blue version), I made some final changes- I shrunk the tower icon, as it was too dominant, and cleaned up the type. With this new logo, the client can use it at full size, or use the elements (icon, text) separately.
Planning — Before making any layouts, I listed and organized all the elements that the client wanted to have on the site. From this initial mind map, I built a very rough wireframe to get a sense of layout placements.
Wireframe — By creating a simple wireframe, I was able to visualize where the elements would go on the page, enabling me to make decisions regarding user expectations and design consistency. I then created three rough concepts (below), using this as the foundation.
Layout 1: Clean Blocks — I utilized lots of white space and larger type size to make the content more legible for all users, and a muted color scheme to bring the content to the forefront.
Layout 2: The Sheet — A fairly clean and straightforward layout, utilizing a 3-column grid structure to maximize visual organization.
Layout 3: 3-Column Split — With this layout, I wanted to break away from the usual structure and make something a bit more "blue sky." I split the homepage into three sections (Links, Content, Extra), and used a dark background to make the content stand out.
Revisions — After the client made their choice and gave some feedback, I went ahead and began making small changes to the layout, specifically 1) inserting the new version of the logo, 2) making the navigation menu more prominent, and 3) putting more white space around the text for more "breathing room".
