Twenty years ago nobody knew what they were doing when designing a website. It was all something new and you couldn’t talk about strategies, research, laws, theories and typography. It was all chaotic. And it all started in 1989, when the first browser called World Wide Web was released, in the same time as the first website. However, it is not possible to see the first website ever, as there isn’t much information about it, but a website looked pretty much like this one and was used to give out basic information.

It all continued on a very slow path until 1996, which is considered by many the beginning of a new era in web design. Designers started using background colors – most of them really vibrant and painful to look at – but some of them kept it simple and decided to go for white – and even used some other fonts than the default ones. In this era people started overusing the animated GIFs we all hate today.

In the screenshot below you can see the Yahoo! website back in December 1996. This is one of the good examples of that year, but trust me, not all of them looked this good. You’ll see other websites below from 1996 – I am sure you can’t look at them  for too long and would be able to make a very long list of mistakes. People were not doing this back then, because the web was quite new and they were really happy with the websites they had – these were huge achievements for them back then.

Yahoo!'s website in December 1996

McDonald’s webpage was incredibly hard to look at, although there was not much text. The background red combined with the yellow created a very powerful visual – truth is that everybody associates this color combination with McDonald’s today, so it might be also thanks to their first webpage.

McDonald's website in November 1996.

aol.com in December 1996

Aligned to the left and with a maximum width of around 600 px, Apple’s website was not very smooth back then – unlike today. However, their design was still one of the best available on the web and looking at it didn’t affect your eye’s health at all, unlike some of the other ones.

Although not as fancy as today, Apple's design from March 1997 was one of the best on the internet.

Shortly after this era, another one started: the era of Cascading Style Sheets. Although not even half as advanced as today, CSS made a huge difference back then. There were still many wrong colors being used, but the layouts started getting better and you can see in the screenshot below some of them even used a grid system, if you are not so demanding and precise.

Yahoo’s June 1998 website was actually looking good and it was one of the best of its generation. But what would you expect from the king of the web during the 90s?

Yahoo! Kept a white and clean background, but still had blue link colors.

Google’s 1998 webpage, although the service was still in beta, looked really simple for that period, a trend which the American giant has continued with, right up until today. The main functionality of Google was and still is searching, therefore there was no reason to clutter the site too much.

Google Beta (1998) had a smooth design.

As you can see in the screenshot below, Apple’s webpage evolved a lot from 1997 to 1998 and already started looking like what was going to be one of the pioneers of the minimalistic approach. Big visuals, not a lot text, no advertising and an interesting layout – this all started shortly after CSS1 and continues to this day.

Apple.com in July 1998

Even AOL’s website looked better by April 1998. They started to have a grid system, used the colors of their logo and personalized their menu by using buttons.

AOL in April 1998 (not all the images captured)

The colors were becoming even more popular because designers thought they will keep the people on their web pages. They didn’t think the same colors would make it impossible to look at the page for more than a few minutes. However, as said before, the good that came from this was the fact that it associated colors with brands – blue for Microsoft, red and yellow for McDonald’s and so on.

Another problem were the fonts. Times New Roman and Courier New were very popular (Comic Sans was already released and soon to become hugely popular). Although there were many other options, people preferred to use these two typefaces in everything, from web pages and invitations to e-mails and documents. Writing with black was popular and everybody kept it like that. If there was something which needed to stand out, red was the color of choice. Otherwise I am sure you remember the blue underlined links (which you can see in most of the examples shown here until now). Because typography was not an important part of the design, bold and italics were not very used either to make text stand out.  A font that was widely used in the 90s and is still very popular today was Arial, which can even be seen on AOL’s website.

Leaving too much empty space was madness back in the 90s, also because centering a web page was not very popular. You can see Yahoo!’s first website (shown above) and notice how much empty space there was on the right side. People also started using background images, but because the images were not big enough, in many cases they started to repeat them and this created an awful visual.

Buttons also started to appear and become more and more popular, because they allowed designers to further customize the menus and put the focus on the navigation, while icons were also used all the time – it was the first time when visual elements had a use. This was also the period when animated GIFs exploded and everybody used them. There were almost no websites without them and people really appreciated the effect they created.

The year of 1999 was the year of a change. People started to design smarter and thought more about usability, grid systems, layouts and even colors. Most of the websites with vibrant background colors were redesigned and started looking better (McDonald’s got rid of that vibrant red from the background one year before).

CNN's webpage in August 2000 (not all the images captured)

Microsoft in February 1999 (not all the images captured)

Shortly after this, bright colors were on the way out and creating contrast between the background and the font color was critical. Most of the designers started using white as the default background color and it worked really well. Designers started designing in pixels instead of inches like they had been before. Maybe the most important thing was the fact that the content of a page was ordered, with the menu being in focus most of the time.

The importance of typography increased as well during this period, with people thinking a bit more about the target audience. Comic Sans becomes popular for child websites (although for a period it was used for everything) and some other fonts come into focus. There was no option for embedding back then, so designers were constrained, but at least they started to experiment more with what they already had.

Websites were not flexible at all back then and because of the many screen sizes available, it was difficult to design something to look good for everybody – responsive design was just unheard of. The use of buttons started to decrease as well because people learned how to properly play with font and colors – typography’s importance increased even more.

GoDaddy's website from December 2002 even had a dropdown navigation.

By August 2002, Apple’s website looked a lot like the one they have today. The navigation was a dropdown, they used big images for the featured article/product and four small boxes for other products at the bottom – a lot of similarity with Apple’s current website. The Cupertino-based company showed everybody how they should design a simple, but effective website.

Apple in August 2002.

