Design Superstars

30 Gorgeous Examples of Using The Flat Design Concept In Creating Websites

Bogdan — Mon, 17 Jun 2013 20:54:08 +0000

Flat design is extremely popular these days, mainly because of the newest version of iOS which has a flat interface. This type of design is great because it gives a better user experience while keeping the overall design at a high level of quality. The main characteristics of flat design are the minimalist approach to the user interface, the sharp edges, the clear buttons and descriptive icons.

In a flat design you won’t be able to find unnecessary visual components such as 3D effects, flash videos, useless shadows, gradients or any other elements which can disturb the reading comfort and usability. This type of design has inevitably been started to be used in creating websites and not only software applications. As far as I can see, the web design community embraced it extremely good and many web sites are absolutely gorgeous.

If you are looking for some inspiration then in this article you can see a collection of 30 great flat web designs which I’m sure you’ll like.

Rijks Museum

Romain Briaux

Teamsort

So World Wide

Wellington City Council

Rezo Zero

Frank Digital

Le Rockwood

TriplAgent

Playground

WerkPress

Ivo Mynttinen

Knock Knock Factory

MapBox

Wistia

Into the Arctic

OnSite

Sumall

Foundation by Zurb

Geckoboard

Scriptogr.am

Squarespace

Karma

Visual Supply Co.

Fhoke

Designed to Move

Its a Shape Christmas

Buffalo

Let’s Travel Somewhere

Tynan D’Arcy

Websites That Rock! 30 Extremely Interesting Examples Based On The Power of CSS3

Bogdan — Wed, 12 Jun 2013 17:33:57 +0000

Without a doubt, your website must look stunning if you want to attract visitors because nowadays, thanks to the evolution of web development tools it is more easier to create a great design than it was a decade ago. These new iterations of scripting and programming tools such as CSS3, HTML5, jQuery, RoR and so on, makes our life easier but in the same time they are creating a stronger competition among the web development community. If ten years ago there were only a few web designers or developers capable to create something stunning, now it’s extremely hard to make an impression.

In the past, almost all websites were focused on usability rather than on design; everybody followed the same rules such as the menu on left, linear navigation, defined header and so on. The user didn’t had any high expectation and he was mainly interested in getting the information rather than analyze the overall design. Nowadays everything is changed: if your website’s design is not great and if the viewer is not impressed, your content might be irrelevant. The current user is a lot more picky because he has a lot more websites to choose from, so if he doesn’t like something on your page, he will easily jump to your competitor.

Being that said, we designers and web developers must always come up with new and attractive things while making the website as optimized as they can because if you are implementing a plethora of design elements or effects, you might end up with a trash bag. One of the most used scripting language for making gorgeous websites is CSS, so if you are planning to learn it, then you should check out its power. Below you can see 30 extremely creative implementations of CSS3 in web design which I’m sure that you will simply love.

Dejavu

Leo9

Talkzilla

Armigesfahani

Alexey Bokov Studio

Vou de Kombi

Moving Pencil

Milostny trojuhelnik

Smart city hostels

Empire State Studios

Adam Rudzki

Life is vertical

Les Chaises Hautes

Barista Prima

Bloota

B-stro

Saunier

Kreatika

Index-std

Life is a parade

Mahedine Yahia

Kick My Habits

Amplifon

Le rockwood

Borgo27

Common Mistakes When Choosing Images For Design Projects

Bogdan — Mon, 10 Jun 2013 12:49:10 +0000

There are many bad ways to find images for usage on the web, such as Google ganking. Google ganking occurs when people use the Google search engine to find images to use for their own personal use. A person who is creating a website may search for specific images that fit with the theme of their website, such as images of food for a food website. In many cases, it’s perfectly fine to use search engine images for personal use, as there are many websites that encourage this by providing free content for public download.

However, there are cases where it is wrong to do this, as the images may be copyrighted material, and unless a user has the permission from the owner to use this content for personal reason, then it is considered as stealing. Most people don’t think that a content owner will notice their usage of the copyrighted material, but there have been many cases where people have been faced with cease and desist orders over stolen content. In some severe cases, lawsuits have been filed against the user.

A similar problem occurs with Flickr, a site that allows users to upload images and arrange them in online archives that can be viewed privately or publicly by anyone that has access to account. Many of the images that are found on Flickr have some kind of copyright placed on them by their owners. When users search Flickr and take the images for their own personal use without permission, they are performing acts that can leave them in legal trouble if the content uploader desires to take action.

A content uploader can give any of their images a Creative Commons license. The license acts as a rulebook for under what instances the images can and cannot be used by others; for example, commercial use is allowed by enabling one of these licenses. Flickr users can even search for particular images that have commercial licenses enabled.

Stealing content from other websites is bad enough in its own right, but it’s even worse when people link to their own servers to steal the content. This process is known as hot linking, and it’s quite a common occurrence on the Internet.

Usually when a website is created, the site and its images are placed on the same server, most of the time using a line of code like this: : .

These same images can be linked to from areas of the Internet beyond the website, using this line of code: .

