The first thing web developers consider when they need to create an extremely stylish and trendy website is CSS3 and HTML5. This is because of the functionality and features they offer and why HTML5 and CSS3 are a major topic for web designers. Taking this into account, we thought to compile another fresh and cool collection of some professional HTML5 and CSS3 templates. So, here we are with 45 free, but fresh, templates that you can download.
So, enjoy this collection and have more fun in making the web experience more pleasurable and gratifying. Let us have a close look!

1. Interio

( Demo | Download )

2. Art School Template

( Demo | Download )

3. Folder

( Demo | Download )

4. Template for Business Project

( Demo | Download )

5. Nova

( Demo | Download )

6. CSS3 Seascape Two

( Demo | Download )

7. Kroft

( Demo | Download )

8. Thom Sander

( Demo | Download )

9. Scenic Photo

( Demo | Download )

10. Hatha Yoga

( Demo | Download )

11. Connoisseur

( Demo | Download )

12. Point

( Demo | Download )

13. Vivid Photo

( Demo | Download )

14. Pro Soft

( Demo | Download )

15. Photo Style Two

( Demo | Download )

16. Animated Template for Design Studio

( Demo | Download )

17. CSS3 Six Dark

( Demo | Download )

18. Free Website Template with JustSlider

( Demo | Download )

19. Trinity HTML5 Template

( Demo | Download )

20. Shinra

( Demo | Download )

21. Zeni

( Demo | Download )

22. Modus

( Demo | Download )

23. IMCreatives HTML5 and CSS3 Template

( Demo | Download )

24. Template for Food Delivery Project

( Demo | Download )

25. Principato HTML5 and CSS Template

( Demo | Download )

26. Wedding Website Template with jQuery Slider

( Demo | Download )

27. Fascination HTML5 and CSS3 Template

( Demo | Download )

28. Template with jQuery Slider for Car Project

( Demo | Download )

29. AppleGreen HTML5 and CSS3 Template

( Demo | Download )

30. Template for Exterior Design Project with jQuery Slider

( Demo | Download )

31. CatTemplate HTML5 and CSS3 Template

( Demo | Download )

32. Template for Youth Organization

( Demo | Download )

33. KiteSurf HTML5 and CSS3 Template

( Demo | Download )

34. Template for Law Business

( Demo | Download )

35. Template with jQuery Slider for Consulting Business

( Demo | Download )

36. TechnicalLine HTML5 and CSS3 Template

( Demo | Download )

37. Template with jQuery Gallery for Music Site

( Demo | Download )

38. FreshIdeas HTML5 and CSS3 Template

( Demo | Download )

39. HTML5 Charity Center Template

( Demo | Download )

40. ThinkSimple HTML5 and CSS3 Template

( Demo | Download )

41. Androidian HTML5 and CSS3 Template

( Demo | Download )

42. iPhone Application Template

( Demo | Download )

43. RedX HTML5 and CSS3 Template

( Demo | Download )

44. HTML5 website template for airline company

( Demo | Download )

45. Real Estate Website

( Demo | Download )

In the span of 6 years I’ve seen new blogs become successful and more than too much fell into oblivion. Right now the only blogs that are successful will probably be the only ones to hold the stage for a long time, bad news for newcomers. There are a lot of reasons why blogs fail, and it begins at conception!

Blogging is about sharing things you are good at, or at least you’re enthusiastic about. Whether you are a web designer, web developer, a writer, an online marketer, or someone else who doesn’t have a blog yet, or has one but has failed quite miserably, then you definitely need to know why it failed (and why it will fail).

But hold your horses, I’m not saying you should stop blogging!

You can leave it to self-discovery and fail or I can point them out for you and increase your chance of succeeding.

Whether you are new to blogging or is planning on starting one, the problems highlighted here are serious enough to threaten your blog’s success. That’s why I have written several tips to avoid failure!

Already have a failing blog? See number 3!

5 Reasons Why Blogs Fail

1. Premature Launch

Perfect, your blog is now live…but do you have an audience? Four days after launching my blog, Knowledge Salad (shameless plugging detected!), I was already averaging 30 visitors daily. Not bad, I should say. Better than zero, right? How did I do it?

• Write tons of articles/posts for your blog before launching. Before I launched my website I have already 25 posts waiting to be published. You don’t want to launch it with just one blog post. Okay, what’s the difference between articles and posts? Well, let’s just say that posts are the raw form of spur-of-the-moment writing, like saying hi to your readers or giving an update. An article would be one that has been researched thoroughly and heavily proofread and edited.
• I forced my blog’s Facebook Fan Page to my friends. I have few friends on Facebook, and I only contacted around 40 of them. You know how the newsfeed goes, when a friend likes something it shows on a friend of friend’s newsfeed (you following me?), then that’s where the numbers blow. Right now I only have 114 subscribers. In my defense, I stopped marketing and forcing it to people, haven’t updated my blog yet for a long time now. In any case, ask your friends for help!
• Contact relevant blogs and write for them, even for free. In my case I have already joined 1WD. A lot of blogs will certainly give you a byline where you can link directly to your blog. Here’s the crucial part, if you’re not yet ready to launch it, so that it won’t be a premature launch, you should have a splash page where you can start gathering emails. Tell them that “Rean is currently brewing some materials to help you earn more by writing!” or something to that effect, and “sign up to be notified when the site goes live!” A.K.A. list building! This way when you launch your blog, you will already have an audience.
• Once you have written for a lot of authoritative blogs, and have made good relationships with them, you probably can ask for favors. A shout out on Twitter or Facebook or even a post itself from them. This is the good thing about the blogging community, it’s all about give and take.

2. Introvert Blog

A lot of new bloggers tend to just focus on their blogs, not knowing that they won’t have a good amount of audience without proper marketing. Marketing is quite a heavy word, and it entails longer period of work than the blog post itself. This is where the following comes in to help you gather enough audience and increase the chance of your blog’s success:

• Use Social Media.  You should know how to leverage Facebook and your friends (and your friends’ friends), Twitter marketing, Pinterest, and Google+, Reddit, and a lot more.
• Enable email subscription. See point 1.1 about gathering emails. Email marketing is very important!
• Join online communities/forums. For small to medium blogs, I’d suggest joining Blog Catalog. There are thousands of bloggers there that would gladly help you improve your blog. You can ask for tips, and in return provide valuable content for them to enjoy.
• Respond to comments. Nothing shuns away readers more than a non-responsive author. They might think that your blog is just another aggregator or a robot that publishes posts. Having a human connection is important! Dainis, founder of 1WD, actually insists on replying to every comments!

3. Hoarding Posts

Don’t keep everything for yourself. Your blog might be too plump and puffy but your traffic is severely malnourished. And you are wondering why? I’d love to break it to you: don’t hoard all the posts you have written. Find blogs relevant to your niche and ask them if you could submit posts to them for publishing.

Danny Iny, the Freddy Krueger of Blogging, mentioned in one of his webinars that you should only write maybe four to five posts a month on your blog if it receives less than 250 visitors a day, then spend the rest of your time guest blogging to get the word out that you have your blog and that people should visit it.

If you want to make your blog successful, you should spread your wings and make your presence known. Contact blogs that have high authority in their niche and join them. This way you’ll be noticed!

Guest post, guest post, guest post!

4. Fear of Learning

If you have a blog, or is thinking of starting one, you should have at least a basic understanding of how the internet works. I’d go as far as to say that it is required. You will thank me for saving you in the wee hours of the morning when your blog suddenly stops working just because of a faulty plugin and your tech savvy friend is still sleeping.

You won’t go far if:

Someone had to do it.

• You don’t know how to tweak your blog’s design, hence you’re left flailing like Magikarp when an IT friend is nowhere to be found.
• You don’t know how to install a plugin or a theme.
• You are too afraid of changing hosts.
• You don’t know a lot about the internet.
• You are too afraid of experimenting.

You should probably start learning a few useful things like CSS, HTML, and some WordPress hacks if you’ll use WordPress CMS.

5. Don’t Know Where to Start?

Since I joined 1WD I have received hundreds of emails asking for instructions on how blogs are created. Some even thought that 1WD is a web development firm.

Here’s a complete guide on how to create a blog in under 1 hour, all the technical aspects explained!

Do you have a successful blog? Share your tips!

Hopefully, you will never have to ask yourself why blogs fail after reading this!

