A complete redesign/revamp of the current website design and branding
- Takharii.com is a well-known Pokemon fansite which provides detailed and original articles, guides, lists, and printouts about various aspects of the popular Pokemon-game-franchise.When the owner of the website approached me about a new design for the revamp of their website, I was really happy to help out.
- The owner requested a bright blue and light grey/white colour scheme and a clean and spacious, yet vibrant design. Plus, as it was a Pokemon-fansite, I also had to do some research on common elements which were essential to these types of websites, such as the 'Affiliates' section, which displayed links to similar sites, and the 'Chat' section, which was a chatting system allowing visitors of the site to communicate with each other.I had to find ways to incorporate everything into the layout at once, so before even opening Photoshop, I decided to do a little brainstorming and sketching.
- Sketches allow me to visualise my ideas quickly, and so my initial sketches (pictured above) showed a basic plan of the home page and a separate one for all the other pages.I also began thinking about the types of colours I would use throughout the design. As the target audience of the site were mostly kids and teenagers, I decided to use bright colours whilst balancing it out with large expanses of white and grey. This would provide a fun yet professional look for the site.I used a webapp by Adobe called 'Kuler' to plan out various different colour schemes and see how various colours could work together to evoke different feelings.After quickly explaining my ideas and sketches to the client, we were both happy and on the same page. I was ready to start the design.
- Whilst designing each individual element in Adobe Photoshop, I tried to put meticulous detail into each one. Even the text has a very, very subtle text-shadow, which, although at first glace is barely detectable, actually enhances the reading experience of the visitor.I also used other subtle enhancements to make sure that the design was beautiful, and functional in every aspect.
- When I got up to creating the design for the other pages (besides the home page), I wanted them to have a very clear focus on the content, which is why I removed the introduction area so that the whole header and footer sections are similar shades of blue. This left the whole middle section clear and focused, immediately directing the visitors' attention to that particular area.In my sketches, I originally wanted to have a sidebar on pages like the one shown above, but after deciding that it would distract and detract from the overall clear content experience, I decided not to include it.
- One particular problem I faced was trying to fit all the Affiliate buttons somewhere. I wanted to place them in a position prominent to visitors, but not something which distracted from the overall content and presentation of the page.In the end, I decided to place them in the footer along with the Chat (pictured next to the affiliates above). The Chat was a feature regularly used by many site visitors, and so that way, the Affiliates wouldn't be ignored.Furthermore, the Affiliates' colourful buttons perfectly balance out the logo on the top left corner of the website design, providing a balanced and unifying look.
- Overall, the client was very happy with the design, and numerous visitors also commented in the Chat about liking the new design.
Kimberley (site owner on the site updates, 30/12/11): "Hey look! A shiny new layout! Well yes. As you can see, the site has had a massive layout change. This awesome, awesome layout was designed and coded by the fabulous Nhi Hin. This is definitely the coolest layout this site has ever had, and if I do say so myself, it's currently one of the best-looking sites in the community."