For years I have emulated the look and feel of other websites because my design skills are lacking. I want to be able to make my web-apps look attractive on my own, and would love to hear the experiences you all have had.
I routinely take screenshots of design elements that I like on the web and when brainstorming on some design work I have to do I first check out my small collection.
I do the same thing, and store them in iPhoto. I sometimes take screenshots of an entire page, if I like the layout of the overall thing, but I also frequently just take screenshots of individual page elements: comments, a sidebar, a well done chart, etc.
My iPhoto library is synced to my iPod Touch, so I always have that library of design elements with me.
Good tip. This is something I should be doing but I always neglect, and then when I really need a particular design element, I end up thinking "I once found something suitable, but where was that again..."
- A couple of days before I need to start work on a feature (or a section), I start visualizing what my ideal end result should look like. I tell myself "Imagine there were no constraints and I could build any type of an interface I can". I do this while I walk around, shower, before I go to bed, after I get up etc.
- During this time I critique designs over and over again. I think less about if I can do it and more about will I like it. By now I have an idea of what goes where and what type of UI elements to use and when I browse around I have a clear idea of what to look for.
- When its time to work on it, I but the basic stuff together. If it looks promising then keep building it up part by part until its finished. I play around with it for the day.
- Wake up the day after and check if it still feels okay.
Its funny because the last step is purely to help me reject bad designs. For example, lets say I'm on the fence about this new design. After I'm done working on it, I'm usually tired and feel terrible about scrapping it. So I walk away and comeback next morning and I'm more likely to scrap it now that I feel ready to give it another shot.
I am budgeting to hire a designer, having accepted that I, for once, am not good at something. Graphic design traumatizes me: I have photoshop, gimp, paint.net and inkscape. It will take an act of God to help me figure any of it out.
"having accepted that I, for once, am not good at something"
This is an excellent point. I am in the same boat. At a pinch, I can bluff, hack or brute force my way through pretty much anything to do with programming, sysadmin, databases, whatever. Not as fast as an expert, ugly as hell, but it'll work. Mostly, heh.
This doesn't cut it for graphic design, however. When we're talking about the aesthetic appeal of a web site, it needs a real artist, an aesthete, a professional. It needs to be done well, and it needs to be done right - mashing stuff together is not an option. "Ugly but works" is inapplicable and anyway unacceptable.
Know your limitations. The front end is not the back end, and "good enough" is not good enough. Hire a pro, choose them carefully, and get opinions from non-techies before you commit. If you're serious, nothing else will do.
I have also accepted that I am not good at designing but I will not accept that I cannot get good at it.
In the last couple of months I've come along decently (working in the few spare hours I have!). I recommend that you narrow down to ONE package, IE Photoshop, and then start doing online tutorials.
There is a wonderful collection available to start with, my favorite place are the *tuts.com sites. psdtuts.com or nettuts.com
I have gotten good at following tutorials, but I can't make anything original. This might have been made worse when I visited a designer friend of mine at his work place; if the pro spends a whole day on one logo or photo, what hope do I have? life is too short, and my "friend" is affordable ;-)
I agree that learning a new design application can be done, and is even a worthwhile activity. However, I don’t think that knowing a software suite equates to being good at design.
Knowing the tools is a part of the package, yes, but there is more to design than knowing how to use the software. A designer with an eye for aesthetics and an understanding of both your product and your target users can be a very valuable asset.
An important thing is to try multiple radically different ideas. Oftentimes I'll feel like a design is okay, then try a new one and realize how much I would have regretted staying with the old one. So now I always try to create at least 3-4 different layouts/designs before I settle on using one.
1. Looking at a bunch of nicely designed sites and inspecting the background images and source code so that I can see conceptually how effects are achieved.
2. Using a CSS framework that abstracts many browser-specific idiosyncrasies away.
You might like the more rational grid approach to web design. Once you familiarize yourself with it, you'll start seeing it everywhere... A good place to start is: http://960.gs/
Keep emulating but start studying design principles as well (color theory, composition, typography, UI fundementals, etc.). That way you'll be able to identify the elements in the design and why they work.
I would think that the very most important thing to do in designing a website is to build in usability and user-friendly information architecture, and to have a process to test how well the users like the site for getting their tasks done.
It's hard to ever be happy with a design, at some point it takes too much time to design it yourself if you have a lot of other coding to do. I resort to hiring a designer to just make one and be happy with it.
Either you have the sense of aesthetics or not ... if yes you'll learn & love designing as coding ... if not you'll have to find a very good designer because the user interface matters more and more
even in building a slick, new, innovative startup, you're rarely striking out into purely uncharted, untouched territory. (for example, if you use a framework, a big chunk of your code will look exactly the same as a lot of others out there). odds are you're just taking solutions and concepts that previous people have pioneered and combining them in an new/innovative way, possibly throwing in a unique idea/element or two into the mix.
whats wrong with doing the same with respect to design?
I don't like the example. Facebook is a master of interactive design, and is pushing the envelope of large-scale AJAX design while remaining surprisingly agile. Twitter is just a utility.
Regardless of how you feel about Twitter, the example is still applicable. To anyone who uses both, it is very obvious that the the latest version of the Facebook home page is very much inspired by the Twitter home page. Facebook has certainly added it's own touches to that concept, but it's hard to deny the influence that Twitter has had on Facebook.
With that said, I concur that Facebook does interactive design very well. They are a good source for inspiration for your own applications.
I have a library of over 1000 Web page screenshots in iPhoto (am transitioning to LittleSnapper though) that I use as an inspiration/swipe file. That said, I've often found just "making it up as I go along" to have the best ultimate results. I tend to throw down something really bare and then iteratively spruce it up with inspiration from a variety of sources.
I have a friend who is a designer. I help him with some basic code for clients (newsletters, wordpress installation, etc.) and he does design stuff for me.
(a) Routinely keep an eye open for nice website designs. If I see something I like, I take a screenshot and put a little note on it as not to forget what exactly I liked. So far I have about 70 shots, and this covers a lot of ground.
(b) When sitting down to design the page/site, I'd pick the one that seems to fit the best and then start evolving it by changing elements that don't fit or that I don't like. This is purely subjective process, and it takes a while to converge to a stable point. All sketches are done in Photoshop, no HTML/CSS work at this point, none.
(c) When I have a sketch, I show it to at least 3 people, usually my wife and friends, describe the project and what feelings the design should evoke. Then ask for an overall 3-second impression as well as what "sticks out" or doesn't look visually pleasing. You'd be surprised how much people actually like to critique when asked.
(d) Fix stuff based on the feedback. Repeat (c), preferably with other set of people so that fresh eyes would look at it.
Additionally, I frequently need to decide between multiple (smaller) options, like the fonts, sizes, minor color variations, etc. For these I put together a side by side comparison sketch and simply ask people to tell me their preferences.
The feedback loop is helpful and incredibly important, because after first few sketches I cannot objectively evaluate design anymore and need fresh eyes to look at it.
In short - do not hesitate to start off someone's work. It is an A-OK. Building a portfolio of inspiration pieces is a standard way of kick starting the design. Iterating over the design tend to evolve it quite dramatically and get you to a design that is uniquely your own.
Thirdly - unless you do this professionally, it is a lengthy and sometimes tedious process. It takes me on average 4 to 6 weeks to decide on a general look and feel for the site.
Lastly, here's a post on the subject written by a professional designer. Have a read, it gives a nice view into the process as employed by other people:
Firstly, read about design theory. Designers would love to convince you that what they do is magic, but if you read or even browse through books like "The Art of Color" by Johannes Itten or "The Elements of Typographic Style" you'll have a better understanding for the mechanics of establishing a visual style/rhythm, and to me that's the majority of design...establishing a balanced, consistent rhythm.
Although this is the more hands off approach, if you have a mac, get familiar with RapidWeaver. I actually started learning web design with RapidWeaver and it was great. Since then I moved onto writing my own code and I discovered that using custom code inline with RapidWeaver is a great approach. Rather than rip off other ideas, gain powerful functionality and create your beautiful design.