In this tutorial I will show you how to create Tasty social Icons in Photoshop. We will be covering what’s new in the Shape Tools options panel which is the new Stroke. Using this new feature we can now easily make stitches and we can adjust it whatever we want.

For those who don’t have Adobe Photoshop CS6 yet you can download the beta on their official website. But if you’re excited to do this and you don’t have time to download Photoshop CS6, you can still accomplish this tutorial by following the simple instructions.

So what we are waiting for? Let’s get started.

Things you will need for this tutorial:

• Social Icons 32px x 32px

Here is what we will be making:

Step 1: Setting up the Document

For our workspace create a new Document in Photoshop 570px by 470px and set the background color to #333236.

While selecting the background layer go to Filter – Noise – Add Noise.

Now that we have the background, let’s add a light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.

Change the layer mode to Soft Light and change the opacity to 50%.

Step 2: Working on the Base Shape

Here is the base shape as you can see in the image below. Basically it’s just an 80px by 120px, #3b5997 Rounded Rectangle Shape with a 5px Radius. Then I modified it using the Direct Selection Tool(A) and Pen Tool by making the top straight and adding an anchor point in the bottom middle and then I dragged it downwards using Direct Selection Tool(U). If you followed my previous tutorial you will know how to properly modify the shape: Recreate Google+ Pages Using Adobe Photoshop.

Apply this Blending Option:

• Stroke: #7796cb, #7b97c6, #324579

• Gradient Overlay:

Here is the result.

Step 3: Adding Pattern

Create a new Document in Photoshop make it 5px by 5px and make sure the background is Transparent.

Fully zoom our canvas by using the  Zoom Tool(Z) or by just pressing Ctrl + + on the keyboard. Now that it is fully zoomed use the Pencil Tool(B) and make a pattern as shown in the screenshot below.

Save this document as a pattern by pressing Edit – Define Pattern. Name it whatever you want. Now that we have the pattern apply it to our base shape

• Pattern Overlay:

Step 4: Adding Highlights

We need to add some flavor to our shape by adding some highlights. First thing you need to do is create a layer above the shape and Link it to the base shape by pressing the middle line between them.

Using a Soft Brush Tool(B) brush on the bottom part of the shape and set the layer mode to Soft Light and decrease the Opacity to 80%.

Add another layer, select the Gradient Tool(G) Reflected Gradient, #fff and add it near the top of the shape. Set the layer mode to Soft Light and decrease the Opacity to 50%.

Add another layer again. This time we will create a darker shade. Use Reflected Gradient, #000 and add it at the top part of the shape. set the layer mode to Multiply and decrease the Opacity to 50%.

Step 5: Adding Stitches

Adding Stitches (Dash Stroke) in Photoshop CS6 is very easy. They improved how Shape Tools work and they added an additional option panel for strokes and shape. Don’t worry if you don’t have Photoshop CS6 yet, you can still follow this tutorial. But with Photoshop CS6 I will show you how handy it is. Here is the preview of the options panel of the Shape Tools

• Fill Option Panel

• Stroke Option Panel

To create the stitches first create a shape, the same process we did on the base shape but this time change the width to 70px.

You need to adjust the stroke by clicking the More Options and set the Dash to 5 and Gap to 6. Change the stroke color to #a4b1cf and when you’re done shut the fill color, so that the only thing will show is the stroke.

For CS5 and below, you can do this manually by using the Line Tool(U) 5px each line and 6px gap.

We need to delete the top part stitches. You need to Rasterize the layer and erase the top part stitches.

• Drop Shadow:

Step 6: Adding Icon

You probably have the icons provided in the resource. Place the icon in the center of our base shape.

Apply this Blending Option:

• Stroke:

• Gradient Overlay: #dddddd, #fff

• Drop Shadow:

Add the icon name using Text Tool(T).

Duplicate the text layer, change the color to #2b406a and move it up once, using the up arrow key.

Step 7: Adding Shadows

Duplicate the base shape layer and make the fill color to #000000. Place this below the base shape. Now go to Filter – Blur – Gaussian Blur.

Mask the layer and mask the portion that we don’t need. Refer to the screenshot below.

Using Linear Gradient, #000000 add a shadow as shown in the screenshot below.

Add this 1px #515055 line using the Line Tool(U) and place it above the shadow.

Now finish this by masking both ends of the line and the shadow.

And finally we’re done. I hope you learned something from this tutorial. Also, I added 4 more social icons. You can grab the PSD file by clicking the download link below. Until next time. :)

Download PSD source file

Recently, I wrote an article about how Facebook is dominant on the internet. It is quite clear that Facebook is right now the most important social media tool and knowing how to properly conduct yourself, as an individual or a business, on Facebook, is crucial. Sure, it is much more important for companies to make sure they represent themselves properly, but you’d be surprised how many individuals actually care about their Facebook profile and follow some rules and guidelines too.

Social media is not just to have fun or to communicate with friends and customers. Social media is a huge opportunity for jobs and networking. It can have a positive impact on your career and personal life and it can also work the other way around if not used wisely.

Although I joined Facebook in August 2008, quite late in comparison with the early US users, I have done some work here in the past four years and I think I finally came up with the perfect Facebook guidelines for all of you out there who wish to be better at managing your profile, but do not know where to start. So, without further introduction, here are the two categories.

A. Etiquette for individuals

To do

1. Be the first to interact

In order for others to interact with you, you first need to interact with them. It is you, the social media soon-to-be-expert, that needs to take the first step. Statistics show that users who interact with each other often create better relationships on Facebook. Acknowledging others on Facebook will let them know you are aware of their existence (translated in posts, updates and shares). If you lack interactivity from others, it is probably because you don’t interact enough yourself.

2. Develop rapport with others

The only way to develop rapport with others is to like and comment on their updates and shares. Facebook gives the fast option of “liking” any post, share or update, and allows you to do this with a single click. You will notice that creating an online rapport to people will many times extend out into the real world too.

3. Remember important events

There is no excuse for people who are always available on the internet if they forget about someone’s birthday. With the events reminder clearly visible on the right-hand side of the screen, forgetting about somebody’s birthday is something many will not forget or forgive. I, personally, even removed some of my Facebook contacts after my birthday a few weeks ago. Not only because they forgot my birthday; that was just the icing on the cake. With no interaction at all between me and them and not even a short message for my birthday, why would I want to keep them in my Facebook contacts list? My Facebook profile is not a popularity contest. I would rather have 200 real friends than 4500 fake ones.

Remember people’s special occasions and make sure they know you acknowledge it. Facebook makes our life pretty easy sometimes, we just need to know how to use it to our advantage.

Image by freakgirl.

4. Recommend links

I am not talking about sharing good articles on Facebook, but about linking common friends together. There is no reason for not recommending friends to connect with each other on Facebook, if they both have accounts and are willing to list each other as Friends.

5. Share

This is a key step in having a good relationship with your network. If you know something interesting, make sure to share it, others might be interested as well. If they notice you always share interesting links, they will more likely visit your profile more often or follow you closer than other contacts. Also, sharing an interesting link might stir up a conversation, which means interactivity will be better on your profile.

If you have many designers in your list, post something regarding design. If there are many developers, offer them links to interesting sources for web developers. Briefly “analyze” your audience and come up with the things they are most interested in. By sharing those things you will be one of the centers of interest in their friends list.

6. Update your profile

By keeping your profile updated, including your work and education information, you show others you are active on Facebook and take care of your image. Control the privacy settings on your profile and decide whom you want to be seen by and whom you don’t. There might be some information you don’t want to share with everybody and this is totally understandable.

Not to do

1. Add unknown people

One of the things that bothers me most on Facebook is people adding other contacts only for the sake of having many friends. Without the slightest interest in following their updates or shares, they just add people to show they have many friends. This is something I never do. My Facebook profile has less than 300 friends, which I revise once per month. Most of the times I delete older contacts, which I do not interact with, in order to “make room” for new ones.

Moreover, adding strangers can also be dangerous. It happened a few times in the US that people leaving on vacation posted information about their departure time on Facebook and their homes got robbed while they were away. If somebody wants to add you as their contact, it’s a good idea to send a message and ask for more information about him/her before you proceed in accepting their request.

2. Leak confidential information

You can post your phone number and Yahoo! ID on your profile, but don’t go way too far by posting something like your address, credit card information, passwords and so on. You might think that only because you add your close friends it is not dangerous, but it still is. Not only can they prove to be less friendly than you thought, but their accounts can also be hacked and strangers will immediately have access to your confident information.

3. Post without thinking

