You may remember originally published post that cited the worst website designs of world hotels that are actually great. That caused a tide of moot points!

After having censured all those indeed unsuccessful design efforts, we decided to actually do something about it to change the course of the events. In fact, we offered our cost free redesign services to any of those websites that stroke the aforementioned list. The lucky one appeared to be ‘Goldener Baer’ hotel website!

So, we took up the deal, and that was enthralling, we should say. The new version of the website lived up to our expectations.

For now, allow us to remind you of what the initial look of the website we’ve redesigned was:

What we have done is that we completely modified the layout, including graphical design of subpages, coding, and the addition of new sections. And even that was not enough. The structure of the website as well required some functional changes. So, we worked on it a little bit having replenished it with extra texts, added an interactive map to show hotel location on Google Maps, user-friendly navigation menu, and much more. We’ve also added functional blocks that were supposed to be the important links to apply.

And what we have eventually received - there’s a world of difference! Have a look:

That is it! Not so long ago this project was successfully completed. So far as we have enlivened the discounts for Hotels category templates, it is appropriate to mention that supersonic redesign of ours!

By the way, all of the trends are illustrated with our own templates’ designs. After all, we do not only talk about trends, we actually follow them. Enjoy!

1. Social Icons

- - -

Trend description: Social network icons are getting bigger and bigger (just as their value grows). Besides, they often get customized according to the general website style.

* * *

2. Hand-Drawn elements

Trend description: Hand-drawn elements and sketches either on the highly important spots (such as header, working area etc.) or all over the design.

* * *

3. Large Images

- - -

Trend description: The photo is the main element of the design and is often in the center of composition. By the way, there’s sort of a subtrend here - the big photo is used as a background for the design.

* * *

4. Magazine layout

Trend description: Grid-based design approach with lots of images and font play, just like in good old magazines. This trend has come from 2009 design trends.

* * *

5. White Space

* * *

Trend description: A lot of white space (or light-gray) with mostly minimalistic layout. By the way, the template design right above is one of numerous examples of how one design utilizes multiple trends. Check out the social icons in the header, look perfect for such a strict style as White Space. By the way, the iconset used for this design is also available at TemplateMonster. Here it is:

* * *

6. Functional Tilling

Trend description: The functional elements (e.g. players, forms, buttons) are located in places previously considered inappropriate for anything at all.

* * *

7. Typography

- - -

Trend description: Use of big letters and original fonts, often placed on websites as ordinary text (extra large) without converting it into an image.

* * *

8. Rich Textures

- - -

>

Trend description: The background texture is a zoomed photo of something that has an interesting texture in real life.

* * *

9. Original play with perspective

Trend description: The functional elements are located around the design in a way that makes you feel like they’re on various distances from you (unlike the line-oriented designs that we are all used to).

* * *

10. Retro

Trend description: It pretty much speaks for itself. Old fonts, bright colors with slight sepia effect. Plus this trend often utilizes the old photos.

* * *

11. 80-s

Trend description: Bright forefront colors with dark backgrounds. Plus - no Eighties are Eighties without a shiny disco ball!

* * *

12. Grunge

- - -

Trend description: Uses vector graphics and design elements with grungy and shabby effect.

* * *

13. Interactive design

Trend description: The website design elements are connected with the functionality - some of the design elements become active when certain functionality is performed (e.g. the design changes when a user presses navigation buttons).

* * *

14. Oversized Footer

Trend description: The footer is much bigger that it used to be, now it contains not only one line of main menu and copyright info, now it’s optimized for a lot of links which makes it sort of a mini-sitemap.

* * *

15. Lightboxes

Trend description: Dialog boxes that appear after certain actions of a user - they either contain additional information or functional elements (such as order forms, login forms etc.).

* * *

16. Minimal

Trend description: Ok, this trend is now new but it’s still very popular. It uses a very small amount of elements (often only navigation menu and a background) in order not to distract the audience from the website’s direct goal - whatever it is.

* * *

17. Icons in design

Trend description: Also an old trend, but it’s even more popular than the Minimalistic style. This trend means that the functional elements of a website (for example the navigation tabs) are accompanies by the graphic icons that simplify perception.

* * *

18. Scattered Navigation

Trend description: The navigation elements - either buttons or text - are scattered in a mess around the design. It may seem uncomfortable but on the other hand the navigation elements are bigger in this case and are very easy to use.

* * *

Ok, that’s about it with our vision of currently actual web design trends. In case you have something to add to this list please feel free to leave a comment to this post. After all, it’s the audience who sets these trends.