The use of icons and boxes increased. As mentioned earlier, icons were a good way of focusing the users attention (especially on navigation links), while the boxes were used to help the user find his way around the website and also for structuring content. Luckily, the use of animated GIFs decreased by this period and they would never be as popular as they were a couple of years before.

Another era started in 2002, when the so-called web 2.0 concept appeared for the first time. The use of colors became more theoretical and everybody used them to make the websites more appealing, rather than flashy. The use of Flash – right then on its way in – was popular until 2008 when its use decreased dramatically. Flash animations became more and more popular and most of the websites started looking more professional, as we would say today.

Forums were already spread around and most of them had the same look and feel, like in the image below.

Softnews Romania in February 2003

Shortly after this, the hover effects started to appear and they were a hit. Everybody was using them because they created focus and helped the user navigate.

Footers were also increasing in popularity and they were always used to display copyright information, privacy policy, terms of use or contact information.

Color palettes started to become harmonious and be used wisely. They started to create impact and designers knew that, if used correctly, colors can make a huge difference, especially then when not everyone had this information. The use of typography increased and, combined with colors and contrast, made the text interesting – for the first time in web history.

Responsive web design still didn’t appear at this point, but at least there were no more problems with background images. Now it was easy to calculate everything in pixels and repeating background images disappeared (they appeared again later on to create what we now refer to as patterns). Also, using background images instead of solid colors went low-key and designers preferred to avoid it.

Probably the first real interactive website was one for Coca-Cola. They showed the world how to use colors smartly and how to integrate them with flashy, visual animations that kept the users on their page for ever, even if there was not really too much going on there.

The web as we know it today started in 2005, when everybody realized cluttered sites are not popular, and started to keep them as simple as possible. Single pages appeared and made a huge impact because they were just what lots of users needed. Single pages gave design a fresh look and simplified the navigation. Designers started playing with font sizes and color and combined them so that text was in focus – integrating multiple fonts was tried for the first time in this period. The “back to top” button was also seen for the first time in this period and many websites adopted it, as it made navigation easier.

By mid 2006, Yahoo!'s webpage was simple and effective - no flashy elements.

In this period websites were becoming more than just a way of supplying basic information. They were part of an identity, soon even a part of a strategy and people visited them not only for information, but also for relaxation and inspiration.

In 2008 another era started, which lasted for only few years (although some signs of it are still online today). This was the retro period, where old fashioned elements started becoming popular. No, not the GIFs and the tables, but retro colors, text, illustrations and other elements could be seen all over the place. This is also when the minimalistic design approach started, but it was nothing more than an idea yet.

forefathersgroup.com incorporates lots of retro elements

The minimalistic approach started to become more than just an idea in 2010. We are currently in the minimalistic era, where it all has to be designed fast, it has to stay simple and still do its job and create an experience for the user. At the same time, although many websites turn to this concept, each one of them has to have something special – so that people will remember it and come back. Now it’s a lot about colors, typography and contrast – the best one being between white and black.

How simple can a website be? Apple's the best example.

There are things we can notice everywhere. The color palettes are congruent and are not thrown out there just for the sake of it – they are used with a purpose. Hierarchy was introduced as well and it is not only shown through position, but also through font size, font type and colors. Balance is also a key word in today’s web design and creating a positive, attractive atmosphere on the website is the purpose of any designer. Responsive web design is popular today and there is no such thing as not being able to make a website look good on all the screens.

The typography goes beyond limits and being able to embed fonts made it even more challenging and interesting. Although too many fonts can lead to a bad design, if you know how to use them you will learn the key to getting people to read your text. Buttons are still used (think of Twitter, Facebook, LinkedIn and RSS) and are the way to navigate through pages, although they are not widely used anymore in menus. The problems with images and resolutions disappeared as well.

There is also a new style in town for background choices. There can be images, patterns or even solid colors – in today’s web you can integrate them with everything. Animations are not popular anymore, but are still used here and then – however, they do not affect the loading speed of the sites as much as before.

With more than 20 years since the design started to develop, it is easy to see that everything moves fast and that everything keeps improving. It is amazing how you can think that nothing can be better, and then in a few years something new comes and everybody is excited about it. The internet went from rough to beautiful and useful and will most definitely continue on its path upwards. Lots and lots of changes will continue to be made and the question is: are you ready for them? Are you ready for when a crazy designer will see an opportunity to push the web even farther? Will you jump on his bandwagon or will you just continue to do things the way you do already? If the history of web design has taught us something, it is the fact that we always continue to evolve. You should always be ready and willing to do the same when the opportunity arises…

Have you ever thought about what exactly these colours are that we see in our everyday lives? They are so common, such a natural part of the world, that we take them for granted without feeling the need to delve deeper into the subject. Prepare to see the world through different eyes!

Newton and Goethe

Newton and Goethe have different ways of viewing the formation of the spectrum: the first sees light as being composed of colours, with darkness being the absence of light; the latter considers that they are formed through the interaction of light and dark, for example yellow is darkened white and blue is lightened black. While Goethe’s approach is more empirical and based on perception, he recognized the importance of magenta in the spectrum, and the fact that we use it as part of CMYK reflects that importance.

It’s important to remember that the two had different points of view when analyzing the respective phenomena, so it’s obvious that there are fundamental differences. Newton’s fundamental spectrum is, as we know, the rainbow and this is based on scientific analysis, while Goethe describes a symmetrical wheel based on perception and composed of six colours: the three primary and their corresponding complements.

Goethe further describes a difference between natural and chemical colours. The first category refers to those that are part of the fundamental spectrum described above, and are not a part of the object or material, thus the objects are colourless in the absence of light. Those that are not part of the spectrum fall into the second category and are a permanent characteristic of the object or material.

