Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Web design history, a complete journey

Comments and suggestions in here
While surfing is easy to see a poor designed website and tear it apart with criticism. It’s hard to believe anyone would dare to publish such a aberration to design and all the good manners. Don’t you think making the poor website cry is a little bit unfair? Don’t you remember how things were when you started surfing the web? Do you remember the colors (man, the colors!) and all the cluttered information? typography (madness) and the unfitting image sizing? Remember, no one was born knowing it all and with this article I’m trying to take you back in time so you’ll remember (or learn, if you’re too young) how things used to be. Web design started as a puzzle box emptied over a table with a lot of elements but no clue of what to do with those icons, boxes, which ones were the better colors to use, where did those icons had to be placed, what were the boxes for. First web designers had no idea about which one was the right way to go, however, things got better so now you can criticize all the effort and won battles during the last 20 years of web design. And well, they were able to design a website, 20 years ago, using only the initial browser experiments and lacking standards, styles, community and the PNG format ; ) (remember that GIF era), so, they deserve a huge and big thanks for bringing this web design concept to our lives.

1991, A blast from the design past

The web was actually devised in the early 1950’s as a way for American scientists to transmit information to each other over vast distances. The internet concept was developed in 1969, and if this project would have fail, we’ll probably won’t have the internet as we know it now. Then, in 1989, Tim Berners-Lee created the first web browser ever, called the WorldWideWeb and in addition to it, he created the first website. This was THE WEBSITE, but you were not (and still not) able access to it because it redirects you to the actual CERN website. If you want to see how the first website looked like, here’s  a basic example, but the idea of this site was to be updated everyday, so even in those days, you probably weren’t able to see the first webpage ever online. This website was about giving information on how to use the WorldWideWeb.

It’s been over 20 years already since the first time someone said “Hey mom, I’ll create a website, I’ll do the best website ever…” there have been stumbles, but the important thing is learning from every rock in our way. The web design evolves among us as well as the designing tools and programs. All these old website designs can’t be found on their updated versions, hence, you can use the Wayback Machine site if you’re looking for an old design you want to see again.

1996: A year to remember, but never to repeat

1996 was the year that defined the beginning of a new era, and for many designers it was also a shameful period. Go no further, the first impression you have in a website might be sore eyes. What’s with the vibrant colors? websites with red, pink or yellow background can’t be watched for too long without compromising your eyes’ health. However, using a white background along with a few links and basic information is the correct way to start your site. Make it simple, there are tons of options besides Times New Roman or Courier New, the default system typos, and regarding color you can opt for more clever palettes instead of the dull black, blue and red interfaces. This stage also means abusive utilization of animated gifs that were supposed to make the website… fun and interesting?, hehe the GIF era! This was also the era of the ‘Under Construction’ terror. People were not fully aware of how websites worked and therefore there was not a proper construction system established.

This was McDonalds website back in 1996. (MacDonals designer’s were told that their salaries will be increased depending on the amount of RED and YELLOW used) They certainly used their trade mark colors but in an abusive way. Yes, red and yellow are vibrant colors, but they should have look for different tones and make the visual weight more even, with bigger loads of white, for example. Time to remember and learn!

betsey sg

This was the Fashion designer Betsey Johnson website back in 1996, it doesn’t have much information, it’s just to tell people ‘Here will be the website, keep in touch’ The background color is more than just vibrant, and combining it with a poor definition black outlines makes it even worst. Bitmaps don’t have the greatest definition and the site’s diagramming leaves a lot of room for making evidential even the smallest alteration in color. The worst thing about this website is that even today we can find this kind of websites !

indiamusic sg

An Indian music website with a font that obviously took them less than 2 minutes to decide, (awful times without Google Font directory) the site also features a background color selection that makes it hard to read, the white/green/orange/white gradient has no reason of being, and it makes the webpage background look sliced in half. We can also see the flag animated. Please keep note designers, mistakes to never repeat.

System fonts and blue links?, Thanks CSS !

altavista sg

This is Altavista’s first design ever. Plain but useful, they used their logo as a header (not too common today), all the links were in blue and they used red and arrows to make some of the text stand up. The use of boxes and buttons is quite basic, there are also a few icons trying to make the design more interactive, this was a time with no alpha shadings, considering that this was Altavista’s first attempt, we have to say that this was one of the most decent websites of its time. Advice: No blue links please!

yahoo sg

Yahoo, the king of the internet before Google’s raise, had one of the most effective designs of its era. Its original site differs from the current one on the use of more complex designs and interface elements. They are still bitmap images with no alpha, but there’s an intention of making the visual part stronger, not considering only the usability, making it useful and visually attractive. All the text is in blue because they’re all links. Advice: Pay attention to the GUI elements in your website!

freelancer sg

Even when web design was just starting, we can see this site was completely functional. Here we can also see the basic 3 colors, black, blue and red. (Very common on this era) The title is red to draw the attention over it, then we find some information in black and finally the links, which were obviously blue. This stage is also an equivalent of abusive utilization of animated gifs, to (as we said before) make the website… fun and interesting? Yes, we both know you loved animated GIF’s !

lego full sze sg