As we all know, Thanksgiving is a word of action. Template Monster therefore offers its thanks and expresses its gratitude in the way special. We decided to present our customers a whole lotta special holiday discounts (the more products you buy the bigger discount you get for your further purchase) and free items (free membership at ProClipart.com giving you the access to the royalty free clip art and IconDemon.com offering Web Icons in case you make more than 8 purchases), to add some zest to our festivities.

This Thanksgiving promo will last during the period from November 1st to November 25th, 2009. Within this time we will count the number of purchases registered for each email address (make sure to use only one email address for all your purchases at TemplateMonster), and according to this number will give out the proper gifts to everyone on November 26th.

Eager to derive more, check out our Thanksgiving Promo Presentation to enrich yourself with some interesting bits of information, related to the occasion.

So, let’s bask in the Thanksgiving spirit getting some really cool gifts from the kind Monster!

Happy Thanksgiving!

On the other hand judging from what we have received, there’s more that we were able to find initially. Anyways, it’s good to know that our audience really did help us without making us look like idiots that didn’t see something obvious

Plus, we have already started contacting the participants who’ve been suggesting the customized websites and delivering the prizes to them. In case you didn’t know, the prizes are 10 free unlimited hosting accounts from JustHost, 5 free templates from TemplateMonster as well as significant discounts both from TemplateMonster and JustHost. By the way, we want to address the participants (and the winners) - guys, please allow 2 business days for the prizes to be delivered, ok? No one will be forgotten.

Ok, enough of talking. It’s time for some rating. Please welcome the Top 20!

20. Ehow

* * *

19. Bagolitas

* * *

18. Webkinz Insider

* * *

17. Martha Stewart

* * *

16. Kedem

* * *

15. Costume Kingdome

* * *

14. Anytime Costumes

* * *

13. VSO Software

* * *

12. Webshots

* * *

11. AltonTowers

* * *

10. Las Vegas BeforeLastCall

* * *

9. NewGrounds

* * *

8. ThornTons

* * *

7. Nick

* * *

6. Runes of Magic

* * *

5. PartyCity

* * *

4. Smith Dunn

* * *

3. Cool Iris

* * *

2. Cartoon Network

* * *

1. IWOOT (type in “undead” in search box to see the customization)

* * *

All of them are great as you see, a lot of neat ideas, hidden gags and tricks. Well, that’s what we consider to be the perfect Halloween customization - a lot of fun and a little bit of creepiness.

So without a doubt our ‘awareness campaign’ is a success this time. Hopefully next Halloween we’ll be able to find much more customized website designs - perhaps, our Halloween tutorial will help the Web in that

1. Cleaning the Header

At first you have to remove all the useless elements of your header:

Go to the Layers Panel and select Layers or Layer Sets you would wish to remove and then hit the Delete button;

After all the unnecessary layers are removed the header should look like this;

2. Creating a background image.
Now let’s pick the colors for the header. Left Click on the foreground color icon in the toolbox to open the Color Picker and choose the color you like. Then hit the background color icon in the toolbox to open the Color Picker and choose the background color (we’ve chosen dark-blue for the foreground and blue-marin for the background).

Create a new Layer. Go to the Layer directory and hit the New Layer button;

Now pick the Rectangular Marquee tool from the Toolbox and define the area for the new header background;

***

Pick the Gradient tool from the toolbox;

In the Gradient Options Panel select Linear Gradient and Foreground to Background gradient preset from drop-down list;

Apply the gradient on the selected area from top to the bottom of selection;

3.Changing and editing the Fonts.
Now we need to pick the fonts that would match our main idea which is as you already know Halloween. Here is what you should do:

Select a Layer containing the text;

In the Fonts Option Panel choose the font that suits your idea best (We’ve chosen Giovedi Regular);

In the Layer directory Panel press Add Layer Style and select Outer Glow. This will give your text some shiny look.

In Structure section change Blend Mode to Screen and Opacity to 45%; in the Element Section adjust Size to 9 px. These settings can be easily changed according to your preferences (right click on the layer-Layer Properties-Outer Glow and change your settings).

And that’s how the Text messages should look like after customization.

4.Digging the graves

Now we will draw some graves to make our header look scary.

Pick the Rectangular Marquee tool from the Toolbox and make first selection as shown on the picture A. Than hold Shift and add second selection as shown on picture B. Your selection area should look like a grave cross now.

Select Black as a Foreground Color: Left Click on the foreground color icon in the toolbox to open the Color Picker and choose the black color.

Now we need to fill our selection with black color. Select Paint Bucket Tool from your Toolbox and fill the ‘Grave cross’ selection. Then press Ctrl+D to deselect the cross.

Go to the Layer directory Panel press Add Layer Style and select Stroke. Make Size of the stroke 2px and press Ok. Thus you’ll make the grave’s cross corners rounded.