True Colours

However, scientifically, they are obtained from light and they correspond to different wavelengths which are perceived and processed by different cells in the eye. We humans have what is called trichromatic colour vision, meaning that we have three types of cells which aid us in segmenting the chromatic spectrum. This also implies that there are other types of colour vision, so think about it for a second: other beings may live in a completely different world than that which we know.

The absence of the aforementioned cells will render someone colour-blind, meaning that they cannot distinguish certain shades. You may now be asking yourself “Ok, but what does this have to do with design?” and the answer is accessibility. Using only colours to express contrast or emphasis can be problematic for someone with such a disability, as two shades with the same brightness and saturation, but different hue can appear to be identical.

As mentioned above, two colours may end up identical when completely desaturated.

All is not as it seems

On the topic of distinction, it has been shown that linguistic classification has a very important role in how we differentiate colours. The Himba people have a completely different system. Green, for example, may fall under different names, depending on the shade, and may be in the same category as a certain shade of red. Using the same example, dark green and dark red may seem nearly identical, while the same dark green may seem completely different from another close shade of green.

Perception greatly depends on the amount of contrast and light in the environment. As mentioned in one of my previous articles, brown is in fact a variant of yellow, orange or red but it may be perceived as such in higher contrast surroundings. Our interpretation of a colour can further change in the presence of gradients, as these tend to signal depth to the brain which also judges lightness (or darkness) by comparison.

The rectangle in the middle is actually one solid colour, but it appears to be a gradient because of the double contrast with the actual gradient in the background. Don't believe it? Use the colour picker tool and see for yourself!

Colour theory says that warm colours are “near” and cool colours are “far” because that’s the impression that the brain gets. Covering one eye with a coloured filter (let’s say red) and balancing a pendulum will make it seem like it is swinging in a circular pattern. The same basic principle is used in 3D movies by splitting the image into red and cyan layers which superimposes properly when wearing the special 3D glasses and give the impression of depth.

High-enough contrast along with a pattern can create optical illusions, just like those circles that appear to be moving. The main ingredient is powerful black and white contrast; it is thought that these two send different signals and activate opposing triggers in our minds, thus confusing it and creating the impression of motion. Another thing to take into consideration when designing: high-contrast patterns might turn into optical illusions and possibly make people look away.

If you move your eyes across the image, it will slightly move in waves.

A phenomenon called “afterimage” can occur in the retina, and this causes the brain to continue receiving an image, but as a negative. This happens if the image is large and over-stimulates the receptors, the natural “phasing-out” of visuals being too slow. It is also why we see dark spots after looking at a bright source of light; the opposite of light is dark.

Despite being such common elements, there is much more to it than meets the eye (literally). There are many underlying processes that occur in order for us to perceive colours the way we do, some of which we do not fully comprehend just yet.

1. Balance

Balance is how the elements of a design are distributed throughout a layout. If the balance is good, then stability is assured, although lately many designers go for unbalanced designs because they are dynamic and offer a totally different perspective. The personal pages are the most suitable for slightly off-balanced layouts, and you will see some examples soon.

To be able to notice what kind of balance a website has, you need to know the three types of balance: symmetrical, asymmetrical and radial. The first one takes place when both sides of a design are the same in shape, lines, texture and so on. Because this is the way we design today, this happens most of the time along a vertical axis, so when we talk about the two sides of a design, we talk about left and right. There are also examples along the horizontal axis and sometimes even along both of them, but these are rare. The symmetrical designs are pretty much most of the websites on the internet until 5 years ago.

The second type of balance occurs when the two sides of a website do not look like each other, but still have elements that are similar. Although it is called asymmetrical, they still provide some symmetry, like the first type of balance, only at a lower level. Asymmetrical websites are becomimg more and more popular nowadays (see WordPress layouts with content on one side and sidebar on the other).

The radius balance takes place when design elements are placed in a circular pattern. They give a sense of movement, dynamism, but it is not seen very often on the internet, because even the most experienced designers have problems laying out such a design.

As said earlier, balance is achieved through shapes, colors, textures, lines and the other elements we’ve talked about in the first episode.

Florida Flourish is a good example of a total symmetric website

Duplos uses an asymmetrical layout which works really well.

2. Dominance and Priority

These two principles are together because they are strongly linked. They both have a lot to do with the user experience because a lack of priority and element dominance can be confusing. The dominance level is the one which prioritizes the importance of different elements, such as menu, logo, content or footer. Sure, this is also done by playing with the font and size, but let’s go a bit deeper and see what dominance and priority mean.

There are three main levels of priority. We have the headline or call to action, which comes as a primary element; then we have the secondary elements like images needed to make a point or, most of the time, the navigation. They are obviously not the most important element of a website, but you can’t do it without them either. The tertiary elements are information like footer links, meta information on blogs or different elements, and a website can most of the time exist without them. However, they are used frquently because they complete the design in different ways, either by offering more information, or by completing the layout with some elements.

Area17 emphasizes the dominant element in the top left corner and the welcome message pulls you in as well because of the color.

3. Proportion

Proportion is important and represents the scale of elements compared to each other. They have a strong effect on the user and are also linked with the previous principle. It is no surprise that larger elements have a stronger impact on the user than the small ones. Dominance, priority and proportion work together to assure the user sees the information properly on a website. Having a larger font in the footer than in the content is a mistake because it does not respect these three principles.

Bluecated Interactive uses proportion to draw the attention on the image.

4. Contrast

