I was contracted by CGI Communications to design a website for their client “Hilton Community Childcare, Inc.”. The client chose a theme named “Riverview”. I was given instructions to use my best judgement for attractive, user friendly interface for client's photo gallery. Keep the main features of the template intact. However, feel free to customize other areas of the layout as I see fit so that the final product would not look like a “template website”. The project was given one week to complete, which I delivered one day early.
Responsibilities included: Design a 4 page website using the given theme template. Create company logo from given sample. Include design notes, photos, font files, and any photoshop and illustrator files created. After altering HTML/CSS, upload the entire site along with the extra content to a dropbox account and provide a link for access.Before & After
I started out this project by looking over the themes templete. My goal was to find ways to improve the layout and design of the theme to enhance the users experience. Once I get a solid concept in my head, I begin to draw out a rough sketch (wireframe) of my idea. I like to use long post-it notes, mainly because they stick to any surface for easy viewing, but also because they usually fit web layouts very well too. I use one note for each page or several notes stuck together for each sections (div’s) of the page. Once I am satisfied with the rough layouts, I move onto creating low fidelity wireframes for the client if necessary.
Although it was not necessary to create a low fidelity wireframe for this project, I felt it would be useful to demonstrate my skills in doing so for my portfolio. After finishing a sample wireframe for my site, I turned my attention towards creating their logo in Illustrator from a photo that I received. One of my favorite techniques I use to recreate an exact replica of any image, is use the original image as my base layer and set it to 50% density. This way I can set another layer over it and begin the process of creating it piece by piece while still being able to see the original.
The client's original photo had an orange background and all the the stars and text were done in black. Since their main motto is “Taking care of tomorrow’s stars today” I felt it was important to focus on the stars. I decided to color them gold, which played well with their capital “C’s” which resembled crescent moons. I also analyzed their logo to find out what font they used. It turns out they were using “Apache URW Regular” which I did not own, so I purchased it. Making it quicker to finish their design.
Now I focused on creating their service icons by using illustrator for the basic shapes and photoshop for the photos to put behind them. Once I created one template, it was quick and easy to create other copies. Before you know it I had all the icons and logos done!
Here is a sample style sheet I would have presented to the client after creating the low fidelity wireframes. Even Though I did not have a chance to actually meet with the clients and get their feedback on the sample sheet, I felt it would be a bonus for them to have on record the colors and font styles I chose for the site.
After completing all the website’s assets, it was time to get cracking on coding the site. The template uses Bootstrap for its framework. Making it quick and easy to center and divide up objects on the page. Once all the layouts were done, I went the extra mile to insure the site looked great on all types of devices. Using “Google's Dev’s Tool” I tested the site virtually on several different devices. Since I also own my own server, I tested it on several actual devices and added media queries to give the site a seamless look as shown on the mobile example here.