It is never a good idea to post updates including personal issues, salaries, professional issues, relationships and so on. You may think that you only post them on your best friend’s wall, but by posting there you actually post the information for the whole network. Revise your privacy settings before starting to post.

Every video or picture you post on your profile can easily be downloaded and later used against you or even used to misinform others about your actions. Depending on how you decide to maintain your own Facebook profile, pictures from the last Friday’s wild party might not be welcomed on your profile. This is the main reason behind me never adding business contacts or prospects on my Facebook profile – I do not want them to have an insight into my personal life, which might be proper or not for a freelancer. But it is entirely up to me if I want to share this or not.

4. Play with fire

Avoid clicking on all applications your friends “liked”, as they might be viruses. Some applications are harmful even on Facebook and avoiding them will only ensure your computer will not be damaged and you will not suffer data loss.

B. Etiquette for companies

To do

1. Maintain activity

Especially since the new timeline profile was introduced, companies whose Facebook profile is not active suffer. If you look at brand pages without activity in a specific month, you will notice how bad they actually look. This should encourage you to keep your page active and interact with your audience and followers. Engaging your users will make them come back to your brand page, as they know activity is at its peak there. Users usually lose interest in pages without activity. Don’t own one of those.

Also, try to maintain consistency. If you post an offer on Twitter, make sure you don’t post it on Facebook two days later. People’s trust in the importance of your Facebook page will decrease and your followers will not be as interested in your brand page anymore.

2. Remember to use the “IF, THEN, ELSE” method

Companies should have a different user approach than individuals have. Difficult situations should be properly managed and the method named above looks like a fitting one. Use it for a scenario like the following one: IF users have concerns, THEN find out the reason and solve the problem, ELSE try to explain to them the situation. By doing everything methodically you will ensure that you do it the right way. Having to deal with different user behaviors is not an easy task and you can only manage to keep up with everything if you are organized and methodical.

3. Monitor user posts

Being able to be 24/7 on your Facebook page doesn’t happen unless you are a big company with financial resources assigned to the PR department. But in either case it is crucial to be able to follow the user posts on your Facebook page and answer them immediately. KLM/Air France has, for example, an excellent Facebook response time. They actually use their brand page to solve client problems. I once had questions about their Flying Blue program – it was late afternoon. I got the answer within two hours. Enough said.

4. Follow trends

It is always a good idea to follow trends on other pages. If it is trendy to use humorous updates, don’t be afraid of doing it. If people are more interested in seeing a video than reading a large chunk of text, then make a video and share it. You don’t only need to know the audience you send the message to, but also the trends, so this step is something that might require further research.

5. Boost some user ego

Basically, all you need to do is make the user feel good on your page. Make them feel important, wanted and appreciated. Acknowledge what everybody says, like their posts, thank people for sharing interesting sources and so on. It is not about you there, it is always about your customers. If they feel good, they will come back and do more business with you. Otherwise they will probably leave you for your close competitor who has a more positive approach.

Not to do

1. Making it about you

Companies use social media to broadcast information to customers and prospects. If you communicate through a one-way flow of information it can get boring and unattractive. It takes a very long time to build rapport, while it only takes a short time for people to lose interest. Failing to properly communicate with your customers will likely cause your Facebook brand page to fail too.

2. Ignoring negative feedback

If positive feedback might as well be ignored or requires only a short amount of time to answer, negative feedback is crucially important to be taken as it comes. A company should not answer negative feedback with anger or negativity. It is the worst thing a company brand page can do.

The first step you need to take is to acknowledge the feedback and assure the customer you are already on it. Then, try to search for clues and see if there is a problem or you’re just dealing with a difficult person. Require immediate answers from the ones responsible. The solution should always come together with an apology showing the company actually cares. The faster the problem is solved, the happier the user will be. What many companies don’t get is that users don’t have anything against businesses they have an issue with, as long as it got solved in a timely manner. They have huge issues with companies that can’t or won’t solve problems.

If you manage (and you should!) to create the impression that you care for your customers, they will be back next time to do business with you. If not, they will not only avoid your business, but will also spread negative feedback about you wherever they can. Remember that all of us have a list with companies we like and don’t like. You don’t want to be on the ‘don’t like’  list, so improve service quality right away if you feel there is a need to.

3. Posting off-topic

If you have a web design company, posting about how Obama won the Presidency in the US will not interest your audience. It will actually more likely make followers think that you are not serious about your brand page. We all know what this usually leads to.

4. Being part of arguments

It is not a good idea for a company to be part of arguments on their Facebook page. If users want to fight with each other over a specific topic, let them burn their energy, but don’t get involved, as this will damage your brand image. If you want to do something about it, you can engage in a one-to-one private communication and solve the issue with the persons involved, but don’t ever get involved in unnecessary arguments with, or in between, your followers.

Image by gilmarcil Ong tay.

5. Deleting your updates

It takes few seconds to delete updates. If you released a incorrect piece of information, apologize for the inconvenience and release the right information. If you acknowledge your mistakes your users will see you are responsible and serious about your business. It is only human to make mistakes. I usually think twice before posting. It is better to think longer first than to think even longer afterwards, in order to solve a problem.

6. Turning sales into the main focus

If you consider sales to be the focus on your brand page, you are mistaken. It shouldn’t be like that. The Facebook page should be used for communication mostly, then for sales. If most of your updates are linked to offers on your website, users will likely lose interest in your brand page. And why wouldn’t they? Basically, you send the same information twice: through the Facebook page and through your website. Why would they follow both of them?

Use the brand page to interact with people and draw their attention and use the website for selling stuff. Doing business the other way around is not something many have been successful with.

7. Getting involved in conflicts with competitors

If engaging in conflicts with your followers is wrong, then doing the same with your competitors is even worse, as this will damage your brand image significantly. If the competitor has an agenda, let him do whatever he wants. Being able to show diplomacy and avoid conflicts is a skill not everybody has today – show it and your customers will reward you.

Bottom line

With Facebook unquestionably being the most important social media tool in today’s web, it is crucially important to know how to use it. Following this guide should make your profile or brand page better and will improve the interactivity and benefits you get from it.

Is there a tip you have? We would love to hear your thoughts on the subject.

There are a million web designers out there and every seven seconds there is a new blog that goes live. The connection? It’s competition. At least for freelance web designers.

The truth is, the online world is a very harsh place for freelance web designers, or even web design firms. It takes a gazillion tons of sweat and marketing to be known. People’s attention spans are very short. Who are you again?

What if I told you that guest posting is your way to fame? That simply by guest posting you are increasing your chance of getting hired for new projects, or be an authority figure?

It only takes 5 minutes of reading.

Also, I wrote this article in under 40 minutes. Do you want to know how?

Which of the Three Are You?

1. Design blog owner?

There are thousands of active design blogs on the internet and yours is probably one of them. Your problem might lie in the fact that no one is visiting your blog.

How do I promote my blog? To whom should I reach out? Should I spend money on advertising?

2. Freelance web designer looking for job?

I told you before, the internet is a very harsh place where only the strong survive. Remember MySpace? Facebook came along and now MySpace is only a fraction of what it used to be. Freelance web designers are the same.

How do you tell the world that you are different?

3. Web design firm?

Of all the web design firms out there why should clients choose you? Well, they will probably choose you because of the services you provide. But is that enough? Unfortunately, no. Clients will choose to work with you over other design firms because you are known to them. Becoming well known is not really that hard, all you need to do is establish a constant presence out there. Scrap social media for a minute. It’s “that place where a lot of designers and people who want to have a website” go to that you want to anchor your presence on.

The Real Problem

The truth is, you don’t need to spend money on advertising just to get known. You don’t need to be ultra unique to compel people to visit your website or hire you or use your service. All you have to do is to make your presence known.

Make my presence known? Yes.

The citizens of the internet have a very short attention span. You too. Name at least five new blogs you visited in the past month. Can you? Yes, quite hard right?

I have a solution for that.

And it will only take you an hour to get started.

Why Not Guest Post?

Solution to your problem? Guest posting. Submitting articles and tutorials on blogs will never put you at a disadvantage. You can earn money by guest posting, a lot of people do this regularly and earn a living. Through guest posting you can also shout out to the world that you exist, that you are worth looking at the first time and the second time and on a daily basis.

By guest posting you are establishing dominance, if done right. You get your existence known.

10 Design Blogs to Guest Post On, okay?

(never end a sentence with a preposition, so I added “okay”)

1. 1stwebdesigner