This is another important principle not only of design, but also of photography and any other visual art. I don’t think we need to go too deep into this, because everybody knows what contrast means. Having enough contrast between elements makes sure that some of them stand out more than others. If designers wish to blend elements together, they do it by having minimal contrast between them. If the contrast is high, the elements are distinct from each other.

If balance is created through shapes and lines, the contrast can be created through color. However, lately the contrast has also been changed through typography and texture, so this becomes more and more popular. Having perfect typography can help you achieve not only the perfect contrast, but also proportion, dominance and priority. It is easy to see that the last three concepts we’ve talked about are slightly linked to each other in some ways. If we would talk a bit more general about this whole topic, we would be able to put all of them into the same paragraph.

eHarmony's "Find My Matches" button stands out because of a good use of contrast.

5. Rhythm

This might be a new one for you. The rhythm of the page is the principle that makes the human eye move from one element to another. It ensures the flow of the eye and in which order users should see the elements. Now this is a difficult one to make, because everybody has their own way of looking at a website and making all of them do it the same way might be too overwhelming.

There are two types of rhythms: the fluid and the progressive. The first one is a variation and the best example is the movement of water, which flows in the same direction basically, but has a lot of variation in how it moves. The progressive rhythm occurs when there is a clear sequence on how the eye should move between elements.

David Desandro's portfolio follows a very regular, progressive rhythm

6. Harmony and Unity

The last principle of design wants to ensure that even if all the principles above are used properly, it is still impossible to create a stunning design without harmony and unity, and this is quite often seen in real life. We often hear of rich people who have everything they want, but lack harmony and unity in their lives. It is the same rule in design. If all these elements work together properly, then you’ve achieved what we call unity. Only placing all these elements on a page without linking them to each other does not create a design, but a page with a bunch of elements. If the elements complement each other and the website is easy to the eye and offers a good user experience, then the work you’ve done is more or less finished.

There is no really need for an example here, we all know that websites with harmony and unity can be spotted all over the place; think of a website that you like a lot and that you always remember. That’s probably a website that has harmony and unity.

Conclusion

The second article of the series wraps up the process of analyzing the very basic principles of design you really need to know about. After reading the first two articles you pretty much have most of the knowledge you need to start designing your own layout, but wait a bit more. The third and last article of the series comes soon and will cover the basics of composition such as focal point, grid theory, gestalt laws and others which can also be used for products like magazines, flyers or brochures.

Read more in-depth

If this article only satisfied a bit of your curiosity, then I’ve gathered for you few other sources where you can read more about the basic principles of design.

Web Design Symmetry and Asymmetry on 1stwebdesigner.com

How to Use Size, Scale and Proportion in Design on Van SEO Design

Unity in Design on Van SEO Design

Developing Visual Rhythm in Web Design on Tynpanus

Principles of Design: Contrast on Sitepoint

Dominance on Van SEO Design

The main job of a graphic designer is to design visual elements for the web and print, such as layouts for websites (which are most of the time “translated” into real websites by the web designers), posters, brochures, flyers or advertising campaigns (both in web and offline).

There are in total six elements of a design which you need to be aware of: the line, the shape, the color, the texture, the value and the space.

1. The line

The line is usually present in every design, even if it is a solid border of 1px or a dotted one of 5px. Every website has lines, but the minimalistic style which became more popular in the past couple of years tries to erase the lines from the layouts, or at least to decrease the use of them.

The lines can be long, red, straight, thin, blue, dashed, short, black or curved, they are all into the same category. They are most of the time used for delimitation between different sections of a design, or are used to direct a viewer’s vision in a specific direction.

The lines can create different effects and visual impact. While a thick, bold line draws attention because of its visual power, the thin lines tend to go the other way. The color has an impact too, dark colors are easier to see and draw more attention than light or pale colors.

And this is not all. The style of a line can also influence the way the user sees it. This style can easily be defined through CSS and can be solid, dotted and dashed among others. The solid lines have a different impact than the dotted ones, because they are more imposing.

The minimalistic style which I’ve talked about earlier uses either less solid lines or more curved lines, because they give a dynamic and fluid look to a design, which is also the purpose of the style. They indicate energy, keep the user interested and, if combined with illustration, are very powerful to the human eye.

Many years ago solid lines were very popular because they determined the style of the design: rigid, solid and organized. The web changed in the past years and this style is not very popular anymore, especially for designers’ portfolios and other pages with a strong need of a personal touch.

The lines separate the two columns and are not very bold.

The solid lines are used to separate different parts of the website.

2. The shape

The shape, or the form, is the second most used element of a web design. They are actually lines combined in different shapes. The forms are still popular and this is because if there is something that needs to stand out, forms are one of the ways to do it. There can be circles, squares, rectangles, triangles or any other abstract shape; most of the designs include at least one of these. Minimalistic designs use it a lot, because they are often based on illustrations and drawings. The old style of designing websites included shapes too, so they remained popular throughout the time and will probably continue being like that.

Like lines, shapes are also associated by the human mind with different movements. For example, circles are associated with movement and nature, while squares are often seen as structured, basic designs. Just like with the lines, the color, style, background or texture of a shape can totally change the viewer’s perception.

Fred Maya's portfolio uses shapes to emphasize the logo and the previous work.

3. Textures

The textures were not very popular a couple of years ago, but they tend to become more and more used. They replaced (or compete with, if we can call it a competition) the single-colored backgrounds. Textures can look similar to solid background colors, but if they are analyzed closer, small but effective differences can be noticed.

Texture styles include paper, stone, concrete, brick, fabric and natural elements, among flat or smooth colors. Textures can also be subtle or pronounced and can be used sparingly or liberally. They work with pretty much everything. Even if they do not seem important, the textures can totally change a website and offer a totally different visual impact.

