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.
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.
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.
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.
As anyone can see, the line with depth is a lot more visually appealing.
How to Create a Line with Depth
Create a new layer on top of the background color.
Instead of a 1-pixel solid color line, create two lines: A1px 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.)
Set this new layer to overlay, then merge the new layer on top of any bottom layers as necessary.
Examples Used in Web Design
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.
How to Create a Reflective/Gradient Shine
Create a new layer over the original image. (In this case, the plain green rectangle.)
Using the Elliptical Marquee tool, create a portion of an ellipse on the top part of the rectangle.
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.)
Change the layer’s blending mode to Soft Light.
Press “Ctrl [Cmd], Shift, I” to invert the current selection. Then, create another new layer.
Create a black to transparent gradient in this selection, with black on the bottom.
Change this layer’s blending mode to Overlay.
Put the opacity of both gradient layers down by about 50%. Alter the opacity of both until the image looks right.
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.
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.
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.
Hi, and welcome! Webitect is a blog devoted, very simply, to producing fresh, high-quality content for web designers and developers. We do our very best to give you the tools, resources, inspiration and tutorials that you're looking for.