2. Smashing Magazine

3. A List Apart

4. Hongkiat

5. WebDesignTuts+

6. Onextrapixel

7. Webdesigner Depot

8. Think Vitamin

9. Web Design Ledger

10. Web Designer Wall

How to Write a Guest Post?

A few things you need to know before whipping out that pen and paper (or keyboard and text editor):

1. You should know what you are writing about
2. You should have a good grasp on grammar and spelling
3. Be persistent

Do the following:

1. Visit the blogs I posted above, including 1WD
2. Visit at least 10 pages of each blog and check which articles tend to get shared and commented
3. From there you’ll know what kind of articles are accepted and what tends to be popular

Then you contact the blog editor or owner. Be sure to read their “Write for Us” page or whatever they may have.

Writing the Article

Once the blogs reply to your guest posting inquiry, that should be when you present your ideas to them. Choosing the perfect idea is crucial to building a long-lasting relationship. Choose a topic that is needed, current, and you have a solution for. CSS, jQuery, Photoshop, HTML5, PHP, and a lot more.

Follow this structure:

1. Introduction – in the most simplest sentences tell the readers about the whole article.
2. Statement of the Problem – this is important, everybody has a problem they’re trying to solve. Tell them you know what it is and that you have a solution for it.
3. Offer a Solution – people love solutions, so should you. Either the solution is a tutorial on how to hack WordPress or design a better logo, this is the place where you drop the “awesome” bomb.
4. Conclusion – not necessarily a conclusion. It can be a piece of advice, a more pressing question, or more resources that can help them solve their problem.

Follow this structure and you will write that first guest post of yours in under an hour.

Keep in Mind:

• Provide valuable content. It’s your name that is at stake. Write terribly and even if it gets published no one will be impressed.
• Have a list of blogs to follow and read from on a daily basis.
• Don’t just “post and run”. You should engage with your readers by replying to comments, that way they will know that you’re not a robot.
• Guest post regularly – establish a relationship with blogs.

Special thanks to Danny Iny. Danny is the “Freddy Krueger” of Guest Blogging. He got that name because every online marketing blog you go to he’s always there. And together with hundreds, if not thousands, of people he taught me how to write in under an hour without losing the essence of the whole post.

Facebook. The social media masterpiece all of us, more or less, use for personal or business reasons. Facebook is considered to, again, more or less rule the internet. This social media monster bringing in clients and prospects to companies, it’s a great tool for businesses and freelancers alike. Facebook will attract one seventh of the World’s population by the end 2012. Everything you would like to have in social media featured by one single company, on a single web page,  having a single descriptive word to be assigned yet: dominant.

I am aware of the fact that you can use it, know its basic features and know what it can do for you. I will discuss statistics and show how Facebook went from a “garage-born” company to a World giant dominating in the web.

Image by jdlasica.

Facebook’s stock market launch is $10 billion, 6 times bigger than its closest competitor; you may have heard of them: Google. With Facebook likely to be valued at around $100 billion, this would make it bigger than Disney, Amazon, HP, Cisco Systems and McDonald’s. You’ve heard of those five as well, all founded many years before Zuckerberg was even thinking of applying to Harvard. Between Google, Microsoft, Yahoo! and Facebook, although only 4th in 2011 by the daily number of visitors, Facebook holds a well-deserved first place in ad revenue. Facebook had by the end of 2011 a projected revenue of $4.2 Billion. Well, although Apple made that amount in three weeks, it is still impressive for a company that doesn’t sell products, but only advertising space.

Investments

Different people and companies invested money in Facebook rise at various stages in it’s lifetime – all of their investments paid off. Here are some statistics which are almost one year old, meaning the value of their investments is actually higher today. Below you can see the name of the company or the persons, how much and when the investment was made and how much it was worth by June 2011. Unfortunately not all the valuations are known, so we will just name the investments and periods.

• Peter Thiel, Reid Hoffman (2004) – $500K – $10 Million
• Accel Partners, Mark Pincus, Reid Hoffman (2005) – $12.7 Million – $100 Million
• Greylock Partners, Meritech Capital Partners, The Founders Fund (2006) – $27.5 Million – $2 Billion
• Microsoft (2007) – $240 Million – $15 Billion
• Li Ka-shing (2007) – $60 Million – ?
• Europeans Founder Fond (2008) – $15 Million – ?
• Li Ka-shing (2008) – $60 Million – ?
• Triple Point Capital (2008) – $100 Million – ?
• Digital Sky Technologies (2009) – $200 Million – $10 Billion
• Elevation Partners (2010) – $120 Million – $35 Billion
• Goldman Sachs, Digital Sky Technologies (2011) – $1.5 Billion – $50 Billion

Now let’s move on to the “population” of Facebook, almost three times bigger than the population of the United States. Around 80% of the users on Facebook are from outside the US. Looking at the number of internet users vs. Facebook users from all the World’s regions can even give you goosebumps:

• North America: 272 million internet users – 168 million Facebook users
• Latin America: 215 million internet users – 115 million Facebook users
• Europe: 476 million internet users – 279  million Facebook users
• Asia: 922 million internet users – 153 million Facebook users
• Africa: 119 million internet users – 31 million Facebook users
• Middle East: 69 million internet users – 16 million Facebook users
• Australia: 21 million internet users – 13 million Facebook users

The statistics are from 2011, so the number of internet users and Facebook users has increased a bit since then. If Facebook is able to dominate Asia as they dominate the other regions, they will probably reach 1.5 Billion users in few years.

Zuckerberg and his history

None of this would have been possible without the work of Facebook’s co-founder and CEO Mark Zuckerberg. Born in 1984, today he is the richest 28 year old in the world and the youngest billionaire. He can speak five languages and dropped out of Harvard to head for Silicon Valley and run Facebook. He still attends board meetings in sandals and had business cards entitled “I’m CEO b***h”. Quite the rebel for such a successful business man. He owns 24% of Facebook and at Facebook’s valuation of $100B, this would mean $24 Billion in his pocket if the company was sold.

The online display ad revenue is another hot one for Facebook, owner of 17.7% of the whole market, with Yahoo! following in at 13.1%. Google is third with 9.3%, while Microsoft comes in fourth with 4.9%. Multiple other companies altogether own 55% of the market.

Financial growth and power

Looking at Facebook’s valuation throughout time, it is incredible how the Palo Alto company grew so much, from nothing to $10 Billion in eight short years. In 2004 it was only worth a few thousand dollars and was limited to Harvard undergrads. Only five months after its release Zuckerberg rejected a $10 Million offer from Friendster after Peter Thiel, PayPal co-founder, invests half a million dollars in the social media company. Facebook had already started to attract the attention of internet experts.

One year later the company was valued at around $100 Million after getting $12.7 million in funding from Accel Partners. Another year passes and Facebook rejects a $750 million acquisition offer and raises $2 billion from investors. In April 2006 Facebook is reported to be valued at around $525 million. One year later Yahoo! offers to buy the company for $1 billion, but the offer is declined. Although Facebook declines the accurate estimate of the investment worth, Microsoft raises $240 million for Facebook by the end of 2007.

After Facebook started to refuse more investing in the company, the value plummeted from $4 billion to half of it. After a short period Facebook starts to raise funds again from different investors and its value reached $9.75 billion by November 2009 and to more than $10 billion as of today.

If you think Facebook is just a money making machine for its founders and investors, you are in for a big surprise. Europe and the European Union have a lot to thank Facebook for. Zuckerberg’s company adds an estimate of more than $15 billion Euros to the European economy. Facebook’s activity and platforms support 36,000 jobs in Germany, 35,000 jobs in the UK, 34,000 in Italy, 22,000 in France, 20,000 in Spain and 5,000 in Ireland. Facebook creates jobs and has a powerful economic impact on the countries above and some others.

User behavior

Ten percent of all the pictures uploaded on Facebook are profile pictures. Women tend to change them every other week, while men every third week. Every year users upload more and more photos on Facebook. The number of uploaded pictures per year for each user has tripled since 2006.

130 friends is the average number of friends a person has on Facebook. The main reasons behind sending a friend request to somebody are knowing him/her in real life, having mutual friends, being part of the same business network and being physically attracted to him/her. Seven percent of people say they just add everybody they see on Facebook without any reason.

While adding friends gives us some obvious conclusions, removing friends comes with some surprises. 55% of the people who remove friends do it because of offensive comments and 41% because they don’t know the person well enough. Lack of interaction, depressing comments, trying to sell something, political comments or updating the profile too often are some other reasons behind people removing friends from Facebook.