Jason Julien's portfolio uses a grunge texture.

This webpage uses a different texture than the first example, looking like a math notebook.

4. Color

The color may even be the most important element of a design, because it offers the most powerful visual impact at a single glance. Color is obvious and does not need basic graphic skills to be noticed. While lines and shapes mean the same thing as in the reality, only at a little more profound level, the color means exactly the same thing as in the nature. Color creates emotions – red is passionate, blue is calm, green is natural. Even if you don’t realize this, colors have a clear effect on your mind.

Studies have been done and a person who lives in a red environment has a higher heartbeat and pulse than a person living in a blue environment. The human brain sees this and influences the rest of the body.

Therefore color theory is very important to know, because not many designers can call themselves experts in this field. Being a master of colors might make the difference between a good design and a stunning one.

I am not saying you have to know all of them, but knowing how hue, saturation, shade, tint, tone or chroma work together is crucial for a graphic designer.

Feed Fever uses different colors for text, trying to emphasize the importance of each line with a different nuance.

5. Value

I did not specify value above, even if it is closely related to color, because value is more general and represents how dark or light a design is. Value has a lot to do with mood too, only at a more profound level. Understanding colors will take you close to perfection, but knowing how value works will take you beyond this. Lighter designs offer a different impact and feeling than the dark ones and you need an expert eye to notice differences and decide which one is the best.

6. Space

The space and how it is used is crucially important in design. Lately the “white space” (also called negative space) became used widely because it allows the human eye to read easier. For whoever is not familiar with the term “white space”, it does not mean precisely space filled with white, but every area of the design which is only filled with the background color. You can see several examples below to better understand the concept.

If there is a lot of negative space in your web design, it offers light and an open feeling. The lack of white space will turn your design into an old-fashioned, cluttered one. The space has also a lot to do with how the design is perceived by the human eye.

Even if I said the color is maybe the most important element of a design, the space is definitely present in the top, because it is also very easy to notice by the untrained eye. It can turn a design to your advantage and get the best out of your layout.

Google is the best example on how the negative space can be maximized.

Site Inspire also uses the negative space on the sides and combines it with a well-suited typography.

Conclusion

These are the basic elements a beginner graphic designer should know about. Having this knowledge will allow you to think more user-focused and design with a better style. However, this is not everything. A couple of more articles will complete this series and the following one, due to come very soon, will talk about the principles of design.

Further reading

This article was just a list of the basic elements of a graphic designer. If you wish to learn more about them, I’ve gathered the following sources for you from the internet. Reading them entirely (and maybe more times) will give you a better understanding of the basic design process.

How to Actually Use Negative Space as a Design Element on 1stwebdesigner.com

The Meaning of Lines on Van SEO Design

The Meaning of Shapes on Van SEO Design

Shape – Basic Element of a Design on About.com

Basic Color Theory on Color Matters

Color Theory on Wikipedia

A Guide to CSS Colors in Web Design on Six Revisions

The real question is – how serious are you about your work? If the answer is anything else then “not at all”, then any additional knowledge benefits you. Basic knowledge of the options here can make your life much easier at some points. Your designs will probably be displayed in multiple places in various shapes and forms, therefore you might want to make sure, that they look they way you intended them to look. The following article will give you a helping hand in achieving that goal.

Let me start off by telling you, that the purpose of this article is not to give you a long and probably boring explanation of all the options and their respective descriptions, but to give you enough knowledge so that you know what you’re doing.

Let’s begin with localizing the Color Profiles option.
You can access them from the Photoshop menu Edit -> Color Settings or by using the shortcut CTRL+Shift+K .

The following window should come up:

The default settings most often look something like that. So let’s go through with what is what in here.

Working Spaces

RGB
RGB colors are mixed and created in the way monitors use. Therefore RGB is perfect for screen design.

You probably will have the sRGB IEC option set here by default. It’s fine for consumer purposes, but does not give you a very rich color palette. It would be a good idea, especially for web designers and photographers to go with Adobe RGB (1998) which offers a wider color range as more colors is what we all want. Don’t go panicking if you’ve been designing in sRGB, the difference is not that big, but this profile is created for the less expensive displays.
More and more photographers tend to use another option, the ProPhoto RGB. It has a much broader color range, some of it actually being outside of human vision. Working with that profile however has it’s cons, one of them is the fact that converting the color scale to a lower one on images created in using this color profile may lead to unwanted results. So before you choose to go with that one you might want to get some additional knowledge on working with ProPhoto RGB.

Also – don’t confuse the sRGB IEC with Monitor sRGB IEC , if you chose the second you might get varying results on different displays.

A big number of desktop printers use RGB values when printing, not CMYK. So have that in mind as well.

CMYK
CMYK in turn replicates the way of mixing colors that big printers use. If you’re designing something with the intent of publishing outside of the screen you should make sure that it looks correct in CMYK Color Profile.

You will want to leave this option here at it’s default place at U.S. Web Coated (SWOP) v2 . If you have the possibility of asking for the CMYK Color Settings file of the printer you will use, do so by all means. With that in mind just choose the “Load CMYK” option from the menu and you’re good to go.

Gray / Spot
Leave those at Dot Gain 20%

Color Management Policies

All the values here are the same for all three options, so let’s see what they do.

Off
If you choose to turn off the Color Management Policies the files you create will not have the *ICC profiles embedded in them. That may cause your files to vary in color on different displays. It’s generally recommended that you leave it on.

Preserve Embedded Profiles
This option will leave the ICC profiles of the files you open. In case you open a file which does not have an ICC profile, it will use your current settings to temporarily embed one. However it will not save the Color Profile to the file.
All new files you create will be saved with your current Working Spaces settings. You can change them in the advanced settings, when you create a new file.

