Posts Tagged ‘web design’

24 Aug 2009

9

50 Blue Websites: Variety in the Most Common Color

With blue being such a basic color, many designers shy away from it in hopes that an alternative color will make their designs more creative. However, just like all colors, blue can come in a variety of shades, hues, and moods. Applied in the right context, blue can truly be amazing.

17 Aug 2009

3

Conducting Collaborative Design Sessions – Part 4: Maintain

Make sure you never leave your participants hanging after an important meeting. Part 4 of this series will help you maintain a long term relationship with your participants.

13 Aug 2009

15

The Art of User-Centric Web Design

User-centric web design is a method of web design where the content, design, and usability factors are all placed in accordance to the target audience’s needs and goals — a design that is centered around the user. This article will cover the basics of what user-centric web design is, and how to achieve it.

10 Aug 2009

3

Conducting Collaborative Design Sessions – Part 3: Facilitate

Clients and users need guidance when contributing their design ideas. Part 3 of this series will prepare you for the challenges inherent in facilitating collaborative meetings.

07 Aug 2009

7

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.

03 Aug 2009

9

Conducting Collaborative Design Sessions – Part 2: Inform

Getting the most out of your users requires that you take the initiative. In Part 2 of this series, you’ll learn how to begin your design session in a goal-oriented manner.

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.

Page 2 of 212