While men tend to use Facebook for career/networks and dating, women usually sign up on Facebook to receive coupons, offers and give positive feedback.

Believe it or not, Facebook depression is something true and easy to notice. People with more friends tend to write longer updates, talk less about their families and are less emotional overall. The time of the day usually has a huge influence on how positive or negative the updates are. Between 9 AM and 2PM negative updates rise. At around 6 PM positive updates reach a daytime low. During the afternoon most of the updates are negative still. The statistics reach a scary conclusion: only during the early morning most of the updates are positive. As a matter of fact, positive emotions get lower and negatives get higher as the day passes by.

Half of Facebook’s user database logs in daily and usually comment more on negative updates. Positive updates usually receive less comments.

The users in Australia spend the most time on Facebook per month, around 6 hours and 52 minutes. USA comes in second with 6 hours and 9 minutes, UK is third with two minutes less per month. This is an average of 10 to 14 minutes per day per user.

Almost half of the users between 18 and 34 check their Facebook first thing in the morning, some of them even from their smartphones before getting out of bed. In the US “Facebook” was for the second year in a row in 2011 the most searched word on Google, with 2.11% out of all the searches. “Facebook.com” was also searched by many users, placing fifth in 2010. All Facebook-related searches on Google accounted 3.48% of all the searches in the US in 2010.

But why?

Now that was enough statistics. You can find even more by reading the infographics I included in this article. I am sure some of you still ask yourselves why is Facebook more or less dominating the internet? And while I am not sure I hold the right answer, here is my view on the topic.

I think Facebook is so popular because it is the only web page out there that meets our needs and demands. Whether we like it or not, Facebook helps us communicate more – not better, just more…and quicker. Interacting on Facebook is definitely much easier than calling someone. Moreover, it allows users to only be contacted when they want – if they do not have time for friends, they can just avoid checking Facebook. A person calling you can’t be avoided forever, but a Facebook wall post can be avoided as long as the user wishes to.

The capability of  presenting ourselves as we want to be seen, not as we actually are, is something else that attracts people, especially the younger users. Many teenagers and college students look up to stars and actors and wish to have their lives. On Facebook it is possible. Just get a grip of Photoshop and edit your pictures so that you look younger, more beautiful and basically, perfect – manipulate them so that everybody who will see them (on Facebook obviously) will like and comment. You know you are lying to everybody – that is not the real you, but you still do it. It pleases you. It boosts your ego – and who doesn’t enjoy that?

In a way, Facebook is like Apple – the only difference is that one sells products that cost a huge amount of money, while the other offers you a social media solution for free. But they have something in common: they give users what they demand. You want a simple operating system? There you go, it’s called OS X. You want a nice looking computer, with a minimalist design which has never been seen before? Here you are, it’s called a MacBook. You want a product that will last for a long time if you take care of it? Here it is, we call it iPad. You want a sturdy music player? We have it and we named it iPod Shuffle. And so on. There is a reason behind Apple and Facebook being the most successful companies today.

Facebook does the same as the Cupertino based multinational. You want to be able to interact with people? You have the wall. You want to show pictures of yourself? There you go, this is how you can upload them. You want to have fun? We have Farmville and Zynga Poker. You want to always know what is happening? We call them Pages. You want to be able to have everything at the tips of your fingers? Here you are, Facebook Mobile and apps for every portable device.

Facebook, in its simplicity, solves the user’s needs. And this is what we all look for on Facebook. This is the main reason why we come back. We may like to closely follow our friends, play games, write funny status updates, follow companies’ updates or upload pictures of ourselves – whatever it is, Facebook makes it possible for us. This is the main reason behind Facebook’s world domination. And as long as they continue on this path, there is no way anybody will tear the giant apart, not even bad management.

Dare to think otherwise, why do you think such huge rise of Facebook happened pushing MySpace out of game? I would love to hear your opinion down below, in the comment section.

A bit more for you

Get a large mug of coffee and brace yourself for a guidebook that you will be forced to bookmark. Dining out with families or friends has jumped up exponentially with the growth of working eggheads. And all of us are aware of the reach of Internet in our day-to-day lives. It is this reach of Internet into the life of customers that has forced restaurants to rethink their online strategies. I won’t be surprised to see a restaurant with its own social media marketing team. After all we proudly spend more time on social media instead of sitting down with our families and watching T.V. Anyways, let us leave the social media debate for some other day.

Today, we are here to ripoff the restaurant website design trends and make sure that this guide will be all that you will need if you plan to have your next restaurant website design. I will present with every possible details and resources that a webmaster would require while kicking-off the next restaurant website design. So, gear up!

As I indicated before, this is going to be a lengthy article. So, here is a quick Table of Contents so that you are on track all the time:

1. Why are Restaurant Websites Scary?
2. Astonishing Statistics.
3. Your Own Jaw Dropping Design!
4. Single Page Restaurant Designs.
5. Restaurant Website Builders.
6. Awards for the Best Restaurant Websites.

Who would want to see the photograph of a chef on the home page of a restaurant website? Are you, as a customer, interested to know how the staff of a restaurant looks like? Of course not! We jump onto a restaurant website to find out the menu of the restaurant, get an idea of the ambiance of that restaurant, the prices, location and similar features. Who wants to know if the chef of a restaurant can give good autographs?

Visitors can tolerate a website that has not been designed for over 5 years if the current layout is already helping them find out what they are looking for.

Facts (that should be strictly ignored) that a usual restaurant website shouts out loud to its visitors:

• How the chef sniffs the oil.
• How they hire their staff.
• How the surroundings of the restaurant better than the restaurant.
• How the manager is the most friendly human being on this planet.
• Hot models (tagged as customers) busy stuffing food into each other’s faces.
• A letter from the owner that no one ever wants to read.
• Address or phone number is present in flash format so you cannot copy it.
• A soothing background music on the website that plays forever usually forcing the visitor to fall asleep.

Facts (that should be pushed on the website) that are usually ignored on restaurant websites:

• The menu in detail.
• The price.
• Ongoing offers.
• Original (and latest) photographs.
• The location (with a link to Google maps).
• The timings.
• Parking information.
• Advance booking options (that works).

Do you understand what I want you to understand? Restaurant websites try their best to look “cool” and in between all this they tend to forget whatever their website visitors are looking for.

Website visitors look for information NOT for flash. They want to know how your restaurant looks like not how your chef looks like. Show some sense, please!

To start with I will let the numbers do the talking. In no time you will understand how restaurants are leveraging on the advantages of a website and how there is still more room for improvement:

• Founder of Happy Tables reveals the importance of mobile optimization and the percentage of visits that restaurant websites get from such mobile devices.

• According to the Direct Marketing Association, email marketing delivers a $51.45 return on investment (ROI) for every marketing dollar spent.
• Consumers from North East and Pacific Coast between the age of 25 to 45 are said to take lead in researching a restaurant online before opting for the same.
• A research done by Palore explains the percentage of restaurants that have a website as per various major cities. Boston with 33% leads the chart.

• Over one third consumers prefer to read online reviews before opting for a restaurant.
• Around 50% of consumers use search engine to find a restaurant. (via AIS Media)
• Around one third of the consumers want pricing to be precisely correct on restaurant websites. (via Dining Grader)

Enough text to prove the fact that the restaurant website designs of today are lacking that spark which will twinkle in the eyes of the visitor the moment the website opens. Now, I will list down some of the imperative pointers that must be taken care of while working on a restaurant website design. Read these carefully. These pointers can make or break your restaurant website design!