Here’s the Lego company website. It tried to look interactive and playful, (without using flash/jquery) as it was directed to kids, that’s probably why it had so many animated gifs and little text. All the figures were animated and were usually place next to links. We cannot be too judgmental with these sites because after all, this was only the beginning of a new world, so it was kind of obvious that there was no major conscience regarding design and diagramming.

forbes sg

Even huge companies such as Forbes dealt with some problems while defining the fittest design for a website. The site’s structure features a left sidebar, (still rocking, thanks wordpress!) a header and a big image on top of a series of links. The navigation buttons were unpolished, but things were about to get better.

aol sg

Well, almost!

Background color, icons, fonts and more

15 years ago, people used to think that a brilliant color palette was indeed a brilliant design, now we know that’s a lie. (another advice) These colors made almost impossible to last more than 5 minutes staring at the screen. Also, colors were too contrasting and they usually made fonts seem like they’re moving. Unfortunately, vibrant colors were the usual choice, because for the original web designers, getting noticed through colors was more important than considering for how long people will actually stay in their pages. Usually, this ended in sites where background made the reading process an absolute headache.

blue  2

betsey bckgr

green 2

red bckgr

black

Headache? … Probably the favorite typefaces a decade ago were Times New Roman and Courier New and some other ugly ones (Comic sans, say hi!!), these were not only system fonts but also default fonts that people used in everything, from their company’s site to their wedding invitations. Fonts used no special effect what so ever, no shadows, no outlines, transparency, nothing. Black was the trend, or sometimes red to make something stand up, also you probably remember that all the links were blue and underlined. The only difference between texts was shown by bold or italics. Maybe, they just didn’t see typography as an important part of design like we do now. and of course, hard times without standards.

fonts1

Yahoo 1996 website typography: Times New Roman.

fonts2

Aol 1996 website typography: Arial. (A font that still rocks when properly used)

Things were going quite well, but there wasn’t a full knowledge concerning measures in relation to screen pixels and image resolution, in a way, using pixel values to measure wasn’t the usual, people used to appeal to inches (that’s like using Photoshop for vectors and Illustrator for photographs, it works but it’s definitely not the best option) when talking of a screen image, so constantly, the design page didn’t fully covered the screen, or other times, the background image got repeated because it has spare space. This ended as a confusing and unpleasant view because all the information was cluttered in a place, and by leaving a huge space in blank makes the design look poor and uncomfortable. It was quite common to see the background image repeated, because of sizing problems. The background image wasn’t big enough to cover all the screen, or from computer to computer the resolution changed, that’s why sometimes the image got repeated both, horizontally and vertically.


Buttons, oh buttons! What would be the faith of this world without these magic elements? at least, a good designed button can make you feel like you can touch it straight from the screen, nowadays that’s possible, however in 1996 that wasn’t even an option, so basic buttons were nothing but a raw option for giving some clickable items in the site, that was their attempt of emulating 3d feeling. Advice: Pay attention to the pixel perfect concept !

indian music sg

Colorful boxes in your left are for clicking. Oh yes, buttons.

aol buttons

These are a little bit more stylish buttons for their era.

mcdonalds buttons

Giving some effects to a blue rectangle became it in a beautiful button! (They thought ;) )

forbes buttons

Icons are such a wonderful tool for making the navigation a lot easier, though back in the 90’s icons were in their prime phase, they were raw and ugly. Boxes, on the other hand, were used to make things look in order, it gave the sense of having a place for everything. This was mostly based in the background color rather than making them a part of the design, involving more a programming situation than a visual aspect.

adobe sg

Adobe Acrobat 1996 website, their main purpose was to promote their products and explain about their applications. On the left, they rawly explain what you could do with Adobe Acrobat whilst on the right they provided download links and additional information regarding an an specific product.

excite sg

There were too many wrong things with backgrounds. Some had really flashy colors, others didn’t match the size, others were too small and made the design look cluttered or tiled, sometimes got stretched. Yahoo website for instance got two boxes filled with links pointing to specific themes or topics. These were quite general, but at least it was a way to guide people who weren’t looking for an specific topic and just wanted to surf or know more about a subject they found interesting.

Animated gifs seemed to be interactive and gave a professional feeling to any website. Well, not really. Usually, websites were bombed with these dancing images that had no real meaning and had zero relation with the site and even if they did, the movement grabbed people’s attention from the target. It’s also important to say that that these animated gifs didn’t had high quality so they made the page look worse with it than without it.

splash_anim globe2 3d_text_2 2_computersanniroger brckanim

1999: Thank you Google!!!, but welcome glossiness…

Well, the first steps have been taken, now we’re in the web design train and we don’t know where is he going to take us. Designers began exploring new visual characteristics, they wanted to take full advantage of all the programs they can put their hands on. Color was taken to a more serious level, they started designing with proportions and therefore they also began considering the importance of site’s looks and usability rather than just a lot of colorful and animated things on screen. They increased the presence of interface elements as links to make the experience a lot easier and visual. Although a black background color might not tire your sight as much as a white one, a black background itself is not a warranty of good design, when adding a blue or dark text on it, it gets completely unreadable. Google emerged in 1998 as a shy company trying to compete with the titans (who’s laughing now ah?). It has change their logo since then, but the main idea remains the same, which prove us that a clean and useful design will always work efficiently.

angelfire sg