With this option on, you can have multiple files with different color profiles opened at the same time. Photoshop will treat every one of them separately.

Convert
This will convert the ICC values of the file you open to your Working Space settings. However if your file had no ICC profile to begin with, it will remain that way. The new files you create will inherit the values from Working Space settings.

*In color management, an ICC profile is a set of data that characterizes a color input or output device, or a color space, according to standards promulgated by the International Color Consortium (ICC)
Wikipedia - http://en.wikipedia.org/wiki/ICC_profile

Conversion Options

Click the “More Options” button. New fields will appear.

Engine
Adobe (ACE) uses the Adobe Color management system and color engine. In most cases you want to stick with this one, as it’s values remain the same across the platforms.

Intent
This specifies the method used to convert color between spaces. The most common used options here are Perceptual and Relative Colorimetric.

Relative Colorimetric – takes only the colors which are out of gamut and converts them. All the remaining colors are left intact, which may result in some color changes on your design.
Perceptual – intent will map all the colors to the closest in-gamut color. By taking all the colors during the process the result should be visually more close to your original design. Your gradients and such will display best with this setting.

Use Black Point Compensation
Better to leave on. If you choose to turn it off, it can have an effect on dark spaces in your design, sometimes with a very negative on your project.
This options ensures that dark spaces in your file are mapped to the closest dark range of the destination space.

Proof Setup

Proof setup goes hand in hand with Color Settings. You will find this option under View -> Proof Setup.

It’s purpose is to make your display simulate print or other Color Profiles. The hot key to turning it on and off is CTRL+Y. If your colors are strange, you might want to check if you accidentally didn’t turn this feature on. If on the end of your file name there is a backslash with a Color Profile, then you have your culprit.

In the Proof Setup menu you have different preview options.

Working CMYK will simulate the CMYK values you chose in the Color Settings, so you have a quick preview of how your file will look like after print. Why just not convert the image to CMYK all together? Doing that will lock you out of some options and filters Photoshop has. So you sometimes might want to wait and convert from RGB to CMYK until later.

The neighboring options do pretty much the same, but with one plate at a time.

Mac / Win RGB here you can simulate a Mac or Windows display. Can come quite helpful when you’re designing for cross platform purposes.

Custom - if you choose the custom option the following window appears.

Here you can create an additional profile for the proof simulation. The first two options we went through before.

Simulate Paper Color will do as it says – simulate the white shades of white of paper on the screen.
Simulate Black Ink will show you how dark your dark places will be when created with printer ink.

Managing Color Profiles

Check the files ICC Profile
So now that you know how to customize them, you might want to know where to find out what profile is embedded in the file you have opened. You can find that out in the lower left corner of Photoshop. There is a small bar displaying various information, what you want to do, is to click the right arrow and from the menu choose Document Profile, this will display the ICC profile information you seek.

Assigning / Converting Color Profiles
To assign or convert the color profile on the file. You want to go to your top menu and choose Edit -> Assign Profile / Convert to Profile.

That’s basically it. Now you should have the basic understanding of how Color Settings work and how to manage them in your work.

Understanding the Color Wheel

Before anything, it’s important to know the basics of the Color Wheel first. Every designer should by now have familiarized the color wheel by heart.

White light is a combination of all the colors of the spectrum, divided into three basic groups: red, blue and yellow. From these three colors, you can combine every color imaginable to the human eye. To be able to create aesthetically pleasing color combinations, you have to know how the color wheel first. I’ll try explaining it to you without being too technical.

Monochromatic

For the monochromatic color scheme, it makes use of one color of different shades. For example, you use the following color combination for a web site:

The main color here is green, plus a lighter (50% white) green and a darker (50% black) green. Using monochromatic color combinations add a professional and sophisticated. It’s no fuss and straight to the point–thus it can get boring and monotonous (they have the same prefix, so…).

Complementary

The most interesting color combinations are those that show contrast and interest. This is by combining colors that are located opposite each other in the color wheel. They are bold, visually interesting and appealing. Just be sure to combine colors that look great together for your client’s company. Some combinations may look too gaudy–stay away from that.

Analogous

The analogous color scheme combines colors next to each other on the color wheel. They’re like the monochromatic scheme, great for professional and business uses. They are more interesting since they add contrast and interest into the canvas. Analogous color schemes are easy to work with and they always look great.

Here are some great examples of analogous color combinations:

Triadic

Triadic color schemes take three colors that are equally apart on the color wheel. They create a triangular shape when you connect the colors together. This type of color combination is aesthetically pleasing and well balanced.

Pleasing Clients with the Right Color Combinations

As mentioned earlier, you cannot please all clients with a universal color palette. You should know your client’s company first and foremost–what the company and their products are about, so that you can have a head start on picking the colors. Don’t forget to also check out successful logo redesigns.

Restaurants, Fast Food and Food Products

For companies that are centered on food and dining, use red and yellow a lot. These colors are attractive and easy to spot. Warm hues and solid colors are recommended. This is because the color red and yellow induces hunger by speeding up metabolism. This will increase the diner’s appetite, making them order more food than they should have. Avoid the blue and purple color for restaurants at all costs–these colors decreases one’s appetites. Subconsciously, our body reacts negatively to blue and purple toxins. Green and brown is a good color for relaxing and casual eating (think cafes and bistros). Try using colors in the triadic or complementary color scheme.

Here are some interesting color palettes for restaurants, fast food and food products:

Makeup and Hygiene Products