• Turn OFF the background music - Oh please! I know your taste in music is simply awesome but do you realize that it might not match with the rest of your visitors? Moreover, a customer has the privilege to request music change but the same visitor when on a website might not enjoy that privilege. Please don’t plan a turn off for your visitors.
• Say NO to Flash - I am in no mood to discuss the future of Flash but I guess we are all on the same page when it comes to the various issues that are the reason why flash-based websites don’t work? Flash might be awesome but not when it crosses that “subtle” line.
• No PDF menus please - Why do you even need to upload a PDF menu? Users come to your website for instant information. Asking them to download a 20 MB PDF menu is simply kicking them off. If you really want to upload your PDF menu then leave an option for users. They will check the web-based menu and if they require a copy then they can download the PDF version. Also, please make sure that the size of the PDF file is optimized. Most of your customers might still be on limited dial-up connections. Here are some amazing menu designs for your next restaurant website.
• Reduce the required number of clicks - Do you really think that your visitors have the time to click five times before they are delivered with the information that they are looking for? Really? If the answer was yes then you haven’t yet understood your readers, seriously!
• Optimize the design for mobile - You will be shocked to know that half of your website visitors might be visiting your website using their smartphone. Have you ever tried to visit your own website using various phones? You will be shocked (again) to see how broken your designs are when viewed on phone browsers. Do something! Get a glossy looking mobile version for your website.
• Display original ambiance in your photographs - Imagine if the first impression of your restaurant’s visitor will be - This is not like they show in their photographs. Do you want your visitors to feel cheated? Get some real photographs that display the real ambiance of your restaurant. And, if the photographs display a dull ambiance then there is something wrong with your ambiance! Check the restaurant website photography tutorial at DPS.
• Don’t make the food look delicious in photographs when it actually isn’t - This is the most important pointer. I have ordered food by the looks of it and later on felt cheated because the delivered item never looked like it was shown in photographs. Why do you want the food to look attractive when it really isn’t? Get some real photographs, will you? Here are some food photography tips for you.
• Clearly display payment options - It will be easy for your customers if you tell them in advance if you do or do not (which is rare) accept credit cards. Let them know about every possible payment option that you can boast of but don’t fake it, please!
• Restaurant timings must be displayed - Let the visitors know what all are the restaurant and for how many hours can you stretch after the closing time.
• Smoking area availability - Those who smoke can’t live without one. If you have a smoking area then do let your website visitors know that you have one.
• Drinks permitted or not - Your visitors must be made well aware if you allow alcohol or not.
• Link to Google Maps and smartly use Google Places - From your contact section a link to Google Maps must be displayed. Let this be more easily accessible in your mobile versions as mobile visitors are the ones who look for instant location information.
• Display your social media buttons - Let your visitors RT your appetizing menu and LIKE your offers. Why miss out on the social media reach?
• SEO your website but don’t overdo it - Search Engine Optimization is important for every website. Make sure that your restaurant website design is search engine friendly but make sure that you don’t overdo the same and incur Google’s penalty.
• Show off the reviews (and stars) received on various websites - Users leave star based ratings on various websites for different restaurants. Keep a track of such websites and if you find that you have been rated positively  then don’t forget to show off the same on your restaurant website. Make sure that you give preference to the likes of Amazon.

NOTE – If you cover all these pointers in your next restaurant website design then you really are on a roll. Try them once and tell me if the list fails you.

Single page website designs have really been doing rounds lately and the restaurant industry is untouched. Here, I will list down seven amazing single page restaurant website designs for your inspiration. Explore the option of single page website designs.

Sortino Restaurant

Blink

Sesame

Smokey Bones

Corso 32

Luxe Tapas Tafel

The Slaughtered Lamb

Now that we done a lot of talking about restaurant websites and we know who are the best in business, I guess it is time to take the first step into this world of restaurant website design. So, here I have collected some of the restaurant website builder tools and applications that will make your first restaurant website design caravan exciting. And, be rest assured that the end results will be jaw dropping if you stick around without losing hope.

Although there are hundreds of website builders out there but why use any website builder when you have niche specific restaurant website design builders at your service?

Gear up and let us know if you are using any other service. We love to explore ..

• Culini - Culini helps you make professional looking restaurant website designs in no time. The website is straightforward in its vision and gives away all the necessary information without any terms and conditions. Sign up if you are looking for a quick restaurant website.
• Let’s Eat - Let’s Eat is a free restaurant website design builder which targets restaurant owners who cannot (or don’t want to) afford a professional restaurant website designer. The free version will be ad-supported while the pro version will come with a nominal fee which can be afforded by any restaurant owner. The application will take you through a series of steps and will collect a lot of information before they come up with a basic looking design for your restaurant website. The app even creates a page for customers to reserve seats in advance.
• Site Savor - Site Savor makes it super easy for anyone to come up with a restaurant website design. In no time you will be done with your restaurant website design which will bask in glory of various templates that are loaded in Site Savor archives. Go, have some fun building your own restaurant website.
• Bistro Square - Bistro Square helps you come up with your own website design in no time. It won’t test your programming skills and will push in an extra calendar feature for special events. Features like online coupon builder, mobile version of your website and multiple templates to choose from helps Bistro Square stand out from the rest.
• Honey Sites - The cheap restaurant website design builder for those who want plush websites. One might find the pricing of this service a bit over the top but with the kind of service and their own design, I guess they deserve one chance. After all, honey can make any food divine.
• Chomp Stack - Here is one service that caters to your mobile needs only. Chomp Stack helps a restaurant website to be available on a mobile device without looking weird. They offer plenty of services like GPS location finder, social media integration, custom currency, menu translation in various languages, mobile redirection and a smart control panel. All in all Chomp Stack is one service that you can try if you are looking for mobile compatibility.

Before we move on, I think we should go through some of the best judged restaurant websites out there. I agree that there is nothing like authentic awards system on the Internet but there are few that can be used for a rough analysis of what is happening on the Internet. I will list down best restaurant website award given by Web Award.

NOTE – I don’t want you to go through the authenticity of Web Award and I don’t want you to criticize their judging system. Rather, I want you to see the patter of evolution in the restaurant website design in past 7 years. See, how things have changed and what still needs to be changed.

• 2005 - Johnny Rockets - Colors take lead in the year 2005. The design of this website clearly shows how the choice of colors helped the website stay attractive without giving up on the looks of the website. See how the website has given up on the header and still the setup has worked out well? Although, I don’t see prices in their menu page but that is just one downside.

• 2006 - Montage Studio - Yes! Minimalism had started to creep in by the year 2006 and soon after it became trendy. This website displayed a very basic image that merged with the brown colored theme of the website design. The ambiance of the restaurant was clearly visible on the website and there was enough information to drive the visitor crazy. Although, it will make it a bit difficult for you to find the exact menu and the prices but then this restaurant isn’t for the average middle class (at least by the looks of it).

• 2007 - Mr. Broadway Kosher - The year when restaurant website design was hanging between minimalism and crappy designs. This website simply proves that the designers tried to come up with a minimal design that does not pop out of the screen. The information is there and the website is there. Basically, this design might fulfill almost all the user needs yet it will fail to create the charm that will make the user fall in love with the restaurant.

• 2008 - Four - Minimalism takes another step towards actual minimalism. Four was another landmark in the era of restaurant website design although it did not server all the purposes. You might be confused as to what I am trying to convey here. What are the pointers that these websites are missing. Well, just hold on. We will discuss that very soon.

• 2009 - Famous Dave’s BBQ - Ah! That era of eye popping flash website design. It was this time when website designers were running behind flash like never before. Everyone wanted a piece of flash as it had become very easy to design stuff in flash. All in all the website conveyed the message and was attractive.

• 2010 - Red Robin - Professionalism had started to become part of website designs by now. Red Robin is the perfect example of professional website design with perfect use of colors and perfect delivery of information that customers look for. The menu, logos, images and everything else was so perfectly placed. Nothing was out of order. This website can well be tagged as the perfectly professional restaurant website design.

• 2011 - Bull and Bear - The web had become more professional by now. They had started to understand how a background image can be used to style your website without giving the website that creepy look. Bull and Bear is the perfect example of using the background image perfectly to show off the classy looking restaurant without any issues whatsoever. It doesn’t hurt the eye and carries almost every information that a customer would want.

Did you notice that each of these award winning websites had something or the other missing. The fact is that people do not realize that the basic requirements of a restaurant website design are the very basic pointers that I mentioned in the first section of this article. Everything flashy is just secondary and really not that important.

While you need a lot of creativity to create a website or an advertising campaign, design can also be combined with something else: architecture. If you thought following a grid system is difficult, imagine interactive architects prototyping large buildings or interior designs in order for them to interact with people. It is definitely not an easy task.

What is Interactive Architecture?

Interactive architecture is a field of architecture and construction featuring objects which change according to how the user interacts with them. The environmental demands of interactive elements are individuals moving or touching them. Some people call it Responsive Architecture, but the term isn’t what’s important. “Intelligent buildings” appeared during the late 90s, when one of the pioneers of this industry, Michael Mozer, coined the term.

Today we will take a look at some fantastic buildings around the world built with user interaction in mind.

Electroland – Enteractive

As you will see in the images below, the project integrates many fields of interactive LED tiles which are placed into the ground. When people walk on them, they automatically start working and create a fantastic red-light ambiance.