Now You know how to make graves. To add another ‘grave cross’ simply duplicate layer – Right Click on the Grave Cross layer and choose Duplicate Layer option and then press Ok. To edit the size of the “grave cross” press Ctrl+T to select Free Transform Tool. Thus you can transform (rotate, skew, scale, etc.) the image. When you defined the shape you wanted hit Enter button on your keyboard. Here is the example of how we decided to line up 6 grave crosses.

5. Editing the Background

Now we will add some glow to the background to give the image look solid. Go to the Layer directory, select the Background image Layer (the one we’ve created in the step 2) and hit the New Layer button. Select the new layer which should be above background image Layer but below your ‘grave cross’ layers. Go to the Gradient Options Panel to choose Radial Gradient and “Foreground to Transparency” preset from the drop-down menu. Pick the white as a Foreground Color.

Select the Gradient tool from the Toolbox (hot key ‘G’) and add some Gradient to your image. It supposed to look like the one on the picture below.

Go to the Layer directory and change the layer blend mode to ‘Overlay’ and it’s done!

***

6.Flying the Moon

Now we will add the Moon to spread some natural light. Select Elliptical Marquee tool from the Toolbox and make a round selection. As you can see, we’ve placed it in the right top corner of the header, but you could place it wherever you want it to be. Pick Paint Bucket tool and fill your selection with the white color.

Now we need to make the moon a little blurry. Go to the Main menu - Filter - Blur – Gaussian Blur.

The Blur radius should be about 1.5 px. Hit Ok;

Now we’ll add Outer Glow as we did in the step 3;

Set the Blend mode to Overlay, Opacity - 50%, Size – 16 px ;

Now we will produce the effect that imitates the surface of the moon.
Go to the Main Menu - Filter - Render – Difference Clouds;

Next, Press Ctrl + Shift + L and the program will automatically define color levels;

Now we need to make the moon brighter.

Press Ctrl + L to open Levels Option panel and set

Input levels to : 0 ; 3,5; 255;

Output levels to: 0; 255;

The result should look like on the picture below:

Next, create a new layer above the moon layer. It will be a Layer Mask for the moon. Press Alt + Ctrl + G. Fill the selection with blue color. Press Ctrl + D to deselect. Set the layer’s Blend Mode to ‘Color’;

Create another layer and place it under the moon layer. Fill the layer with Radial Gradient of white color. Set the layer’s blend mode to ‘Overlay’ with Opacity - 50%;

Add another layer above the moon layer. Use Elliptical Marquee tool to make a simple selection around the moon. Hold Alt and make another selection inside the first one. Now your selection should look similar to the one shown on the picture below. Fill it with white color;

Go to the Main menu - Filter - Blur – Gaussian Blur.

Set the layers Blend mode to ‘Soft Light’ with Opacity-15%.

And now the moon is shining!

7. Adding the bats.
You can also add some bats to your masterpiece. It’s really simple. Save this image on your computer and then open it with Adobe Photoshop;

Duplicate the layer but this time, select your Header as Destination document ;

Add as much as you want of those flying creatures simply by duplicating the layer.

Use Free Transform tool (Ctrl + T) to edit your bats;
And finally you get astonishing design of your header right for the holiday! Enjoy!

Download Source File

“UPDATE”
This part of our tutorial is about putting additional design elements to make your customization even more creepy. Please note that these additional elements can be either produced by yourself or purchased from third parties.

8. Get a Witch

As soon as you’ve found the image you wish to place on your webpage header you are ready to start. Launch Adobe Photoshop, open the illustration and your webpage header layout.

We’ve decided to place the witch in the left bottom corner but we really didn’t appreciate her looking aside. It supposed to guard the web content, so we need to flip the witch horizontally so she would look down on the information posted on the website. To do this go to the main menu – Edit – Transform – Flip Horizontally. Now we need to scale the size of the image to suit into the header. Go to the main menu – Edit – Transform – Scale and find the most appropriate parameters.

We need to make the illustration match the colors of the Header. Here is what we’ll do:
Create a Mask layer for the illustration: go to the Layer Panel, select the Layer containing illustration and press Mask Layer icon as shown on the picture below.

Go to the Toolbox and select Polygonal Lasso tool and accurately select the witch’s coat. On the image below you can see how the selection should look like:

***

Go to the Layer Panel Again and change The Mask Layer Blend mode to Soft Light.

Cool! The colors are matching now!

Ok, now we would like to add some glow to the witches prop (it’s hard to guess what’s she is holding in her hand, so let’s just call it prop =)). Create a new layer above the layer containing the witch. Go to the Toolbox and select Gradient tool then in the Gradient Panel choose Radial Gradient type. Set the foreground color to red. Simply add the gradient above the prop.

Now all you need to do is to lean back and enjoy the masterpiece you’ve just created yourself. Happy Halloween!