Choose colors that convey femininity, grace and cleanliness. Light, pastel colors like white, lavenders, light blues and light pinks are a great choice. Avoid warm and harsh colors. You can also opt for monochromatic and neutral colors, for they signify cleanliness and simplicity. Here are some interesting color palettes for makeup and hygiene products:

Government Agencies, Public Offices, NGOs and Organizations

When creating something for government and public agencies or organizations, keep in mind that it should appear respectable, trustworthy and dignified. Choose colors that are positive and cool, such as greens and blues. These cool colors provide a positive, public image that’s solid and built on trust. Government and NGOs love using reds, whites and blues for their logos after the US American flag. These colors are also a sign of nationalism and integrity.Choose the monochromatic or analogous color scheme. Minimize on using contrasting colors.

Here are some interesting color palettes for public offices, government agencies and other organizations:

Logos or graphic design for educational establishments, insurance companies and hospitals also apply as well.

Hotels, Spas and other Hospitality Establishments

When designing for hotels, spas and resorts, capitalize on comfort, hospitality and relaxation. Choose ‘earthy’ and natural colors. Browns, blues and greens are the most relaxing and calming colors. Avoid bold colors. Make use of the monochromatic color scheme. Use colors only to a minimum, unless if it’s a Vegas establishment.

Blacks, whites, silver and gold are also a good choice of colors for hotels, spas and resorts, especially if it’s a five-star establishment and they wish to capitalize on luxury and class.

Conclusion

Color is a good way to catch the eye of viewers, but too much color will be distract your readers from looking closer and reading on. If you can, stick to 2 to 4 colors only.

Color combinations are not created on whim, but through careful research and study. By knowing the basics of the color wheel and combinations, you can create thousands of aesthetically pleasing color combinations.

Looking at the work of other designers can be a truly inspiring experience. There are many talented ones out there. This time we decided to share some great colorful logo designs.

We hope you’ll enjoy these!

We hope these logos have brought you some inspiration for your future designs. Which one is your favorite? We’d love to hear your opinions. And remember to share this article if you like it. Thanks!

]]> http://www.1stwebdesigner.com/inspiration/amazing-colorful-logos/feed/ 15 http://www.1stwebdesigner.com/inspiration/beautiful-gradient-effects-on-web-design-research-part-2/ http://www.1stwebdesigner.com/inspiration/beautiful-gradient-effects-on-web-design-research-part-2/#comments Mon, 13 Jul 2009 13:40:34 +0000 Dainis Graveris http://www.1stwebdesigner.com/?p=3784

It’s Monday and beautiful time to get inspired with very good examples and research a little bit what’s happening behind the scenes from graphic designer view.

This time I will showcase and analyze gradient effects used effectively in web-design and logo design creation. It’s very important to create and use subtle and eye-catchy color combinations and transitions to achieve modern and stylish effect. Maybe you haven’t noticed but light and shadow effects are widely used and it doesn’t necessary mean just color, but to bring greater effect, use textures and then put on them light but observable transparent color effects and you’ll see magic happening. Using light you can easily emphasize places and actually lead visitor’s attention from point to point using just color, illustrations, text size.

After this short introduction I’ll start to share beautiful examples of web site designs which use such light,shadow and gradient effects in very good way. And if you haven check out 36 Color Gradient Sets For Photoshop and Resource Sites: Part 1.

1. MikePrecious

Beautiful light and subtle spotlight effect on the top of texture. Such effects can be achieved on Photoshop using Filter–>Render–>Lightning Effects and playing with settings.

To get first and main focus on Mike Precious name and specialty one more .png transparent image with radial gradient effect is used. Notice subtle color variations from #F0F0F0 to #D1D1D1 and then at the end going back to lighter color.

2. EctoMachine

Notice this image below are used to repeat-y whole screen, which is great way to add interesting effect but in the same time get fast loading speed. If there would be simpler gradient effect you also could choose to use just 1px wide width image with gradient effects to get even faster loading time and beautiful effect.

3. Cellar-App

Very good example of 1px wide image on background covering whole page. (1px width and 3081px height).

4. Rawsterne

As you can see in this zoomed version, very subtle linear gradient is used, though I believe much more narrower image could be used in this example.

5. DigitalMash

Linear gradient image (40x1216px) is used through whole site from lighter on the top of the site to little darker on bottom.

6. CobbleStone Community

Radial gradient is created to take out company’s logo as first accent, little texture and color variations used to look really enjoyable wau. Definitely very good design.

7. DesignChuchi

One more amazing website with very light color variations making it to look very professional. Notice also top background image used 1px width and 237px height, other images like logo and mouse are just positioned above that one image.

8. VigetLabs

Look at the background image with many lightning effects in the center but on the sides transferring to simple linear gradient to fill big resolution screens. Actually there are 3 main background images using gradient effects on header, center line (light gradient) and then on the footer.

9. Coda

Almost whole professional feeling is achieved just by that huge background image (1600x1200px) using radial gradient and light texture. By the way such texture can be easily created in Photoshop on Filter panel – Noise – Add noise and after that just play with settings, opacity and color variations to get very good results.

10. Good Barry

One more time background image is 30px wide and 1900px height – subtle yet very effective. Even navigation has linear gradient effect to give dimensional effect.

11. OnWired

I cannot express how much I love this web design, it completely consists of light, shadows, radial gradients, many emphasis easily leading visitor through whole page. Exclusive eye-candy dimensional design and very good example for research.

12. ElementFusion

Color always help to organize and separate content, notice that center part is the lightest one taking out main image to get visitors attention to act. Nice icons, color variations explaining what this company is offering on the main image is really good choice.

13. Australia 2018-2022

