Posts Tagged ‘techniques’

29 Jan 2010

14

Open Thread: What Makes You a Good Designer?

good design

Today I’d like to try something new and have a fun discussion on what makes someone a ‘good’ designer. What’s your opinion?

I think it will be exciting to talk and compare opinions on what it really is the makes you a good designer. Hopefully you can even come away with some new thoughts on how to be better!  

11 Aug 2009

18

65 Must-Know CSS Strategies and Tutorials

Often times we only learn the CSS strategies we need to as we go through new projects. However, we should study new strategies in our spare time as well. This way, we can discover new and more efficient methods of getting things done for the future.

07 Aug 2009

6

Grunge Web Design Tutorials to Learn New Techniques

Grunge is one of the most difficult looks to achieve, as it is a very unpredictable design style. That’s why tutorials for grunge web design are needed — designers can study techniques and best practices when creating this type of web design style to achieve the best look possible.

Here are ten web design tutorials — some for just design, others with coding included — so you as a designer can improve by learning new techniques and best practices.

05 Aug 2009

10

20+ HDR Photographs that Make the Ordinary Look Extraordinary

High Dynamic Range, or HDR, photography is an amazing form of art that creates a mix between realism and illusion. When we view ordinary things in HDR — it’s almost as if we’ve never seen them before at all.

02 Jul 2009

9

4 Small Web 2.0 Design Tricks that Make a Big Difference

1. Lines and Borders with Depth

This feature is often used in amazing sleek web designs, but overlooked by beginners trying to create a similar feel. An example of this effect is below. On the left are two lines, that could possibly be used as a line or border in a web design, and on the right is the same, but with a bit more depth.

Line with Depth

As anyone can see, the line with depth is a lot more visually appealing.

How to Create a Line with Depth

  1. Create a new layer on top of the background color.
  2. Instead of a 1-pixel solid color line, create two lines: A 1px black line on top of another 1px white line.
    (For a horizontal line, as one can guess, just put a 1px wide black line next to a 1px wide white line.)
  3. Set this new layer to overlay, then merge the new layer on top of any bottom layers as necessary.

Examples Used in Web Design

Depth in Line Depth Line Depth Line

2. Reflective/Gradient Shine

Anything that looks glossy can just about be considered Web 2.0. The use of a few short techniques to add gradient and gloss can spice things up. The example below is what it looks like in action, just applied to a rectangle of solid color. The same effect can be used on logos, the background for content areas, text, images, and more.

Plain, Boring Color Box

Reflective Gradient Shine

How to Create a Reflective/Gradient Shine

  1. Create a new layer over the original image. (In this case, the plain green rectangle.)
  2. Using the Elliptical Marquee tool, create a portion of an ellipse on the top part of the rectangle.Tutorial
  3. Create a white to transparent gradient vertically upwards. Make sure the white is on the bottom. (To create a completely vertical gradient, hold down the shift key.)Tutorial
  4. Change the layer’s blending mode to Soft Light.
  5. Press “Ctrl [Cmd], Shift, I” to invert the current selection. Then, create another new layer.
  6. Create a black to transparent gradient in this selection, with black on the bottom.Tutorial
  7. Change this layer’s blending mode to Overlay.
  8. Put the opacity of both gradient layers down by about 50%. Alter the opacity of both until the image looks right.
    Reflective Gradient Shine

3. Drop Shadows

Drop shadows are used surprisingly often in Web 2.0 design, despite their bad reputation for being old-fashioned and cheesy in the web design world. This is because they are great for adding a sense of realism to a design, like a realistic sense of a flat piece of paper (or other material) setting on another flat surface. That’s the effect we get on the right.

However, on the left, it’s easy to see the effect is cheesy, old-fashioned, and should never be used. On the left, the dropshadow gradient is so large that it seems as though the green block is unnaturally floating above the flat background.

Cheesy Drop Shadow Stylish Drop Shadow

The trick is to use dropshadows to make things realistic. Don’t use dropshadows just for the sake of using them.

4. Rounded Corners

They’re not included in the new CSS3 for nothing. Rounded corners are often times a great way to add a bit more appeal to a design, especially a modern design. Many sleek and modern product designs often feature smooth curves and edges. Blocky feels old and clunky — smooth is new and modern.

Square Box Better Better

Wrapping Up

Not all of these have to be used simultaneously for a great Web 2.0 design, but they are a closer look at some simple tricks one can try to see if the effect will improve a sleek web design. In the end, though, good design comes from experience and a good eye for design.

These are, of course, very basic principles and are meant for beginners in web design. Anyone looking for the next step, or for anyone looking for more advanced techniques, should check out How to Accurately and Effectively Research a Web Design Style. The article goes over how to discover your own techniques when learning Web 2.0, or any other design style for that matter.