IN THE WORKS: Youth Net Hamilton Website (Part 1 - Introduction)

In this blog, I provide some "behind the scene" looks at various cartooning and multimedia related projects that I'm currently working on (or have recently completed). My intentions here are to offer a few insights, however small, to aspiring young cartoonists and/or designers who may be interested in these sorts of things. For those projects in development, I've decided to title my posts "IN THE WORKS."

One project that I'm currently working on is designing a new website for Youth Net Hamilton, a community-based organization of youth and adults that promotes the mental health and well-being of youth. My client is affiliated with The City of Hamilton's Public Health Services and is also part of the larger "Youth Net" network that literally spans across Canada through cities such as Ottawa, Quebec, Toronto, and Vancouver.

The target audience for Youth Net Hamilton's website includes health professionals, teachers, parents, and (most importantly) youth -- especially youth who may either be looking for help, or looking to help others their own age. With all of that in mind, our project goal has been to design a website that is clean, easy to navigate, but also fun & welcoming.

Software-wise, I'm primarily using Macromedia Flash MX and Adobe Photoshop to design the website's user interface. Without getting too boring here with a bunch of techno-babble, what follows are a few highlights of the new design along with some web design tips & tricks for beginners ...

Colours, Fonts, and Resolution ...

As a web designer, one important thing that I try to keep in mind is how a web page looks on different computer monitors at different resolutions. Why? Because I don't know what sort of computer a visitor will be using to view my client's website. For example, a graphic that looks nice and large at 800x600 resolution becomes very tiny at 1280x1024.

After meeting with my client to discuss their website needs, we agreed to keep the colours and fonts consistent with the ones they're currently using on all of their printed promotional material. For example, the decorative “Jokerman” font, as seen in the following snapshot ...

Now, one of the nice things about a webpage designed in Macromedia Flash is its ability to be scaled proportionally within an Internet browser so that it fills the "entire" window. In other words, the bigger the window space, the bigger the webpage. That said, the text and graphics also need to be readable when scaled smaller. To help ensure this, one design trick is to assign colours that help the text "pop" from the background. Light on dark (or vice versa) is a good place to start. Another trick that may seem obvious, but is sometimes overlooked, is to test the design at different resolutions!

Youth Net Hamilton's new website will be compatible with resolutions as low as 800x600 on most CRT monitors, and upwards of 1280x1024 on an LCD screen.

Navigation Features ...

Designing a website in Macromedia Flash provides you with the opportunity to create a unique user interface that encourages visitors to explore (or play with) your website. This is great if you'd like to create a "game" experience, but in our fast-paced world of high-speed Internet and ADHD, most users need to find information ... FAST!

With that in mind, I'm designing the Youth Net Hamilton website so that it can be navigated in a variety of ways, however, all of these methods are common to most other websites. This means that a visitor doesn't need to waste time learning "how" to navigate. They only need to figure out "where" the links take them.

The primary purpose of my client's website is to provide information. Since they have a lot of important information to provide, this content has been divided into categories/sections. Keywords are written in blue to indicate links between related sections. When a visitor moves their mouse over a keyword, it is highlighted by a lighter blue rectangle, as shown in the above snapshot.

Initially, we were going to provide a text link for each section along a top navigation bar. However, after a few additional sections were created, these text links crowded the overall page layout. And so, after considering some other solutions, I designed an icon navigation bar instead.

The following snapshot shows a few of the icons that a visitor can click on to navigate by. Each icon's image (courtesy of the fonts "Webdings" and "Wingdings") relates to its corresponding section's title. The section that is currently displayed is highlighted with a selection box.

Bells and Whistles ...

The "Q-Wiki Fax" feature (shown above) was a suggestion I made after seeing my client's long list of facts/statistics on the health and well-being of youth. There were too many facts for us to list them all on the home page, but they seemed too important not to include. The "Q-Wiki Fax" feature is located along the bottom of the user interface and displays a randomly selected fact when a person visits the Youth Net Hamilton website (Made possible with a little bit of Flash Action Script programming). A visitor can click on the current "Q-Wiki Fax" to view another, or click on the "Facts" navigation icon to view the complete list.

As a web designer, I try to find a balance between the fancy bells & whistles (ex. animation) that make a website visually attractive while still meeting the basic needs of my client. In this case, I'm quite happy with the results.

But getting back to the navigation icons ... How does a visitor know what each one means?

As a visitor rolls their mouse over each navigation icon, the name of the highlighted section appears in a cartoon thought bubble. Some of you are probably wondering, "Why a cartoon thought bubble?" ... Well, when my client first approached me with their project requirements, they asked if I'd be able to design some cartoon characters to decorate the website ... Needless to say, being able to combine my love of cartooning with web designing has made this particular project quite enjoyable!

The cartoon characters are being designed to reflect youth diversity. Like the "Q-Wiki Fax" feature, a character will be randomly selected and displayed for each section visited. The cartoon thought bubbles add a little bit of "interactivity" between the characters and the site's visitors.

Unfortunately, the character designs are currently classified as "top secret" -- but if you visit again soon, you can see their development! For now, please enjoy the following sneak peak of the website's complete user interface ...

If you have any questions or comments about this posting, please feel free to submit it using the "comments" link below, or you can contact me privately via e-mail by using the address provided on my contact page.

Stay TOONed!

- Mike Cope

Click to Continue ...
IN THE WORKS: Youth Net Hamilton Website
(Part 2 - Character Designs)