The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Imitation is the sincerest form of (design) flattery

So, I'm somewhat new to CSS based layout and HTML design.  I know the basics, but even with "Bulletproof Web Design" and "CSS Mastery" books... getting things to look nice is enough to pull your hair out!  The browser and layout issues are rough, and right now I don't have enough to pay for a professional designer to design the application I'm working on. 

Given my limited design experience, I've been looking at applications that I like already.  For instance, Wordpress and some of the applications by 37signals, FogBugz etc.  This inevitably means looking at how they get the CSS magic to work so that I can achieve similar layouts. 

Anyone been in this situation.  Having an ugly interface is the kiss of death IMHO, but trying to get things looking "clean" inevitably means drawing on others for what I consider to be elegant designs.  I'm not ripping things off by copying source, however; you can see the influence in what I've done so far. 

Any thoughts?
anonymous coward
Saturday, April 07, 2007
 
 
There's nothing wrong with taking inspiration from sites you admire.  Practically all great works of art are based on previous works; as long as your site doesn't use anything verbatim and is different enough to avoid infringing any copyrights, trademarks, design patents, or any other wonderful new forms of "property" our lawyers have come up with, I can't see how it could be a problem.

If you're worried, though, you could always try using a free template as your base instead.  Something where the license explicitly lets you copy elements.
Iago
Sunday, April 08, 2007
 
 
There's also a reasonably finite number of different ways you can design a web page. The vast majority have some sort of header across the top of the page, navigation links below that or in a column going down the left side, and the main content in the middle, stretching away down and to the right.

There are other ways to arrange page elements, but many people find the alternatives... awkward.

I recommend that you obviously don't cut and paste logos, icons and exotic fonts (unless you have permission to do so) to the extent that it looks like all you did was change the text. Beyond that, I wouldn't stress over the fact that your page sorta kinda vaguely looks like someone else's.
TheDavid
Monday, April 09, 2007
 
 
There's enough free out there that you can put something together that looks decent, but it'll still take some time.

You can get free web site templates at

http://www.openwebdesign.org/
http://www.oswd.org/
http://msdn2.microsoft.com/en-us/asp.net/aa336613.aspx

dhtml/ajax stuff at

http://www.miniajax.com/
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

css techniques at
http://www.glish.com/css/

free stock art at
http://www.flickr.com/groups/stock
http://www.sxc.hu

free stock icons at
http://tutorialblog.org/free-stock-icons-roundup/

Note that some of the "free" stuff requires attribution, linkbacks, etc.
Ben Strackany
Monday, April 09, 2007
 
 
There is a difference between inspiration and imitation.

Look at other sites for inspiration.  Try to stay on the inspiration side more than imitation though.  And certainly don't steal CSS files, html, animated gifs, graphic files, icons, etc.  This means don't cut and paste code, copy color palates, or download files to use in your website (unless author allows). 

Here's some examples of sites that are similar in design but are not copies of each other (e.g. the colors are similar, but not exactly the same, no stolen text, css, images, etc).  While not necesarilly inspired by one or another, they demonstrate that there are best-practices in layout, color coordination, sizing, etc. that make up the discipline of "design". 

See:
http://www.google.com/ and http://www.live.com/?searchonly=true&mkt=en-US for the shared convention of simplicity.

http://www.freshbooks.com/pricing.php and http://www.basecamphq.com/signup for similar eye-catching callouts: edge-to-edge yellow background, top and bottom border, and giant black lettering under a site navigation menu that crosses the top of the screen.

http://www.sas.com/ and http://www.ibm.com/ for similar layout:  Both have logo in top left, search box top right, followed by horizontal home|products|services|support menu below that, followed by colorful photo backdrop and customer success story below that, then product and site  links, ending with privacy and contact footnotes at the bottom.

When you follow good design principles you are certain to end up looking somewhat like someone else that also followed principles of good design.
Scott Meade Send private email
Monday, April 09, 2007
 
 
Another thought.  Read good books on website and application design.  Don't just know that you like the way others' sites look, but know why they look good.  Read design books and understand the principles of spacing, layout, color, fonts, sizing, navigation, and user experience.  You'll be a better designer and as a bonus you won't feel like you are imitating as much as you are leveraging good design principles.
Scott Meade Send private email
Monday, April 09, 2007
 
 
one of my favorite tools to learn CSS has to be 'view source'...
anon
Thursday, April 12, 2007
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz