Showing posts with label Website Design Tricks. Show all posts
Showing posts with label Website Design Tricks. Show all posts

Wednesday, 3 April 2013

Ideas, Tricks and Techniques for Website Design Toolkits

As essential as details and interface design are, it’s the pleased sensation of designing something that simply looks amazing that keeps us going during those times when the innovative well is dry, when you have stared at a blank canvas for hours, when you have stored a number of effort.psd’s, and when you are fed up of design. It’s because you know that when you have that completed, refined, veritable work of art up on your screen, and you have switched Photoshop into complete screen mode and you are looking at it from different perspectives around the room, and you are basking in the wonder of your completely positioned pixels, you just know that this is the biggest career in the world!

1 – Don’t be Satisfied with 1 Iteration

When designing a website for a customer you often have to provide a couple of different design ideas. When you feel like you have gotten it right initially, it’s fairly frustrating to have to dredge up another edition which you are fairly sure perform it out of Photoshop. But eventually I’ve come to comprehend that it’s actually a wise decision to create more than one edition, no issue how satisfied you are with the first one.

Whether its several versions of the same design, or several designs, in most cases, a longer period does seem to get a better result. That is not to say that you should keep including to a design, actually it’s often better to take factors away. If you are doing several design ideas, you can sometimes successfully combine the best components of one design into another.

Technique: PSD Snapshots

Photoshop has a cool feature that lets you make snapshots of a point in your document’s history. Once you create a snapshot you can flip back and forth between different snapshots as well as the first history point and the most recent 20 or so steps. What this means is you can keep taking snapshots and then trying out new lines of thought to see where they take you. But BEWARE, snapshots aren’t saved when you save a file, so you have to go through individually and save each snapshot at the end of the day.

Photoshop has an awesome feature that allows you create snapshots of a factor in your document’s record. Once you create a snapshots you can turn returning and forth between different snapshots as well as the first record factor and the latest 20 or so actions. What this implies are you can keep getting snapshots and then trying out new collections of thoughts to see where they take you. But BEWARE, snapshots are not stored when you save a file, so you have to go through independently and save each snapshots at the end of the day.

Here’s how you take a snapshot:

  1.  Open a PSD file you’ve been working on
  2.  Make a couple of changes
  3.  Open the History Palette (Window > History)
  4.  Down the bottom of the History Palette click the tiny camera icon
  5.  And you should now have a snapshot! You can now flick between the snapshot and the first history screen

2 – Learn a Library of Styles to Draw On

As I’ve stated earlier it’s never a wise decision to just hop on the bandwagon of the newest design trends and use certain designs blindly. However, it’s completely excellent to use a certain style when it’s appropriate. So if you are designing a website that benefits a awesome, fresh web 2.0 look, then it does not mean you should prevent doing so, just because that happens to be stylish at enough time. In the same way if you are designing a website that benefits an awesome grubby, troubled design, then if the shoes suits, use it!

So with this in thoughts, it allows to have a collection of styles to sketch on. When you are sketching a empty when beginning a new project, it can sometimes be excellent just to select from a predetermined stylistic option and then let that information you. Certainly you will wind up with something completely different to anything you have designed before, and it’ll at least help get you began.

But be very careful of using the incorrect style just because it looks awesome, and not because it is appropriate for the client / message / content. The only remedy to doing this is to know and have a lot of different design styles. How do you "learn" design styles? Well you can begin by monitoring and resembling them. I really like browsing through galleries of excellent web design and taking in visible concepts, seeing what kinds of fonts perform with what kinds of looks, and usually learning other people’s techniques. When it comes a chance to make my own designs, that detail is in my head somewhere, but when it comes out it has the exclusive perspective of the project I’m operating on as well as my own suggestions.

3 – Throw Objects around to Look for Happy Accidents

Some of the best designs I’ve ever effort on were caused by what a co-worker of mine own once known as "happy accidents". You know when you switch off a layer, or involuntarily paste in the incorrect representation, or move the Hue slider too far, and all of a rapid you look at your screen and think "OMG this is design gold!"

I think we all wish we could produce awesome design concepts on cue, but okay, sometimes you go to the container and you are operating on vacant. Happy accidents will often get started with your creativity, so it is practical to not only run with them when they occur, but to motivate them by messing about. I sometimes just move shapes around randomly, try out different colors or do other "random" factors to see if I can run into something I never thought of.

4 – Create a Theme Around a Visual Element

Something that I find works well, especially on websites with less natural visible design (think business (corporate) sites) is to make a play on some visual factors. For example you might use dotted lines in your design, and then you could reflection that theme in your menu, in horizontal separators, in picture collages, blueprints, as summary sentences and so on. You will find loads of different visual elements you might choose up and use as a theme, for example include shapes, corner types like curves or diagonals, patterns, text characters like brackets, and so on.

Of course you have to discover stability between a subtle mirroring and going over the top, but it’s a useful strategy to tie a website together into a regular theme – especially as I say if you do not have much else to perform with!

5 – Clean Up Every Pixel

I’m rather attached to saying that web style is all about the pixels. Visiters to the sites you design will be looking at your work up near and individual, often with tired eyes and itchy mouse fingers. It’s important to look after every pixel on your web page and neaten and improve and clean so that your design is sharp and obvious.

This indicates guaranteeing your text is well spaced both between letters and between lines, that your sides are pointed and pixel ideal, that graphics are grinded (but do not go too far and over sharpen!) and that you create use of methods like 1px outlining to create everything jump off the website page.
A little over a year ago I had written a guide here on Psdtuts+ known as about improving a web design which has a lot of information about improving and washing up a website design.... Read More