Huge background image with radial gradient behind the earth and other lightning sparks to grab attention on football players, big “Join Our Bid” button and time countdown. Impressive work on Photoshop and beautiful implementation in web design.

14. Bohemian Coding

Background image is repeated on x-y asis, but to stand out with content in the center – white color with dark grey outer glow is used. Looks really professional. Notice light linear gradient effects on navigation bar and bottom area of main content where subtle grey gradient is used to darken bottom area.

15. AteBits

One of the best, modern web designs – beautiful eye candy. I must say here again – “Less is more” – very subtle color gradients are used, radial gradient on the center and navigation with linear gradients and very subtle dark outer glow to make those buttons stand out. Look behind the scenes how top background image + another one with radial gradient and other separator lines are used.

In the footer again another dark image repeat-x-y asis is used.

I really hope You enjoy this kind of articles, which is more inspiring, but this time looking a little bit behind the scenes. Stay updated because this is just Part 2 in series, there will be two more continuations.

36 Color Gradient Sets For Photoshop and Resource Sites: Part 1

I wanted to create this list, because there are times when I struggle choosing my design colors -  for me it’s not always easy task to just play with the colors and choose the right ones – of course, there are few favorite colors for everybody, but finding new great color combinations are not so easy task. That’s why there a lot of helpful resources to ease this task,  and I am here to show You those!

Hopefully this will help You to create new designs and the process will become a little easier.

1. Colourlovers

This is a great resource that monitors different color trends. There are a lot of colors for ad campaigns, packaging design, web design – You can check out different color schemes and patterns, compare color palettes, read color related articles, interviews – yes, there are also blog there.

New color schemes are regularly created and examples of the way colors are used in the real world – and there are rating system to give You a chance to find out the most popular ones. And I think this is one of the best places to check out for harmonic color combinations and get inspiration.

2. Kuler

Kuler is nice place created by Adobe company, where You can browse popular created color themes and create Your own from colors, images and get really advanced options and possibilities to create something really great! You can upload images from Your desktop or flickr, which is pretty handy too. To save and download themes You must register with Your Adobe account. You have possibilities to even download “Kuler desktop” software to  browse, search and save themes directly from Your desktop.

3. ColorBlender

There are lot of color combinations available there – and that’s pretty nice way to easily choose between colors.   It’s free online tool – just choose Your preferred color using the color picker  and 6-color  palette will be calculated from this color automatically. If Your browser accepts cookies You can save colors and use them whenever You return to this site from the same computer. When You are finished, You can easily download blend in Photoshop format *.act or for Illustrator colors *.eps.

4. ColorExplorer

ColorExplorer is free online tool for creating and working with color palettes.  There are many options with color circle, color libraries, color pickers and much more. Check out few screenshots with features creating Your own unique color palette.

The ColorExplorer toolset include, but is not limited to:

• color matching; from a single color to a full matching palette – instantly
• browsing popular color libraries
• NCS color picker (Natural Color System)
• conversion hints between multiple color libraries (RAL, PANTONE, and more)
• palette export for use in popular programs like Adobe Photoshop, Illustrator, and InDesign
• color palette analysis and import from images/photographs
• centrally stored palettes for easy access
• palette filters and styles

5. ColorSchemer

Interesting resource offering 3692 different color schemes for now, So You have a little list to choose from. I enjoy this resource because of its forum, where You can discuss with other designers, color tips and get answer to Your questions and blog where You can get even more great colors and find out where to search for any.

6. ColorJack

ColorJack even on the first page offers different color palettes and just mouse over to get even more 6 similar colors. There are also list with useful color related links and more advanced color mixing software, I am describing You below.

I think this software are the main reason I enjoy this site too. There are three different online software tools – Color Galaxy, Color Sphere and  Color Studio.

Below You can see Color Galaxy and Color Sphere  – nice tools to play with and get really the right color You want. You can also download these software as widgets.

7.Color Combo

Check out this resource too – choose colors from palette or tags cloud. Nice feature is, You can grab the specific website colors just by entering web address.

8. Colortoy

Colortoy is another online flash color scheme generator. It generates complementary color schemes based on Your inputted color code – it felt good to play with the software, but You can use it also in the serious projects, this program definitely do his job.

9. Colr

Colr.org has been around since Year 2005 – it fulfils the purpose to fiddle with colors as fun thing and load Your own image – get the best colors out of it!

10. 100 random colors

Handy little color page using AJAX and offering 100 random colors, refresh the page to get another 100 random colors. Every color got his code in the square, so You can easily grab the code. Good stuff if You cannot decide which color You really want.

11. Deagreve – Color Palette generator

Just enter the complete URL to the image to get out the colors. Very simple, but fast and handy software. There are also many more useful little software to create simple business card, favicon etc.

12. WellStyled Color Scheme

Little, useful service to play with color circle and choose between  6 different variations – default, pastel, dark pastel, light pastel, contrast and pale. As an output You  get 5 similar colors to choose from. Actually just play with all the options – those are pretty much there.

13. Colors On The Web

Besides 3 different color tools and mixers, You can learn also about color theory, color terms, how to combine the colors, color contrast and lot more. Nice resource if You are interested not only mixing colors, but also want to dig deeper – learning about color and definitions.

14. Gpeters.com color schemes

Get Your color scheme just submitting word or phrase, service will grab 5 related images from Yahoo images and get 6 most distinctive colors from each.

You can also choose from the huge list of color schemes.

15. Color Calculator

Color wheel where You can choose between RGB, CMYK, HTML  colors, change saturation, lightness values and choose between different harmony settings.

I am planning to create similar list with different pattern and stripe generators, so if You are interested – keep in touch!