By doing this, a person can avoid downloading the image and uploading it on their own servers, and just piggyback off of the already uploaded image. Hot linking is a pretty bold and lazy way of taking another individuals content, without actually taking anything. Many website designers are aware of their images being hot linked and become quite angry at the process.

Hot linking is bad, but not only for copyright reasons. Since images are link to from their original server when they are hot linked, they use the bandwidth of the website. In many cases, website owners do not have unlimited bandwidth, and if they surpass the amount of bandwidth available to them at a given time, then their website may become inaccessible for a period of time. They may also have to pay fees in order to get more bandwidth. It’s similar to making a phone call using another person’s phone and wasting their minutes.

Most of the common hot linking offenders are people who use images on a public level, such as forum users, social network users, and bloggers. Professional websites avoid hot linking and instead use their own personal content. Many websites have taken active measures against hot linking by preventing their images from being linked to externally. When a user tries to hot link to a particular image, a special line of code is activated that shows an incorrect image, or not image at all, on the user’s end.

Clip art may be fine for use from a legal stance, but most of the time, it doesn’t look very appealing or attractive. Most people appreciate the use of original content that is generated for a specific purpose when they visit a website. Clip art is the exact opposite of original content, using comical and cartoon like images that usually have a vague relevance to what they are trying to show or advertise.

In the early days of the Internet, clip art may have been seen as an acceptable element that could be included in any website, but now people see it as antiquated, cliched, and cheesy. Since most forms of clip art are either free and available for public use, or cheap in the form of purchasable clip art packages, some people will still attempt to use them for various purposes, but it’s generally accepted that anyone who wants a professional looking website should stay away from clip art and use more personalized images. At this point, clip art should be left to lighthearted content, such as greeting cards, simple bulletins, or joke pages.

Presentation should always be taken into account when choosing images for a website. Often website creators will just use any image, whether obtained legally or not, without giving it the proper formatting or without placing it in relation to the layout of their website. This often results in websites with images being too big or too small for the website. In addition, sometimes the images are out of alignment with the text or menus of the website, creating a messy look that confuses anyone who browses the website.

Images must be cropped or re-sized in order to work with the other contents of the website, keeping in mind where margins are placed. Website creators must also determine whether borders or frames are added to images, depending on how the rest of the website will look andisual effects can be applied to the images to fit in with the theme of the website as well.

As a conclusion, whenever you are trying to use an image on a design project be extremely careful from where you get it and also be sure that it’s the best possible solution in terms of looking and copyrights.

20 Useful CSS Snippets Which Can Help You A Lot

Bogdan — Mon, 20 May 2013 10:57:30 +0000

CSS is extremely used when it comes to web development because it helps creating a lot of things with ease. Using CSS means that you will not only be able to create a great web site but it also means that you can optimize it very well. If you combine it with HTML5 and jQuery then you can make almost anything starting from a simple movie player and all the way to intricate browser games.

Unfortunately, in order to use CSS you need to know how it works, so if you are a beginner then it will take you a lot of time to create even something easy. Even more, if you are not a beginner but you have a tight deadline, researching and coding means a lot of time. Thankfully there are a lot of CSS3 snippets on the web, so you don’t have to spend endless hours figuring out how to reinvent the wheel. In this article you can see a collection of 20 useful CSS snippets which will definitely help you a lot when creating websites.

Top Bar

Mini Dropdown Menu

Notification alert modal windows with CSS3

Mac OSX-like animated folder with CSS3

Simple Hover CSS Menu

Responsive CSS Navigation Menu

Toolbar CSS snippet

Month Picker

CSS Page Fold

Form Alert Interface in PSD and CSS

CSS Animated Buttons

CSS Windows 8 Metro Buttons

Dark and Light Dropdown Lists

Countdown flip clock CSS + jQuery

Share Buttons

Newsletter Sign Up Form

Facebook Notify Widget in HTML/CSS

CSS3 trendy retro photo effect

Custom CSS dropdown list

Beautiful Slider Interface

10 Extremely Gorgeous Google Web Fonts

Bogdan — Thu, 16 May 2013 18:02:10 +0000

We all know how important a good typography is on any type of design; it acts as a non verbal connection between the viewer and the message which must be delivered. Even if we are able to create the most intricate and amazing designs which can boost the interaction to the sky, if you don’t choose the perfect set of fonts then the chance of ruing a good design is extremely high. We use the written language for spreading ideas for thousands of years, so the human brain is perfectly adapted to this way of communication, as long as the typography fits the message.

In web design, using a good font acts the same: it makes the user more interested in your website, it makes the whole experience a lot more comfortable and even more, it can even promote your website. When creating a website, using a font seems easier: you load it in a css file, specify a chain of fonts to use if the preferred one isn’t available and you are done. Well, that’s true but what happens when you don’t want to use a boring standard font? Even more, what about the compatibility across the sheer number of users?

Well, the best idea is to use a web font because this way you will fix a lot of problems such as loading speeds, customization or font variety. Google’s web font solution is one of the most used approach because they are free and extremely easy to implement. If you want to read more, I strongly recommend you to head over this page.

Below you can see a collection of 10 extremely cool Google web fonts which I’m sure you will love.