The ancient Angelfire design, the site experimented with box sizes, colors, buttons – the basics of web design. You can notice the use of boxes, buttons, white fonts over blue background and blue fonts over light blue background, hyperlinks were still wearing that awful blue and underlined suit.

bbc sg

The BBC page tried to migrate the information from television to the internet, the site combined colors and boxes to group the information (something very useful nowadays). They started using a steady menu with a list of links and a few applications such as the weather forecast.

lycos sg

Here are some examples of design that considered the fact that a site must be interesting, informative and useful. The Lycos website design was both simple and useful, an image header, accessible links, search menus and two links lists. They used icons as links to make the hole experience a lot easier and eye-friendly.

bluefly sg

In Bluefly site, we can see that icons are an easy and pretty way to simplify the navigation in the site. Icons were always accessible and made easier to find some interest areas. One of the best examples of the improvements of this era.

pepsi sg

We said before that a black background color might not tire your sight as much as a white one, but still is not enough to guarantee a good design. The Pepsi page design played with a typography that was quite common, considering it was going to be viewed by the X generation. It had a list of buttons and some specifications such as ‘best view in a certain browser’, thank God for CSS!.

This turquoise color font is a little easier to read, though there were still many better options regarding typography and color use when working with a black background.

The most common elements

Bright colors were on their way out, there was an increase in white background usage and playing safe. During this time, designers were more interested in getting used to measuring in pixels and improving the appearance of the website. They wanted it to look ordered, make it easier to navigate and place the most relevantt information and links in a outstanding way, so people can find them easily.

google sg
And so Google was made!

The typography used in web designing grows in the way that design requires it. In children websites, fonts can’t be just Arial o Times New Roman. Typeface varies its size depending on relevance, style and intention, this way every area within a web design concept slowly adapts to the requirements of the company, visitors and customers. Designers found their way to make a more attractive, functional and interesting web, they also kept experimenting with different things. The color gamma regarding fonts also increased whilst trying to stay as legible as possible.

bbc typo sg

The BBC 1999 website shows Arial with several well used variations.

lycos typo sg

All the text and links in the Lycos website in 1999 used Courier New in a characteristic blue color.

bluefly typo sg

Bluefly, a online store, used white and blue  Arial Narrow typography for his website in 1999.

There was a world before responsive websites

By that time, there was a better understanding of measures though unfortunately, the resolution in each computer and browser was different, so it was very difficult to create a catchy site that looked good in both small and large resolutions. It was common to see suggestions such as ‘this site is best view in THIS browser and THIS resolution’ however, not all the visitors knew how to modify their computers’ resolution. These issues still had to be worked on. The use of buttons went low profile, there weren’t any important improves with this.

angelfire buttons sg

Buttons started as rectangles with light and dark color for giving a shadow effect.

lycos buttons sg2

This buttons are as plain as they can get. They aren’t meant to make a design statement, they’re simply covering a need.

pepsi buttons

This black background could have been a great idea, only if the font color didn’t make them look like if they’re sinking into the background.

lycos buttons sg

The use of icons, in the other hand, increased hugely. This was an easy way to make links noticeable, they were also used to guide people in the page. This was an area highly used and improved as much as comes to design. Icons were easy to find, interpret and understand, and to click on. The utilization of boxes was complemented with the proportions that had to be managed in the website, it came related to design’s grid and spaces in the site choosing where the most important information was meant to be, it had to be always visible and available, boxes were definitely helpful in order to distribute and orient the user on their search for information.

bbc box sg

Different sizes boxes are shown in the 1999 BBC website. Some are wide, others are narrow, this diversity helps the layout of the webpage design.

angelfire boxes sg

In the Angelfire website they used lines to give the boxes better aesthetics.

Background color selection improved. Designers preferred to stood safe with white backgrounds and focus in creating colorful boxes using the company colors, or colors that complement each other and give a clean and professional look.

movie24The use of animated gifs decreased considerably. Sometimes they could be found in small things, such as a link, border, or a line, but a lot more modest than the way the animated gift were used a few years before. By this time, Flash animation were already making some fuzz in the internet, mostly in animation cartoons, but they were slowly starting to become part of all websites.

2002: Ladies and gentleman, give it up for the WEB 2.0

During this era we saw Flash animation being fully exploded, web designers made introduction pages (intros), which often took from a few seconds to several minutes to load, depending on your internet speed and your patience (yes, we remember the obnoxious modem sound). After waiting for a couple minutes to access the page, your screen shows you the ‘Skip intro’ option and it made you wander, why was I waiting for? This years witnessed a major color rush, In others words, color is understood to be an important and complementary part of the entire design, to make it more appealing rather than only flashy. It also incorporates pixel art in icon designing and buttons, that gave design a better definition. There’s also a smarter use of Flash animation applied in the menus, it’s discrete and useful. Websites also became more professional and started claiming their rights, usually in the footer section. At this stage, we can also see lots of ENTER pages.

blogger sg

The 2002 Blogger design relies in boxes’ location very hard, which becomes evident through the even marks cut with different colors to make them noticeable. It’s a dynamic and experimenting way to show design and his components. White font over dark colors and vice versa.

HOTMAIL SG

Hotmail main page. The logo is 100% pixel art and the screen is divided in two. The font colors give assured a great readability, They show just the necessary information that might be interesting and useful for the person surfing. Internet design has evolved a lot since the first pages, there’s no need of putting unnecessary information, specially in the main page.

