New Website Launched: Bike and the Like
I don't do much freelance work any more. Mainly because work + family + gaming habit + blog doesn't leave time for too much else. However, I do have a couple of clients and I recently redesigned the website for one of them — Bike and the Like.
Bike and the Like home page
I was pretty happy how it turned out, although I'm not much of a graphic designer and so the header could do with a proper logo.
To save development time, I used a pre-paid template as a framework for the site. However, I was surprised to find that in the end I changed the design of the site so much it really would have been just as efficient to build the site from scratch.
I also used @font-face for the first time with a free font from Font Squirrel for the headings. It was really easy to implement, although if I was building more sites I would be more likely to use Typekit in the future as it has a greater range of fonts to choose from.
Posted on: April 8, 2010 | 15 Comments
Recent Entries in "Real Life"
- Email Header Design Showcase (6)
- Use Icon Fonts to Create Lightweight, Flexible Icons (6)
- 10 Ways to Repackage Your Content For More Links and Exposure (4)
- When Features are Commoditized its the User Experience that Counts (1)
- What is the Best Email Width? (10)
- Questions to Ask When Reviewing a Design (10)
- A Cautionary Tale from the Target.com Redesign (4)
- Review of Notable — Web Design Feeback Tool (9)
- 11 Retail Emails Web Designers Should Subscribe To (22)
- 2010 Retail Theft Survey Infographic (2)
- CSS Rounded Corners 'Roundup' (82)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (40)
- Blog Comment Form Design Showcase (15)
- Blog Comment Design Showcase (36)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- How to Style 'Author' Comments Differently on Your Blog (9)
- How to Style an A to Z Index with CSS (5)
- Designing Interfaces: Patterns for Effective Interaction Design
- Blog Design Solutions
- Designing Web Usability
- 101 Essential CSS Tips, Tricks, & Hacks
- Web Standards Solutions
- Web ReDesign 2.0: Workflow that Works
- The Zen of CSS Design
- Don't Make Me Think
- Bulletproof Web Design
- DOM Scripting
- View more recommended reading…
15 Comments Posted
It's a nice template mate. I like the fonts you've used a lot, cool website you've created, kudos! :)
1. Posted by WebCreationUK on April 09, 2010
Yep i have been wondering when to jump onto using webfonts. Have dabbled with Sifr and @fontface but have never kept using them.
One thing i noticed on your template was the right column. It looks like the main column is too wide and has pushed it outside the container to the right. I see its on the screenshot so its obviously intended to look like this.
Its just a bit weird.
2. Posted by David on April 09, 2010
David — yes, that was intentional. I liked the way it broke out of the grid and made the layout just a little less conventional. It's a little disappointing that you thought it 'looked weird.' Oh well. ;-)
3. Posted by Christian Watson on April 09, 2010
Really nice web site mate, should be very proud! Keep up the good work.
4. Posted by Website Design Surrey on April 09, 2010
great design. and yes, that gaming habit takes a lot of time from me too. I dont call it a gaming habit however. I call it a stress reliever.
5. Posted by Dallas Web Design on April 10, 2010
Hello Chris,
Nice layout by the way, clean and goes inline with the website.
A quick note, the header image is relatively a big PNG file (182 KB). In my honest opinion, i think you may use JPG which will bring it down dramatically in size while keeping almost the same look.
Thank you for the @font-face tip, I may use it in a future project pretty soon :)
6. Posted by Ayman Aboulnasr on April 10, 2010
Looks great........good job
7. Posted by Wvector on April 13, 2010
Ayman — good catch; it's now on my to-do list to fix.
8. Posted by Christian Watson on April 13, 2010
Nice work with the web fonts. It's something I'm yet to dable in!
9. Posted by Evan Skuthorpe on April 15, 2010
Typography on the web is finally becoming better! Awesome. How about cufon for font replacement, did you look into that?
10. Posted by Chris Peterson on April 15, 2010
Chris — I've used Cufon before, but it's essentially a hack. I'd rather use @font-face, which is how non-standard web fonts are supposed to be implemented.
11. Posted by Christian Watson on April 18, 2010
very nice template theme its looking professional as well.
i like that..
12. Posted by rusticraj on April 22, 2010
good work, very nice web site ;-) i like it
13. Posted by web design firenze on April 29, 2010
Hi all,
i think you may use JPG which will bring it down dramatically in size while keeping almost the same look.
=============================
avelino
Home Design
14. Posted by avelino lobo on May 05, 2010
Nice website and design. The image size is too big (head png).
15. Posted by Censis on May 16, 2010