Tips for designing big websites
Posted on 15 June, 2009 at 12:46 PM
There are already 15 Comments
About the Show
David and Marc grew up designing fairly large websites which had back ends that were aimed at the masses. From their experience in this area they have learnt quite a bit through trial and error. Along with that they are also delving into developing templates for anyone to buy and have picked up a few pointers along the way.
In todays show they share with you some of the things that they have learnt.
Here is a run down of some of the things we have learnt:
Design first, then Code
First plan your wireframes, then create the wireframe, then select your colours, then skin the design of all your parent pages in photoshop before jumping to HTML (home page, post page, sub page, admin page). This way you will determine as many of the dynamic and generic styles as possible.
Generic Styles
Try and keep as many of your items as generic as possible, especially link and header styles. Also remember to use a CSS reset whenever you create large sites (even though thats a standard thing these days its REALLY important with large sites).
Avoid Evolution as much as Possible
Make sure that when you start your design that it doesn't evolve into something different when you are finished. If this happens you will have to go back to the beginning and change the files you desinged first... that takes time and costs huge money.
Cut down on Images
Try and create images that can be reused across a site. For example, if you are going to use rounded corner containers make sure that you can use them for any size div.
Use Sprites
If you are going to use images for your links and headers try and use sprites as much as possible, be sure that you plan your sprites before going to HTML so that you don't land up with redundent/muddled sprites. Make sure that each sprite is used consistently, you don't want to use one element from two different sprites for one page.
Create Container Divs
By creating container divs you will cut down on hacking your style sheet. The container divs will allow you to move elements around quickly and easily without creating a new style.
Be Dynamic
Try to create reusable styles wherever possible, the key is to be as dynamic as possible without getting too clever. This is a common subject in any design but its most important that styles are not repeated through your CSS.
How do we recommend you go about this? What we do is work our way backwards through the design. Start with the inside and work your way out, that way you cover all the link colours, header sizes, border colours, table sizes, column widths div orders etc. By being dynamic you will eradicate redundancy and cut down on lines of code.
Do you have any tips that you would like to share? Feel free to drop us a comment on this massive subject!
Related Shows
- (5) Episode 190 - Develop without an Ego
- (1) Episode 189 - Using Inspiration Effectively
- (5) Episode 187 - Design with the Lights On
- (8) Episode 186 - Apples and Oranges
- (2) Episode 185 - Design like a Dictator
User Comments
StewWest 15 Jun, 2009 13:26:00 PM
Once again, thanks oaks and oaket behind the scenes!
Sometimes I wonder how ppl do stuff, thinking that I must be doing this the long way, especially for larger sites. It's good to know that we're not alone.
Rock on
David Perel 15 Jun, 2009 13:31:22 PM
@Craig - Dude there is huge satisfaction when you realise that your planning came out well. Nothing better than a lightweight style sheet.
@Stew - We used to rush through to the html phase and always wondered why things got longer and more difficult to create... its a mission but its worth it. Glad to see you are already onto this.
Richard Darell 15 Jun, 2009 13:35:38 PM
Always great to see someone knows the trade and are dedicated to it. You guys are simply and ultimately inspiring. You're great promotors and it shows in your dedication that you love what you do. Keep up the great work.
Never back down from a challange. Challanges is what makes us progress into the fresh. :)
Looking forward to the next video blog!
Thanks!
David Perel 15 Jun, 2009 13:48:23 PM
@Richard - The competitive spirit in us means it's impossible to back down :P We are always humbled by your comments bro, very much appreciated.
To anyone who read this post, I forgot to add something in there (will do so later): Create a layout folder for all your layout images, don't muddle test-images/avatars/post-images with your layout. That way its easy to swap layout files without affecting the actual content.
Karen 15 Jun, 2009 15:46:13 PM
Thanks guys. Very informative FtC, especially for a newbie like myself.
Keep up the awesome posts.
Heather Feimster 15 Jun, 2009 17:25:20 PM
Great info guys! I don't have much time to check sites regularly just for information, but yours is an exception.
For someone with more print design experience, tips on the process for web design is VERY helpful - planning is key to not just clean design but staying on budget!
BTW - love how you have the text version of your videos - SO great for tagging.
Rob MacKay 15 Jun, 2009 17:57:09 PM
So true as always guys... did you get up from the couch at the end of that or just have a sleep? lol
@Danh - have a look www.from-the-couch.com/post.cfm/title/how-to-use-css-sprites there :)
Casey Hald 15 Jun, 2009 20:52:06 PM
Great advice! I am currently designing a huge website for a company I am working for, and this is going to help a lot in the process.
Thanks for sharing!
-Casey Hald
kyle steed 15 Jun, 2009 21:47:25 PM
Another solid video.
Planning is such an important, and sadly overlooked, part of the design process. Nothing can beat the classic paper pen, or a whiteboard, and a lot of companies are only hurting themselves when they ask their designers to turn out a website in a matter of days/weeks instead of months. I should know, because I've been assigned these very tasks myself.
I really like all the effort you put in to this post with breaking down what you guys have learnt along the way. This is truly valuable info, for a newbie or an oldie.
Thanks.
Bobby C 15 Jun, 2009 22:02:19 PM
Lack of planning always shows up in my style sheets. They tend to get very heavy. I'm learning though, plan, plan, plan! The results have a lasting effect which you will always be thankful for in the long run on updates and redsigns.
Thanks for the good post!
meredith 16 Jun, 2009 15:47:20 PM
@David - yes really.
I would also like to add the I recently started a brand new job as a web designer for a company with 5 huge static websites, 3 of which are "connected" to each other. So this vid came at the perfect time for me because I am starting a total redesign/redevelopment of the whole shebang.
I have been using a (wp) plugin called CSV importer (wordpress.org/extend/plugins/csv-importer/), so I can gather all the content from the current sites into one huge spreadsheet, add custom fields, categories, tags, etc., and and import them as CSV. ITS SO EASY! Especially for a big site, and especially since the content is hardly ever (err, never) truly nailed down before a design begins. As content is added, or changed, you can delete all the posts and reimport the CSV.
Another thing - I have worked two different websites with a print designer, and am just finishing up one of them now. Really great designer, really bad client. Next time I work with her, I will make her watch this video. Well maybe not since she might read the comments :)
Drop a Comment
2010 © Obox Design
From the Couch is powered by OCMX Live
Contact us on +27 21 791 0292
Craig Farrall 15 Jun, 2009 13:15:27 PM
Another great post.
I have that problem, once I have an idea in mind, or doing a clients website, I just open Photoshop straight away and just design away, and once happy I then code the website, and I just leave the planning stage out, but it always comes back to bite you, so you definately have to plan before, but its the boring and tedius part nobody wants to do.