Wannabe artists?, here comes DeviantArt…

deviant sg

This was the Deviantart main page in 1999, it had a lot of information because is a forum where artists can showcase their art. The site covered different fields such as design, illustration, painting, literature, photography, crafts and more. The header logo was done with pixel art. The gray color is non distractive, since there’s already so much text in the website, the smartest thing to do is not over charge it.

There’s also a smarter use of Flash animation applied in the menus. It’s discrete and useful.

opera animation

By placing the cursor over the text, some of it will be animated, and show you what you’re about to click on. Eventually this became into more complex menu animations.

cool home footer sg

Footers provide necessary information about the website, they became important and useful to keep the basic information in the bottom of your website. CoolHomepages.com adds his privacy policy, terms of service, copyrights and other information in the footer.

angelfire footer sg

The Angelfire website made a small index in the bottom of their page, this is really useful because once you get in the bottom of the website, you won’t have to go back to the top to continue navigating.  Also, it’s a nice and discrete place for locating sponsors and copyright.

Designers and their bloody splashes!.

At this stage we can still see lots of ENTER pages, these can be considered as a presentation page, or places to simply show the page’s purpose and then access to the main part.

vivienne

This is the Vivienne Westwood, fashion designer website, the front page is simple yet attractive, they have the ENTER button that became popular in 2002. The ‘enter’ page has Vivienne Westwood’s logo, her name, a small welcome text and big and orange text saying enter.

The highlights of this era

This stage was definitely an important moment in color evolution. The entire color palette became congruent and able to grab the surfer’s attention, it’s not out of tune and integrates all the elements in the design, so in other words, now colors became harmonious.

coolhome sg

The use of typography grew and experimented with different fonts in a same design, this gave great results usually but not always. The most used typography during this period was definitely Arial, we can see it in most of these examples.

blogger typo sg

Big colorful boxes, white fonts, black background. Constrating, but with measure.

performance typo sg

Way too many differents fonts, and of course, an extra dot for increase the suspense!

deviant font sg

A lot of things going on the screen, boxes, links, small icons, that’s why choosing gray for the  background was the best choice.

opera typo sg

The images sizing and resolution problems have ended. There’s a perfect manage of pixel measures and variations within computer’s resolution. A standard size for web designing can now be established therefore designers were now able to work with almost every computer predetermined resolution. With the appearance of Flash animation, buttons now came to life. Hundreds of ways for apply and customize buttons made the web designing go out of the top. Buttons now can have shadows, textures, be animated and have a new path in front of them for designers to use.

aol buttons 1sg

Easy to find buttons that made the navigation easier.

aol buttons sg 2

With buttons becoming the new boom in web design, the icon field slowed down its evolution, however, this maintained as a good option, functional and easy to handle. For all those designers who weren’t interested in utilizing the flash technology, icons were still an available and valid option. In design is not just about what you can use, but what you’re better at. A well done yet simple design can make you look better than overloaded and filled with effects designs.

clip_image075

The amount of boxes decreased and went  more effective by using less text but more strategicly placed.

aol sg 1

Well placed boxes gave the design a feeling of organization.

coolhomes sg

A solid background color made easy to get the viewers’ attention without being too invasive. This also helped to direct the attention to the fonts and not being confused or hard to read. As always, the design must be contrasting, so light and dark colors combinations worked. The flash animation were fastly developed in the web design environment and there were a lot of applications for this versatile option. First animations were used as opening page (or introduction), then slowly went to be part of the design in a smaller size. Sometimes these animations took too long to be loaded, or people just skipped them, so designers went back to look utility over visibility. An animation had to be informative and illustrative.

5 seconds can make the difference, so make your site to load fast!

loading sg

This time we can see a full color utilization, better incorporation of color and shapes, better contrasting colors. In other words, color is understood to be an important and complementary part of the hole design to make it more appealing rather than only flashy

coca cola sg 2

In the Coca Cola Company site is a shocking use of color and the flash animation is use to make the site exciting and active. Although the entire site is animated, is not too much information or over stimulating.

2005: Single pages = simpler navigation

Web design had been developing for almost 10 years by 2005, there were trends, tools and many eager designers to make a new statement in what comes to web design, that’s why it was no surprise when the original idea of a page filled with links to other places evolved and became into a SINGLE PAGE designed website. These had a content table usually on top of the website so you can go to a specific place in the same page, there was also a ‘BACK TO TOP’ button, making  the navigation really easier in the way of finding a certain thing fast, it gave design a fresh look with capable of transforming itself. This was meant to simplify the navigation, unfortunately this isn’t a very recommended option because it distracts people from the main reading and might mislead  them. It also creates a lot of trash in the browser history, because by clicking the ‘Back to top’ button the browser takes you to the same page, but considers that link like if it was a link to another site, so if you click a ‘back to top button’ five times in the same website, you’ll get that URL five extra times in the browser history, intead of having it just once.

At this moment, there was a lot of background designing, this gave users something interesting and less distracting to look at while navigating the site. There was also a typography boom, designers were now playing a lot with font sizes, color, even direction, using it horizontally and vertically, at this stage typography took a huge place when it comes to web designing. These are some examples of this, as well as some ‘back to top’ buttons.

design sg

