Thursday 29 August 2013

Summer Brief - Invention/Discovery Research: Internet - Tim Berners-Lee (History Link)

Guided Tour Through Web Design History

Web design has been with us for a bit longer than 20 years now and sure, it is easy to criticize poorly designed websites nowadays, but few people really know how and where it all started. Things when web design started were really different – actually so different than such a website would be a shame today: weird colors, cluttered information, tables all over the place, Vegas lights and so many other things that everybody despises today. It is never too late to know a bit more about the history of web design, so let’s take a look at the most important changes throughout it.
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.

Guided Tour Through Web Design History

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.

Guided Tour Through Web Design History

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…


Summer Brief - Invention/Discovery Research: Internet - Tim Berners-Lee (Weaving The Web Book)

'Weaving The Web' is a book written by Tim Berners-Lee explaining about how web started and where he got his initial ideas from. I read some reviews and a lot of people had said it was easy to understand, as he uses language which isn't too complex in terms of web design. Having read parts of this book so far it has helped me to understand a bit more about the history of web design and I feel this is an important starting point in preparation for a year of learning how to design for web itself.


Summer Brief - Invention/Discovery Research: Internet - Tim Berners-Lee (Evolution of Web)

The Evolution Of Web Design

Summer Brief - Invention/Discovery Research: Internet - History of Web Design

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_computers
anniroger
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.
movie24
The 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.