And if you thought this is all, well, you are in for a surprise. Just look at that massive display of lights on the outside of the building which mirrors the patterns of the interactive tiles inside. There is also a built-in video display to show how the building looks from the outside.

Images by Open Buildings.

Kinetic Façade Brisbane Domestic Terminal Car Park

The project was established together with Ned Kahn, an American artist and with other companies such as Hassell Architecture from Sydney and Urban Art Projects. The Brisbane Airport Corporation was also involved in the development of this great interactive building.

It may not look impressive from the inside compared to the first example, but it is definitely a masterpiece from the outside. The entire eastern side of the building will ripple fluidly with the wind, which activates 250.000 suspended aluminum panels. With the wind in Brisbane changing frequently, the patterns will respond quite fast and the façade will be a direct interface between the building and the natural environment. The most well-known natural feature of the city is the Brisbane River. The building is embellished with rippling lines from the river’s surface.

Images by Open Buildings.

Inside the building patterns of light and shadow will be projected on the walls, thanks to the sunlight which passes through the façade. Considering the fact that the whole façade interacts with the wind outside, this creates a fantastic ambience for passengers in the building and for those in cars and elevators.

Kunsthaus Graz

This Austrian building simply looks fantastic. It would be enough for it to be called a great piece of architecture. The building was created back in 2003, when Graz was called the European Capital of Culture. The urban identity of Graz has its most important piece right here.

As you can see in the pictures above, one of the façades works as a giant instrument of communication placed right in the middle of the city. The synthesis between urban style, technology and the historic setting of the building is astonishing and the architects seem to have built a masterpiece.

Images by Open Buildings.

Kunsthaus Graz actually hosts a number of museums and meets up-to-date requirements for any kind of cultural setting. One of the building’s most impressive feature is the innovative and cost-effective air conditioning system. The lighting is modern, the security systems are unbreakable to ensure protection of different exhibitions and the underground parking offers space for almost 150 cars at a time. Kunsthaus Graz is hosts all kinds of exhibitions, from contemporary art to photography and new media.

This is not only another beautiful building, but also an astonishing milestone and point of interest for the big city of Singapore. It is a complete entertainment district with theaters, clubs, bars and public space stacked up into a cube-shaped building of 80m x 80m x 80m. Different levels of the building are linked through “tornadoes”, vertical circulation voids aiding people’s movement through the huge construction. And if they weren’t already doing enough, the “tornadoes” also burst out onto the rooftop if you wish to – and there is a lot to see up there as well.

Images by Open Buildings.

What attracts peoples’ eyes is one of the façades, where the interactivity achieves its peak. People can send messages, graphics or images to be projected onto the building. Imagine asking someone to marry you this way. Quite fancy, ain’t it? There are no less than 3,000 modules of deep-drawn polycarbonate covering each of the façades.

Connection

If you thought the Canadians don’t have something to show off, you are wrong. They created this bridge that acts as a pedestrian walkway to Maple Leaf Square in Toronto.

The bridge is illuminated in three different colors based of human movement geometry. This transforms a rigid bridge into a fluid entity which attracts many visitors.

Images by Open Buildings.

Constellation

I assume you always wanted your own constellation when you were younger, right? If you visit London, you will maybe have the chance to own one; not in the real sky, but thanks to 600 mirrored LED tubes hanging above the indoor market space at Covent Garden.

The three-dimensional arrangement of the tubes allows people at certain times to create their own formations within Constellation.

Images by Open Buildings.

Blur Building

I kept one of my favorites for the last showcase piece. This was built on Lake Neuchatel in Switzerland and works as perfect as the world renowned Swiss watch.

It measures 300 feet wide, 75 feet high and goes 200 feet deep into the water. Although hard to believe at a first sight, the primary building material is water pumped from the lake. It is then filtered and shot as a fine mist through high-pressure mist nozzles.

Thanks to the integrated climatic condition reader, which reads temperature, humidity, wind speed and direction, the pressure is calculated by a computer which then sends the information up to the valves.

Images by Open Buildings.

Although the blown water doesn’t give shape to anything specific, the building is still impressive and allows people’s imagination to flow. And it looks great.

Conclusion

This was a list of some places in the world where interaction between technology and nature or architecture and technology is the key element for creating fantastic experiences for people. Which one do you like the most and why? Have you visited any of these buildings? Do you have knowledge of another place like this worth mentioning?

You might not realize how important colours are in web design. If a website is green, it might as well be blue; it doesn’t matter. And while I thought this myself for a long time, I recently came to the conclusion that the color is actually going to make a huge difference and express something different to your audience. There are psychological effects behind each color and tone, therefore I decided to tell you more about them today.

Human senses get excited about lots of stuff. One of the most effective ways to excite somebody is to project a red hue color onto the walls of their room. It’s been done before by scientists and they came with a clear conclusion. A person who lives in a red room has a higher heart rate and blood pressure than a person living in a blue room. This is because red symbolizes excitement, we all know this. There is a reason why fast food companies choose red as their main or secondary color. Good examples are Coca-Cola, McDonald’s, Burger King or Pepsi (although blue is their main color).

Colors Stimulate Senses

Colors can stimulate and excite people, increase their appetite, make them feel warm or make them feel tranquil. Red simply makes you excited according to those who study chromodynamics. Coke’s website is red – it gives you a feel of a lazy, hot summer day – just when you feel the need to drink Coke.

Image Source: StockLogos

There’s more to colors in web design than just the emotional factor. People tend to gamble more under red light conditions than under blue light. This is the main reason behind cities like Las Vegas using a lot of red lights. Colors have impact on performance. Red lights make people act quicker and feel more powerful, which is not always beneficial, while blue makes people think more before acting. There is a reason STOP signs are red – you need to act right away and stop the vehicle you drive, otherwise you are in danger.

Mixing Colors

Mixing colors is beneficial if done the right way. Mixing very complementary colors is also something people do, but it should only be done occasionally. It shouldn’t be overdone because it has a bad effect on people’s eyes. You can think of a black website with pink text. Now that’s an image I would like to get out of my head as soon as possible :).

There is a very good trick behind using complementary colors together. Drawing a thin neutral white, gray or black line around the two colored shapes will make the eyes see both colors separately. Just look at the Pepsi logo below: red and blue are separated by not only a thin layer of white, but by a quite big one. This white shape blends red and blue better then if they would be placed right on top of each other.

Image source: Pepsi

Colors and Cultures

Moreover, colors mean something else in different parts of the world. While red means luck in China, it means a lack of it in Germany. Huge corporations with lots of financial resources will use large amounts of money to study the effects different colors have on different cultures, before entering a new market. Many think it is impossible, but clients can be lost because of using the wrong colors.

And while huge corporations usually hire experts to do this research for them, the results are not always good. Every designer (and every person in general) has a tendency to like colors or combinations of colors and to use them in different situations because it’s what they personally like. I myself love red and black together, pretty obviously because I’ve been supporting Italian outfit A.C. Milan for almost ten years now. This is not such a good asset when working with colors is your way of earning a salary. It is crucially important for designers to tear all their personal favorites apart and only focus on the clients and their needs.

Colors for a Website

Picking a color for a website means much more then picking your favorite color and turning it into a layout. It means picking the right color in order to get the desired response from your audience. If you know your audience well and figured out which color works best for them, you are already halfway there in the creation process. It is also quite unlikely to pick a color that will fit every visitor of your website, therefore it is even more important to be able to determine which color and tone works best for most users you target.

Image source: 123RF Stock Photos

According to different sources, half of the people visiting a website don’t come back because of the color of the design. The first thing people need to recognize when they see your site are the brand colors. If you have multiple colors and they can’t see the most dominant, it means you should consider a redesign.

• If you have a blue color scheme, people will likely give you a better response when in a good mood. If you want a clean, white design, it’s fine too. But if you want to make it exciting, use bright red or orange here and there. White and green work great together, and if you want to be stylish and modern without using intense colors, go for white and gray. Such a combination illustrates something glamorous, sleek, fresh and clean. Just look at the classy example below.

• If you like darker shades, pretty much everything works well with black as long as black is not the dominant color. A website with a black background can be fancy and look good, but is not easy to read. The two simplest combinations you can go for are black and white or black and a bright gray. Although a very powerful contrast, black and orange work really well together, but might require white for balance.
• If you want to combine both black and white with a color, then they work really well with blue; make sure white is dominant, otherwise you need a very bright blue to dominate. Don’t give black a lot of emphasis in this combination. You can see a good example below. The second example is quite poor and shows how this combination can be put into practice. Not only is the design outdated, but the colors make it even more difficult to bear.