This website doesn’t have just a background color, it has a background image, which adds a texture to the site and makes it more interesting. This is a wood theme that gives the site home vibe, confidence and a nice and warming treatment. Web designers experimented and saw the results of innovating design in their sites following their personal preferences while looking for new trends.

la coquette sg

This website focuses on showcasing design and photographic works. The black background pretends to focus the person’s attention in the images displayed. Fonts are yellow and white for creating a contrast over the background. Here we can see the utilization of ‘Back to top’ buttons, these buttons were kind of a trendy choice during those years, but it wasn’t really an improvement in terms of navigation, so it was eventually discharged.

Things that improved during this period

While surfing the web, the main thing that dragged our attention was, without a doubt, the vibrating yet discrete colors. You stopped feeling bombarded by images, gaudy colors and flashing advertising, so navigation became a lot more user friendly. The color distribution in design and proportion were at their highest level. There’s also a typography boom. Designers got the chance of playing widely with fonts, sizes, color, even direction and alignment (horizontal/vertical).

fonts

This era of web design incorporates showy and colorful buttons over a gray and slightly texturized background. However, the main attention relies on white texts because it makes every word interesting by variating size and arrangement. The most remarkable part of the text is ‘Giant creative builds web’ You may or may not read the entire text, and either way you’ll know what it is about.

typo 2

2005 was definitely an era that allowed designers to try new things. This website had a wallpaper with discrete pattern design and integrates 3 differents fonts, however, none of them brakes the design or seems wrongly placed. It also gives an airy sensation, wich shows a fresh and layed back design.

typo 3

This is a proof that design doesn’t has to be neat to be functional or attractive. This website plays with differents handmade looking fonts and all of them work really well together. It looks informal but not unprofessional.

font 4

Having a grey template is not always a statement of pure black and white palettes. This gives an excellent opportunity to splash some color that can give a refreshing look and goes perfectly with the grey gamma.

fonts 6

Using the same color palette for the entire website is also quite effective and visually pleasant.

typo 7

On this design site you can notice that the background is not plain, it has a texture slightly lighter than the rest of the background color that does not disturb people’s attention while adding visual richness to the design. The entire color palette is quite elegant and not sight tiring. The text is friendly and inviting, is no longer too serious and gives the user a welcome feeling. After all, this might be the first contact with a future client.

color 2

On this site we can see a combination of black and white palette with colors. Websites acquired a lot more functionality and features, now they can generate a floating sensation, thanks to the implementation of shadow effects that integrate perfectly with the entire theme.

cavl to top

This example displays a dark gray background along with a lighter gray typeface on the ‘back to top’ buttons. In this case, these weren’t really necessary because the page isn’t long enough and it’s divided in small sections.

back to top2 2

This ‘back to top’ button is a lot more discrete and is very well integrated into the general website design, maybe this is for not making it too notorious, just giving the option of using it, but not really encouraging the visitor to click it and clutter the browser history.

thanks

These navigation buttons offer the user a different option besides the scroll bar for navigate in the website thanks to these buttons you can easily scroll up or down.

Nowadays, designers are using all the tools they can grab in a smart way, including images, colors, typefaces and more. Websites stoped being just informative to become an entire new area of social and design development. Now, is easy to create a new website even if you don’t know too much about designing or programing, there are several websites that provide templates to give you ideas, you just need to fill the blanks. In a way this causes massive reproduction of the same thing however, you can always customize your website, even starting from this prefabricated templates.

2008: Retro is in.

Now web design has become available for everyone who has a computer with internet. There are many places that encourage you to give it a try, also the entire design community is going back in time, going retro and inspired by pixel art, like in old school video games. That’s why we can see a lot of pixel art buttons, illustrations, and retro textures and colors. The color gamma became also more stylish, turning into better and more contrasting designs. There’s also a slight flirting with minimalistic design, what give us the impression that  this might be the next trend web design.

acrylicana sg

This was the website of designer and illustrator Mary Winkler AKA Acrylicana in 2008. She made an ‘Enter’ page and based all her site on pixel art, the background uses pastel tones, the design is both pixel art an minimalistic.

art for everyone sg

This online gifts shop incorporates into its design a pretty cool retro color gamma. Baby blue, beige and for contrasting olive greens and orange. These colors don’t fight against each other but on the opposite, they complement the design.

back retro sg

This background image has a simple and childish design, though the colors are a great example of where design was going with. Soft, yet attractive colors.

barachan

This was the illustrator Rose Besch website design in 2008, not only the colors but the illustrations theme where retro. We can also see some pixel art in the little girl character. Retro and pixel art were combined nicely together, that’s trendy.

tumblrs sg

With a simple and retro illustration, blue font over a light blue background, Tumblr was retro and kind of minimal.

img

The retro look can be easily achieved just by correctly applying color, fonts, illustrations and in this case, textures. Design has evolve greatly, there’s a lot of room for being original, develop your own ideas, all of this due the fact that the internet has become a really more friendly place for both designers and people who surfes the web regularly.

betsey sg

This was the fashion designer Betsey Johnson website, she took retro glam and applied it not only to her fashion design but her website. Usually, design trends go further than just one designing area.

The most used elements

