Here are samples of my work. Click on the images to reveal project details and screenshots.
Company Name:Junior Scholars Preschool
Company Website:Junior Scholars Preschool
Screenshots: image 1 - image 2 - image 3
Project Type: Website Design
When I was approached by Junior Scholars Preschool (JSP) to design their website they explained that they wanted their site to have a fun feel to it with a strong "school" theme. They wanted their website to be something enjoyable for visitors to look at and use.
Two elements that I really like from the designer I put together for JSP are the "frame" of the website, and the chalkboard navigation.
When I was first envisioning the design for this website I knew that I had to incorporate a schoolhouse; I just wasn't sure where. I didn't want to just stick it somewhere in the website as a image placement, it needed to be part of the website as a whole. When I found the image that I ended up using, something about the fact that the schoolhouse was flanked by two little bushes made me think of placing it at the very bottom of the site. As I was placing it in the footer area of the website I saw that it looked even better if I made it sit partially outside of the surrounding border. This worked out great because it helped to act as an anchor for the "school" feel, and the breaching of the website border really drew your attention to it.
I came across another great image of the school books with the apple on top. When I saw this I knew I had to use it the same way I used the schoolhouse. This also helped to add some variety to that section of the website.
The chalkboard navigation was really fun to create. The client had a lot of pages that they needed for their website, and I felt that a standard navigation system/style would be too sterile for this kind of company. So, what better way to display navigation on a preschool website? A chalkboard!
The creation of the chalkboard was done using Photoshop. The chalkboard and lettering was done in Photoshop, while the creation of the image map for the navigation (the links) was done using Image Ready. The final result worked out great, and it sits on the page quite nicely.
I had a lot of fun designing the Junior Scholars Preschool website, and JSP was really pleased and happy with the final product that was delivered to them. In the end, isn't that what it's all about? =)
Status: Live
Close
Company Name: Challenging Risk Inc.
Company Website: Challenging Risk Inc.
Screenshots: image 1 - image 2
Project Type: Website ReDesign / Logo Design / Business Card Design / Brochure ReDesign
When Challenging Risk Inc. approached me, they were forging ahead into a new business venture, wanting a fresh look to their website and brochure, and a new design for their logo and business cards. The complete business package and a wonderful challenge for me.
This was a great client from start to finish. Glenn Phyper, the president of the company, had a clear and concise vision of how he wanted each element of this project to look, which helped to establish design boundaries quite early in the process.
The first element that I wanted to establish for this project was the look of the logo. The importance behind this element is because a logo is a company's most immediate and direct means of identification, it's brand, and the logo was what every other design element in this project had to work off of as well. Corporate branding is extremely important, and to be able to have a logo that is easy to incorporate into all aspects of the company's advertising and communication mediums is very important. The final product that I created was simple, sharp and professional, exactly as Glenn envisioned.
The logo had a great web pallette within it as well. The sharp blue background and white lettering quickly brought forward my ideas for the site itself. Using some concepts and layout aspects from the original version of the website that Glenn wanted to keep, I made sure the new design of the site mirrored the thematic elements of the company logo: sharp, simple, and professional. The header maintains the corporate branding of blue and white, while the gray background and navigational design provides a ssmooth and sleek contrast to the predominant white background of the main body of the site.
Challenging Risk Inc. wanted the look and feel of their logo, website, business cards, and brochure to truly represent the professional image of the company. I am very pleased with the final product and the client is as well.
Status: Live
Company Name: Ontario Association of College and University Security Administrators
Company Website: OACUSA
Screenshots: image 1 - image 2 - image 3
Project Type: Website Redesign
For this website I was a subcontractor hired to redesign the website for the Ontario Association of College and University Security Administrators (OACUSA). OACUSA wanted something completely different than what they had been using for the past six to seven years. They wanted a professional design that was sharp, elegant, very corporate, with a sky blue theme.
The website was redesigned using Photoshop, and then coded in HTML, CSS, and some Javascript. The banner was a challenge for me because I not only wanted the sharp and professional aspects to be present, but I also had to ensure both the English and French spelling of the company name were included, all within the spacing confines of the banner itself. By using the Ontario logo as the divider and creating a subtle distinction between both the languages, I felt I still maintained the sharp and professional qualities the client wanted.
Status: OACUSA is using a different design and designer now
Company Name: Imai-Compton Consulting Inc.
Company Website:Imai-Compton Inc.
Screenshots: image 1 - image 2 - image 3 - image 4
Project Type: Website Design
The difference for this site from the others in my portfolio is the inclusion of a portal page. The company, IMAI-COMPTON CONSULTING INC., has two facets; consulting and discovery coaching. The client wanted the portal page to be very simple and user friendly, so that when someone came to the portal page they would quickly realize what is expected of them (make a selection on where you want to go).
From there, the overall direction for the rest of the website design was simplicity, professionalism, clean lines, and a sense of adventure. Prominent use of HTML and CSS, with Photoshop for the banner, truly delivered a final product that captured all of those elements.
The great picture that I used for the banner came from a photographer known by the client. This picture really embraced the adventurous element and was a great inspiration for the colour palette of the site.
Status: Live
Company Name: Good Dog Bakery
Company Website: Good Dog Bakery
Screenshots: image 1 - image 2
Project Type: Website Design / ECommerce
Good Dog Bakery makes all natural, hand-crafted, home-baked dog treats, and is the brain-child of a teenager that has a great outlook and grasp on life. She has been a pleasure to work with and I wish her all the success she deserves; if only I had been this creative when trying to raise money for University.
When first starting out on this project I had been given the following direction from the client: she wanted the site to be warm and friendly, but also have a professional feel to it. In terms of the site as a whole the client wanted a user-friendly feel and simple functionality, nothing too busy that would end up making it look complicated to use. As far as colour scheme I had an open canvass to work with, the only definite aspect that was to be used within the site was a blue gingham pattern. The reason for this selection by the client was that it was a table cloth that she uses when she sells her products at fairs and other events, and she really likes the look of it.
Since this was a website about dog treats I knew I had to have something dog related, and the paw print seemed like the perfect choice. By placing it in the top section of the page it automatically sets the tone for the site, and with its size it draws your attention, at which point you see not only the company name but the product display as well.
The incorporation of the "blue gingham" pattern was something I knew was going to be a bit tricky when the client first expressed her desire for it. The reason for this is because it is a "busy" design element, something that if used as a website background could become quite distracting and even an eye-sore. That being said, it was something that the client really wanted on her website, and as such I knew I had to do my best to get it in there. After playing around with using it as a background, as a border, as only the top or bottom of the page, I realized that if I put all the design concepts together it worked really well; using it as the background of the main area of the site, from top to bottom, but dropping its opacity so that it wasn't so dominant, and placing a white background over top of it to create the border effect. The final result creates the appearance of the blue gingham as it is used by the client in the real world, as a "table cloth" that her "product" rests upon, warm and inviting for all to come and see.
With the design elements completed all I had left to work with was the functionality of the site. Since there were only 4 main pages for the site, I thought it best to go with a horizontal menu system; this would be more accommodating to the amount of content and product display, as well as the e-commerce elements. The menu also lets users know what page they're on by underlining the page name. All in all the client really felt the functionality met her "user-friendly and simple" request.
It was a joy working on this project and the client is extremely happy with the end result.
Note: Currently the website is using an online-order form, but the next phase of development is incorporating a Shopping Cart/PayPal.
Status: Live
Company Name: Law Enforcement Training Academy
Company Website: No longer active
Screenshots: image 1 - image 2
Project Type: Website Design / Logo Design
This was my first official website design / logo design project. The company is a Training Academy for those interested in the law enforcement field. The goal L.E.T.A wanted for their site was something that would convey a very comfortable, yet professional, academic feel. This was achieved with the subtle use of academic themed photos peppered throughout the site. Visitiors to the site were also able to see courses available, as well as register and pay online via paypal.
For the design of the logo I just worked with the direction of the company which was simply "something trophy or torch related, to signify achievement." From this direction I decided to go with just the flame element of the torch as the main visual for the logo, and then within the flames of the torch I saw that I could use one of them as the L for the company acronym L.E.T.A. Thus creating a logo that not only conveys the torch/achievement element for the company but connecting the symbol to the company letters as well.
Status: Site is no longer active
Company Name: The Ribbon Girl
Company Website: The Ribbon Girl
Screenshots: image 1 - image 2
Project Type: Website ReDesign
The Ribbon Girl originally contracted me for general website maintenance (changing/editing photos, adding/deleting text, etc.), but as the business relationship grew between us, as well as their business, there was a strong need for new pages, new images, and ultimately a website redesign.
The framework of the original website was built around a very narrow frame, with a small image based navigation structure. These two areas were my starting point.
The narrow framing of the website was the first thing that had to be addressed. I wouldn't be able to add any more items to the navigation, within the existing width, without it looking quite cramped and claustrophobic. Also, the entire website itself is product driven, and when you have a narrow width you really limit the way you can display images that still allow breathing room for production information. The client wanted to add three new pages to the website, so I opted for the best width that would allow for these additions, yet still keep the website functioning for those viewers that are using 800x600 monitor resolutions (yes, I know, there are still people like that out there). =) With enough visual real-estate available as a result of the expansion, I was then ready to attack the existing navigation.
The original navigation of the website was image based with rollover effects. When you would see the word HOME in the navigation, it wasn't text based, it was an image file with the word HOME in it. And when you moved the mouse over that image the word HOME changed to a different colour to show that it was active. This style of navigation is used all the time, but in this particular case it wasn't appropriate for the client's needs; aside from the fact that the previous designer had used very bloated coding that wasn't necessary in today's day and age to achieve the effect. The client had made it quite clear that there were going to be "on the fly" changes to the website, pages being added/removed, and as such the navigation had to be just as flexible (using image based navigation requires the original image to be changed if edits are required, or the creation of new images if things are to be added). So, to make it all work out nicely, I opted for a text based navigation structure using CSS to cover the styling; this is very practical and extremely easy for any future additions/deletions.
The other aspects of the redesign focused more around the use of a definitive colour scheme, which I derived from the colours of the company logo and used them in all the key areas of the website (navigation, headings, content links, borders, etc.).
The redesign of the website has helped to clearly communicate and reinforce the fun and carefree qualities that The Ribbon Girl brings to its products and customers.
Status: Live
Company Name: Lynn Curry Fine Stationary
Company Website: Lynn Curry Fine Stationery
Screenshots: image 1 - image 2 - image 3
Project Type: Website and Business Card Design
I always love a challenge, especially one that forces me to look at things from a different perspective; this project was definitely one of those.
On the surface it was a pretty straight forward project. Lynn had contacted me looking for a website for her stationery business. She wanted to have an online presence that she could direct her clients to. She wanted to display all the products she had available for sale, but didn't want the website itself to be the vehicle for making those sales.
The palette of the website was to be pink, green and white, and the overall look and feel of the site was to be casual, with large photos and copy. The site was also to contain a gingham pattern.
Lynn had a very clear and specific vision for her website which definitely made my job a heck of a lot easier.
Since I had used a gingham pattern on a previous project (Good Dog Bakery), I knew that I would be using the gingham as a background for the entire website. From there it was a matter of how I would lay out the site to work best with the background and achieve the end result that I knew Lynn would love.
I turned to her products for inspiration and was able to utilize various elements that I thought transfered quite nicely to a website design. A lot of the stationery that Lynn showcases have a very refined and simple quality to them (being able to convey a very definite style in a wonderfully subdued way) and the best way I saw for me to achieve that same feeling was to frame the website. Most websites divide the body from the background through colour variation or lines, what I wanted to do was have a very distinct separation that really drew your attention to the content of the website; just like a frame does for the picture it contains. By keeping the frame white I was able to more effectively use dropshadows to reflect depth and dimension, as well as keeping the overall look simple and relaxed.
Since I had used the pink for the background and the white for the websites frame and content area, I still had to incorporate green into the website design. The header of the website seemed like the next logical choice because it provided a large area to work with. Lynn didn't want a busy header though, she just wanted it to contain her business name "Lynn Curry Fine Stationery", and while that seems simple enough it actually proved a bit challenging. For some reason just using typography against a solid colour wasn't working for me, something was missing, and it was when I turned back to look at her product line that I found the solution; stickers. I noticed that all the stickers had a thick white border around them, so I created the same effect for Lynn's name and it turned out perfect. From there everything else for the overall design and layout fell right into place.
The next challenge was the product pages. Lynn has a very large and diverse product line, and it took a great deal of trial and error to find the best way to display those products, especially since Lynn had indicated that she wanted large photos so that clients could get a really good look at the product. So, in the end, I felt that the use of a hover box was the best fit. A lightbox is the effect that I am using here on my portfolio pages to display the various web pages from my clients websites. The hover box effect works differently in that when you move your mouse over the small image a larger version of the image appears. The reason I went with the hover box is that it helps to keep the user focused on the page, they don't have to navigate anywhere or click on anything, they can browse through the product page and it creates a very seemless and uninterupted experience.
Lynn was very happy with the final product as was I. I've said this before and I will say it again, I am a strong believer in really getting to know my clients. By getting to know them I am able to better understand the goals and visions they have for their website. I am able to see the nuances that I can incorporate into the design which ensure that the website is an extension not only of the business but of the person as well; and lynncurry.ca does just that.
Lynn is a great person with a strong passion for what she does. If you are ever in the need for any stationery you now know where to go. =)
Status: Live
Company Name: Norton Motorcycles (Canada) Ltd.
Company Website: Norton Motorcycles (Canada) Ltd.
Screenshots: image 1 - image 2 - image 3
Project Type: Website Design with E-Commerce Funcationality
Note: A Shopping Cart was created for this page, it will be deployed in Phase 2
Status: Live