• Black and white work very well with red too, but make sure red is not dominant, as then it gets too powerful and creates an unbearable contrast with black. You can see two good examples below.

• A third combination I would recommend is black, white and green, and you can see down below why.

Image source: Website Templates Online

Conclusion

Using the right color in your designs is crucial and I am sure you can see why. Although it might sound wrong, by using the right color in accordance to your audience will increase the likelihood of them doing what you want them to do. But wrong or right, this is what all designers work for, sending a message to an audience and then hoping to get a response from them. If you understand how color psychology works and which color fits your audience, you are a step closer to launching a successful website.

Gadgets such as mp3 players, usb devices, iPhones, iPads, and other tablets and so on have now become an important part of our lives and these are also one of the most favorite subjects for the designing community. This is the reason why you see loads of gadgets being incorporated into web designs. This can be best achieved by using Adobe Photoshop; and there are heaps of Photoshop tutorials to help you improve your skills and techniques. We have compiled 40 gadget design tutorials that will help you create sensible gadget designs using Adobe Photoshop!

In this round up, we’ll showcase 40 of the most excellent gadget design tutorials from different sources. Look into these high quality tutorials and make learning experience more satisfying.

1. How to Create a Detailed Audio Player

In this tutorial, we will show you how to create a detailed audio player from scratch. This tutorial will be a great opportunity for you to practice those Shape Tools and Layer Styles skills, with lots of adding and subtracting of Shapes. Enjoy!

2. Make a Floating in Air USB Key Illustration

In this tutorial, we will show you how to illustrate a USB key floating in the air and reflecting on a surface. We’ll be adding numerous details that will make this illustration shine.

3. Design an MP3 Player

In this tutorial you will learn how to design a product in Photoshop. The product is a RCA Lyra X3030 portable media player, the reason for this tutorial is to teach people the techniques used for mocking up a product design.

4. Create an USB Portable Audio Speaker Design

In this tutorial we will show you how to create a Photoshop design USB portable speaker logo icon in photoshop.

5. Photoshop Design Bluethoth Logo Icon

In this tutorial we will show you how to create a Photoshop design bluethoth logo icon in photoshop.

6. Designing Canon Digital Camera

In this detailed tutorial we will learn how to design Canon digital camera.

7. Nokia 5300 Cell Phone Interface

This tutorial shows you how to use multiple vector shapes, layer styles, and various tools to create a mobile phone design. It’s a nice design with multiple small details explained.

8. Creating a CD Player in Photoshop Tutorial

In this tutorial you will learn how to create a realistic cd player image shown below.

9. Design a Vintage Radio Icon in Photoshop

In this photoshop tutorial, you will learn how to design an old vintage radio using simple shapes, gradients, patterns and textures.

10. Learn to Create a Simple Yet Pleasing Music Player

In this tutorial we will walk you through the steps of creating a simple yet pleasing music player in adobe photoshop. Lets get going…

11. Make a Watch in Photoshop

In this tutorial you will learn how to create a watch from scratch in Adobe Photoshop. We will guide you step by step until it is complete.

12. How to Create a Super Retro Style Game Controller

In this tutorial, we’re going to be drawing a retro game console controller. Rather than a perspective look, this one will have an isometric look. This tutorial is extremely detailed, and will be fun for all you classic arcade lovers.

13. Draw a Sound Dock System

In this tutorial we will demonstrate how to draw a Sound Dock System with Photoshop. Let’s get started!

14. Creating an iOS Device Connector in Photoshop

In this tutorial you will see how to make a pixel-perfect iOS Device Connector design from scratch.

15. 3D Mp3 Player

In this detailed tutorial you will learn how to create an outstanding 3D Mp3 Player.

16. MP3 Player Illustration

In this tutorial you will learn how to create a beautiful MP3 Player Illustration.

17. Create a Motorola Droid Style Phone

Recreating electronic devices in Photoshop is a great way to learn. In this tutorial, we will demonstrate how to create a Motorola Droid style phone in Photoshop. Let’s get started!

18. Clean Mobile Login Screen Tutorial

Mobile design is getting bigger and bigger as the weeks go by, its only a matter of time before mobile design tutorials start popping up in every tutorial website. So to kick it off we will be showing you how to create a simple mobile login screen.

19. Render a High Detail Leica M8 Camera

Learn how to recreate this stunning image of a limited edition white Leica M8. This is a very lengthy Photoshop tutorial that will show you every step of the process. A PSD with 186 layers is included at the end of the tutorial.

20. Strawberry Cell Phone

In this tutorial we will teach you how to create a beautiful Strawberry Cell Phone.

21. Creating a Set of Digital Painting Icons

In this tutorial we will create a pen tablet from scratch, specifically the Wacom 12″ Cintiq tablet. This model combines touch and pressure sensitivity, which allows users to draw directly on the screen. These capabilities make it a favorite for illustrators. Let’s get to work.

22. Bamboo Fun Tablet

In this tutorial you will learn how to create an awesome Bamboo Fun tablet.

23. Create a Sidekick LX Styled Vector Illustration

This tutorial will show you how to make a vector illustration of the Sidekick LX. This tutorial uses mostly the Pen tool, basic shapes, and simple gradients to give this illustration a degree of realism. In this tutorial, you’ll learn quick ways to make stylized vector illustrations.

24. Design a Colorful USB Flash Stick with Tattoo Style Decals

In this tutorial, we’ll explain how to create a semi-realistic flash stick with gradients and simple shapes. We will make our own custom brush to create tattoo style swooshes. Also, we’ll review how to use Global Colors in Illustrator, which allows us to flexibly change the colors of an object on the fly.

25. Draw an MP3 Player

In this detailed tutorial you will learn how to create an MP3 Player.

26. USB Stick Tutorial

In this tutorial we are going to teach you how to design an awesome USB device.

27. Design a Shiny Photorealistic Apple Remote

Apple has so many beautiful products. Their product designs consistently attain a sought-after status, which distinguishes them as an innovative company. In this tutorial, we will teach you how to make a shiny new apple remote.

28. How to Create a Detailed Apple iPad Icon

In this tutorial we will be showing you how to create a Detailed Apple iPad Icon in Photoshop

29. Design an HTC

With this tutorial we will see how to create a smartphone HTC starting from the beginning. At first sight it seems a long job but, we can assure, it is not difficult at all. We are going to use several simple shapes, such as rectangles and circles and each one will be formatted in different styles.

30. Learn To Create A Sleek Shiny Mouse

In this tutorial we will be showing you how to create a sleek shiny mouse from scratch using adobe photoshop CS5. Lets get started.

31. How to Draw a Realistic Mobile Phone

In this Photoshop tutorial, we will draw a realistic mobile device. Our aim is to make our work appear so realistic that it looks just like a regular product shot.

32. Blackberry Fruit phone

This is step by step photoshop tutorial that teaches you how to create original and nice blackberry glossy device concept design from blackberry photo using simple tools, filters and layer style effects.

33. Create a Sony Playstation 3 (PS3)

This tutorial teaches you how you can create a realistic looking Sony Playstation using Adobe Photoshop. Each stage is simply outlined allowing you to follow along.

34. Create iPhone From Scratch in Photoshop

In this tutorial you will learn how to create iPhone from Scratch in Photoshop.

35. Make an Apple iPod Classic in Photoshop

In this tutorial you will be learning how to create an iPod classic but also you can use the same technique to make an iPod nano.

36. MP3 Player Photoshop Tutorial

In this tutorial you will design an interface for a modern MP3 player.

37. Create a Realistic Blackberry Style Mobile Phone From Scratch

In this tutorial you will learn how to create a Realistic Blackberry Style Mobile Phone From Scratch.

38. Create a Vector-Based Zune with Photoshop

In this tutorial you will learn how to create a Vector-Based Zune with Photoshop.

39. How to Create a Realistic Nintendo Game Boy

In this tutorial we will be creating a realistic water text effect that is sure to catch someones eyes. This tutorial requires some basic knowledge of Photoshop and how to work in it’s environment.

40. iPod Shuffle From Scratch

In this tutorial you will learn how to re-create an Apple iPod Shuffle by using the original image from apple’s website as a reference and using the gradient tool, layer masks and basic selection and guide techniques.