We just saw that the major trend during this period was retro. This applied for everything, including colors, illlustration and typography; this was great because the entire design integrates itself with harmony and give designers the opportunity for searching others styles, taking a deep look into what is working, what things can be removed, where’s the attention focused at and dealing with the fact that the internet is getting faster and faster everyday, so they must  find a way to captivate users by giving simple and yet breathtaking sites. There’s a huge evolution concerning pixel art, as it’s used to support the entire retro looking design.

The entire media was being moved by the retro inspired style and typography was no exception. Typography saw a lot of pixel experimentation and that defined a huge tendency in the new design sites.

acrylicana 200

2011: Straight forward design, no time for chit chat.

It’s 2011 and internet it’s no new for almost everyone. In fact there are lots of websites for kids because computer has become their new babysitter, so everything in the internet has to be fast, shiny, exciting, or else it will be forgotten. That’s why the biggest trend in 2010 and 2011 seems to be huge photographs and simple text. This way an image can get your attention and you’ll find easily whatever you’re looking for. There are still flash menus but nothing big or dramatic. It’s all about explode color, fonts, sizes and of course, contrasting. Minimalistic design works very good too. There’s no better contrast than black and white. In order to minimize the front page text, flash menus are used to show options and links for more information on every subject. This concept works for everyone, from designers portfolio to restaurants’ menus and store catalogs.

mario

In Mario’s italian food restaurant’s site, the background image features a photography outside his restaurant, it seems like a nice place to hang out with friends, have a drink or just chill out. The menu shows the restaurant’s food menu, wine menu, invited artists and other important things about the restaurant. The image is divided in two, the second part is just to give you a friendly ‘welcome’

eve

Neve design shows in their main page what they are. They are a kids clothes store. They use soft colors, their main target are kids parents who are looking for clothes for their kids. These colors create a calm and elegant atmosphere, because after all, elegance and relax can complement each other through colors.

popcorn

Less is more, always, specially in design where we used to be bombed by lots of images, shiny colors and dancing figures. This image shows popcorns, an oscar award statue, some movie film, cinema tickets. It can’t be about anything else but movies. As simple as that.

fish

This sea food restaurant gives you the feeling of healthy, fresh and almost heavenly food. Its clean, the white, orange and green guarantees the food’s freshness, delicious smell and just how good this food is for your health. Is there anything else important when it comes to food?

cassette

Another retro looking site that proves that retro doesn’t mean old or boring, this colorful cassetes are playful and interesting to watch, each cassette makes you want to listen all of them.

tennis

There’s still a retro look in this design, the fonts, the boxes places, Designing seems to be easier, gives the sensation anyone can do it, but that’s precisely part of the greatly done job. You just have to pay attention to details, the logo and everything have shadows, textures, there is a lot of details that makes the page look just that good.

interactive

A minimalistic design that doesn’t need anything else. Presentation, introduction and menu.

neutral

These colors aren’t shiny and exciting, they’re more of a neutral gamma that even so is not boring but elegant and simple.

This website entire background is an animation, there are no rules when it comes to creativity. The background is always in movement, that makes you be immediately interested in what is going on with the page but it’s not too much to asimilate. The animation doesn’t distract your attention. It just focuse it to the right places.

Things we’re looking everywhere

There’s been a huge evolution in color matter. The entire color palette is congruent and gets the surfer’s attention, it’s not simply contrasting but integrates all the elements in the design, in other words, now colors are harmonious. These days web design handles a full color palette in order to make the design complete. Now designers can use bold and crazy colors withouth risking the design’s integrity. Balance it with their complementary colors and creating a lot more visually attractive atmosphere. There’s no reason to be afraid of using colors, as long as the design’s theme and topic allows it.

maps

The typography role stop being just informative, it goes beyond being just the text part to be part of the design. Integrated in the design, it can give shape to columns, support headers, not only color but sizes change, bold, italic, and a lot of fonts you can get online and diversify the design, of course, with measure. Too many fonts wrongly placed can lead to a catastrophic design.

wow effe

Images’ sizing and resolution problems have ended. There’s a perfect manage of pixel measures and the variations within computers resolution thanks to the implementation of differents applications for solving those issues. Buttons are an integral part of designing websites. These days users only look for things they can click on. Buttons are the way to move through pages, follow on Twitter, Facebook likes, reblog in Tumblr and suscribe to RSS. Easy to identify images and applications let you move not just between websites, but also from your cellphone, webdesign has gone beyond computers and jumped into cellphones.

sasquash

Icons have evolved from being blurry bitmaps images to each single one being true art pieces, whether is pixel art or vector illustrations, and by being applied in high definition devices.

pixel perfect

Boxes are still being used for giving structure to the website, however, their utility has grown, now they are used to guide with words and a little content around the website. Internet surfing has changed since the first websites that were filled with text, blinking images and blue links. Now, the less text is used, the better, however, there’s still an idea that needs to be transmitted, and short text in a few well placed boxes can perfectly get the job done.

pastel

The trend in backgrounds is texturized and photographs. Textures can be given by wood prints, leaves illustration, blurry images and shadows, opaque or colorful. There are no limits with illustration and design for background images. Regarding photographs, they must have high resolution, be vivid and  present quality close ups and open shots. The most important thing is getting the idea clear and don’t misslead the users.

foto

Animations can be used for a discrete but useful menu in your website and the entire background can be animated too (Specially if you’re a animator, this can be a perfect way to display your talent). The truth is that flash animations are here to stay, even is they’re just being supportive in a menu or a few buttons to give your site a special touch.

Conclusion: web design keeps getting better and better, so you?

We’re in 2011, it’s been about 20 years since all this web design’s madness started, some people thought the internet wouldn’t last but here it is. It’s amazing, we are able to look back and appreciate the long path behind us and wonder about the future. The first websites were rustic and slowly evolved until arriving to the point they’re now. Went from rough to completely functional and beautiful to see. All this thanks to a lot of creative minds who have been pushing and trying different things. The background color have gone from way too vibrant to pleasant photographs, the cluttered text and image accumulation slim down and now we really see only the important information. Time goes by really fast, the daily routine demands us to keep ourselves informed and nonstop, so internet and web desigining had to adapt to this fast times. Here we saw the evolution through all this years, icons, buttons, grid, colors, font, animation, all this thing grew and allowed the design we can all see online this days. What’s in web design future? who knows. There’s a trend in minimalistic design, in vibrant colors, better choosed color palettes, a constant integration of animation in websites and a lot more interaction between the user and the computer. There are sites that allow you to blow over your mic and give energy to a country, or print an image and see a 3D character over the printed sheet. Not even the moon is our limit.

So, after at least 30 minutes of reading and filling that little head of you with all this knowledge, don’t you want to read a few articles related? Be my guest.

If youWanna know the story about how amazing is NOT BEING AMAZED by all the things we’re capable of doing online now, read the Web 3.0 Article and remember, 10 years ago there was dial modem, now we have routers and wi fi, but we still not amazed.

And if you’re wondering where’s the web designing going from now on, go on and take a peek of future and find out what are The Real Design Trends for 2011

Ok guys, now we reached the end of this article, hopefully this can help you understand the past and present of web design in order to contribute to its development. If you liked this post, don’t hesitate in leaving us a comment or sharing in one of our social networks, we will really appreciate it.


81 Responses to “Web design history, a complete journey”

  1. We are expecting this.. I will share this.. Also bookmark this history.. Well written sharing with us..

    • WebDesignShock
      May 24th

      Thanks pal, we’re glad you liked the article :)…

  2. This is excellent! Well worth a retweet!

    • WebDesignShock
      May 24th

      Thank you Tom!, what would you add to the post :)?…

  3. Cindy Morrison Love
    May 24th

    can’t believe i read the entire thing …… well, almost LOL, this was great, got a few good laughs, now i’m going to read the related articles and eat my cereal

    • WebDesignShock
      May 24th

      Haha that’s awesome Cindy, we’re glad of having been able to cheer up your day :)…

  4. this is a very good article, containing helpful material which
    ultimately enhances the interest of the reader in that particular topic

  5. muy buen articulo ! he pasado por todos los años ;-)

    • WebDesignShock
      May 24th

      Gracias!, espero que lo hayas disfruto, ahora a ver que dirán de nuestra generación en unos años XD…

    • WebDesignShock
      May 24th

      Gracias!, espero que lo hayas disfrutado, ahora a ver que dirán de nuestra generación en unos años XD…

    • que bien ! no esperaba que hablaras manchego tambien !!! supongo que a este ritmo en 20 años nada tendra que ver con esto :-) felicidades por la web

    • WebDesignShock
      May 26th

      Hey gracias amigo, si todo esto ha ocurrido en tan solo 2 décadas, qué podrán decir de nosotros en las siguientes 2?…

  6. web design keeps getting better and better..wonderful.

  7. Wow!
    Feels like I went back in time ;)

    • WebDesignShock
      May 25th

      As long as it remains a sensation and not a reality hahaha…

  8. Ra_ambuehl
    May 26th

    Wow! This is really outstanding! Very well done and very informative.

    • WebDesignShock
      May 26th

      Thanks buddy, did you enjoy reading this article?…

  9. Wow we really have come a long way….

    Great post.

    • WebDesignShock
      May 26th

      Definitely!, it’s been a wonderful journey with many great things still to come…

  10. Wow we really have come a long way….

    Great post.

  11. Nathan Marcarelli
    May 26th

    Wow What a great read.  It is amazing how far everything has come.  I am definitely going to RT this.

    Thanks,
    Nathan Marcarelli
    http://www.treelifedesigns.com Small Business Web Design

    • WebDesignShock
      May 26th

      Oh that’s awesome, we’re glad that you enjoyed this post, thanks Nathan!…

  12. Carla Stendhal
    May 31st

    nice, this really seem like a deep investigation, i’m gonna check out that page for traveling in web design time.

  13. design_history
    May 31st
  14. Excellent post,

    Awesome
    resource..

    • WebDesignShock
      June 9th

      Thanks mate, hope you enjoyed reading this…

  15.  Great post!

    • WebDesignShock
      June 15th

      Thanks buddy :)…

  16. I liked the resource and history progression. However, I did find all the grammar and spelling/typo mistakes in the article a bit distracting. Otherwise, well done.

    • WebDesignShock
      June 15th

      Thanks Nicholas, we’re going to take a not at your suggestion to make better articles in the future ;)…

  17. Really great article with good references, it’s crazy that its only been about 20 years and I remember logging on to half of the above sites at the time you specified.

    I can’t wait to see the progression of web design another 20 years down the road…

  18. Unlocking some old memories!

  19. Incredibly Great article !!! A full and detailed history of Web Design. Thanks.

    • WebDesignShock
      June 20th

      Hey thanks for the comment Andrea!, web design has been through a lot after all…

  20. Ritika Lath
    June 20th

    Very nice post with a lot of research. Web design has actually come a long way 

    • WebDesignShock
      June 20th

      Indeed Ritika, and the next 10 years will be even more transcendental than the past decade.

  21. Great post.
    I forgot all about those old pages. To see them now makes me laugh, but at the time those designs were common place. Thank goodness for advances in technology and the greater understanding of web design there is now days. Enjoyed the journey back through the past. Thanks.

    • WebDesignShock
      June 21st

      Hi David, thanks a lot for your comment. Hopefully this article can be useful to realize how web design has been evolving since then and therefore try to guess where is it going to…

  22. Fabulous article! I am trying to convince a client that his black background with 10 pt. yellow and white font is so 2006 (and hard on the eyes).

    I’ll be sharing!

    • Hahaha that’s painful AmyS, hopefully you can persuade your client to change his mind…

  23. PeteW
    August 8th

    20 years? Really? How many kids were telling their mothers they would create the “best website ever” in 1991? We older geeks remember it happening much more like Wikipedia’s article on the history of the World Wide Web: http://goo.gl/ZHc0f . Have a bit of fun with looking at designs out of context, by all means, but don’t misrepresent history if you want to retain credibility.

    • Thanks Pete!, we did get a little excited when writing this article, though the main idea is definitely close enough to what it was like to be an internet entrepreneur back in the 90’s…

  24. DeniseK
    August 27th

    Fantastic and informative article! I came across this when I was researching web design history for my Web Expressions 4 class. I will definitely be sharing your article! It also brought back memories of my daughter at 9 years old in 1995 – saying “Hey Mom, come and look! I just got finished designing my own webpage!” Ahhh such memories!

    • That’s amazing Denise!, we can definitely remember how things were so much simpler (not better) back in the 90’s.

  25. Jeanett
    December 9th

    It is awesome Post. I really like these philosopher thoughts and would like to post a thread talking about this review and Link of this post in my online web design community here

    • Thanks for the recognition to our work. Glad to see that our pieces are of great use to our visitors. best Regards!

  26. Just a brief thanks for your articles and insights, I really look forward to and enjoy reading things here, its a very great source of detailed information thanks a lot!.

    • Thank you for the recognition to our work. Be on the lookout for upcoming posts on the matter. Best regards….

  27. Wil Tolley
    January 3rd

    Great history lesson of web designing. Im only in my first semester of web design and found this very helpful.

  28. De los mejores post que he leido, muy chingon!
    Excelentes ejemplos muy buen resumen, excelente tema!

    :D

  29. Santiago
    March 10th

    Love this article!
    thanks alot, it was a thrilling adventure

  30. bberry
    April 12th

    I blog quite often and I genuinely thank you for your content.
    The article has truly peaked my interest.
    I am going to bookmark your website and keep checking for new details about once per week.

    I subscribed to your RSS feed too.

  31. Love this! Great job

  32. Your article has proven useful to me. It’s very informative and you are obviously very knowledgeable in this area. You have opened my eyes to varying views on this topic
    with interesting and solid content.
    website design

  33. bluelight
    February 18th

    Best article ever…

  34. Very nice article about web design history, i write a related article in my blog i invite you to visit it, greetings

  35. I enjoyed learning about this journey that I have experienced.
    I have seen so many changes and wonder at which stage I am stuck at. 

    I am a designer, looking for full -time work but would like an honest critique of my website. I am not quite finished with it as  some links don’t connect, but would you give me your first glance advice?

    • Designer
      July 29th

      Looks good, stay tuned for more awesome posts!

  36. Web Design History, a great blast from the past on what web design looked like (when I first started) http://ow.ly/5PVu4

  37. Trust me, you’ve forgotten what it was like in the mid ’90s. Web Design History, a complete journey: http://bit.ly/qozrW6

  38. Web design history, a complete journey http://t.co/4gPLvNPw

  39. This is priceless!! Has had me in stitches for the past half hour! – http://t.co/eLhdA1vJ via @webdesignshock

  40. RT @WebDesignShock: Web design history, a complete journey http://t.co/aGtLXdnh #design #useful

  41. RT @WebDesignShock: Web design history, a complete journey http://t.co/aGtLXdnh #design #useful

  42. Web design #history, a complete journey http://t.co/TfRfQ0zI Very #goodToKnow :) #webdesign

  43. RT @WebDesignShock: Web design history, a complete journey http://t.co/aGtLXdnh #design #useful

  44. RT @webdesignshock: Web design history, a complete journey http://t.co/hY96AajH #design #useful

  45. Web design history, a complete journey http://t.co/H2BKVjLc #design #useful

  46. RT @WebDesignShock: Web design history, a complete journey http://t.co/aGtLXdnh #design #useful

  47. RT @WebDesignShock: Web design history, a complete journey http://t.co/aGtLXdnh #design #useful

  48. Web design history, a complete journey http://t.co/NQYQjh2y via @webdesignshock #useful

Leave a Reply

Comments

*