Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 31 2012


Answering a Designer’s Question: Should I Choose Web or Print?

Print and web are both huge areas of design and mean a lot in today’s world. Print has been with us for more than 100 years and we know pretty much everything about it, while web is a new area of design that became mainstream about 10 years ago. Before this, web design was totally unknown and only experts and developers knew its potential and helped it grow to how we know it today. Both areas of design have advanced so much in the past 10-15 years that they started to cross each others paths and while this can be beneficial, it can also create problems. We will talk about the advantages and disadvantages in this article and also about how the two areas of design differ from a designer’s perspective.

Main difference

The biggest and easiest difference to spot is the experience you get from them, which are quite different from each other. Reading a newspaper is totally different than browsing a website. Even reading a book is different than reading an ebook, although the process is the same.

While web design is usually made to be displayed on a screen, which can vary in size, print designs can be huge such as posters or ads. And while the user interacts with a website, it is impossible to interact with a newspaper or a poster. While web design creates an experience based on the user movements (clicks and scrolls) and can’t exist without user interaction, print design creates the experience through readers’ eyes moving around and searching for information.

Image by josephbradleycooper.

Canvas versus screen

Both mediums take into account the demographics of the audience, as they are very important while designing, creating, advertising and selling content. A detail worth mentioning is that designers use the same elements and concepts in both mediums: fonts and colors are the best example. While it is easier to play with them on a computer, therefore easier to use in web design, don’t forget that newspapers are also created on computers before being printed out. This means that pretty much everything you can do on a computer can also be done in a newspaper. Yes, to some extent.

  • Monitors come in different sizes, therefore designs have to look good on all of them, or at least on most of them.
  • Moreover, there are even more browsers and operating systems, all with their own rules which influence the way the code is interpreted.

While those issues exist and don’t seem like they’re about to disappear anytime soon, all web designers learn to work around them and just move on. Being able to provide cross-browser websites is actually an asset for a web designer today.

There are, indeed, some restrictions on the web due to technologies such as HTML5, CSS3 or JavaScript, but great design is created within restrictions given by a client or by the medium. And there are constraints in print as well, such as the size of any given newspaper, book or canvas. You can’t scroll on it. While the print uses a lot of paper for only a newspaper, the online magazines use bandwidth, a host and a domain which need to be renewed periodically. Both have advantages and disadvantages, but since the web went mainstream, less and less people became fond of print.

Regarding the things that need to be learned, both industries have their own standards. I would however say that it is much more demanding to be a web designer than a print designer. While typography, colors and concepts such as negative space are as important in web as in print, the second one doesn’t have technologies like HTML, CSS, PHP, ASP.Net and so on. Sure, there is some Quark, InDesign or Photoshop to learn, but the technical part is more demanding for web designers. This is probably the reason behind graphic designers who work on web not knowing how to code: it is not possible for everybody to know that much stuff without a hell of a lot of work. Being a complete designer is not an easy task.

When a print designer transitions to web he has some tough challenges to encounter.

  • The first one is, as said before, learning to code.
  • But wait, there are more. The canvas is fixed in print – each newspaper or publication has its own standards.
  • It is quite different from the web, where experts debate for a long time what should the right width of a website be?
  • Making things appear on a website like they did in Photoshop can also be a challenge.
  • Doing this in InDesign is easy – you just move elements around with mouse.
  • Web design doesn’t work the same way, so knowing code is crucial, as WYSIWYG editors usually add lots of junk and unnecessary code to your files.

Image by bcmng.

Moving the other way around might also be a challenge.

  • There are no pixels anymore; print designers work in inches or centimeters, depending on the region or country standards. A new concept is introduced to them as well: bleed and margins, things that do not exist in web. Printing is also a challenge of its own and a job that needs to be mastered.
  • Navigation is also a new concept for print designers, as flipping through a magazine doesn’t need such a concept. In web design it is totally different. Not having navigation is confusing and makes a website useless. And just having navigation is not enough. Designers need to make it stand out, while making sure the content is still more visible and important in hierarchy. The general web architecture is different than the one in print, therefore a print designer would need time to learn and adapt if switching careers from print to web.
  • Typography is also huge in both disciplines. However, in print it has always been important, but it has been ignored in web design until five years ago. When typographers had a boost of inspiration and showed the whole web industry how well used type can change a website, then many web designers started to experiment and play with fonts.
  • In print it is quite different. Once a publication sets some standard fonts, they are pretty much used all over the place and in each issue. Changing them doesn’t happen too often in print; it does, however, happen on the web. Since the introduction of Typekit, a web font service, and Google Fonts, the restriction to the fonts on the computers stopped.
  • Although not difficult to get used to, size is also different in web and print. While a type of 10 or 11 is suitable for print, the web demands larger sizes such as 12 or even 14. But with so many designers out there, there is not really a standardized font size for the web. If the font looks good, the size doesn’t matter. The style is also important, as in print serif fonts are suitable for blocks of text, while sans-serifs are suitable for text on web.
  • Images are an important part of design too. But there are some differences between how we handle images on the web and how we do it in print. The first difference is the color format. CMYK (for print) and RGB (for web)  are the standards. CMKY stands for Cyan, Magenta, Yellow and Key (which is usually black) while RGB stands for Red, Green and Blue, which every monitor, TV or digital equipment uses to create color.
  • Images need to be formatted and exported in CMYK if they will be printed out, otherwise the colors will not be shown exactly as on the computer screen. While this is not a difficult process, when moving from a domain to another it might take some time to get used to.
  • Image compression is also something worth mentioning. There is no need to have an image with more than 72dpi (doth per inch) on web, with level 8 or 9 (which equals “high”) JPEG files or PNG. In print it is good to have images of up to 300dpi in order for them to look good and have high-quality.

Image by birdfarm.

Another disadvantage of the print industry is the lack of interactivity. The content on web is not only readable, but also interactive, which makes the experience better. While newspapers do not have any interaction at all, this can also be their advantage. Interactive elements are often not usable in all browsers; there is no such problem in print, where things are kept simple.

If something is clearly similar between the two industries, then the grid system is it. Now I know not all web designers use it, but it is something which is becoming more and more popular on today’s web. While in web design it is still not a standard, a grid system is crucial in print.

Mastering both

People usually throw the same question out there: is it possible to master both print and web? Well yes, I think it is. If you understand that both industries have their own standards and are quite different, then mastering both of them is definitely possible. However, mastering only one of them might be enough for a career as well, so if you are interested in both of them, go for it. Otherwise it will not be a big issue. The fact that you don’t know how the print industry works will not be an issue if you deliver your work for the web in time and your employer is happy with you.

Bottom line

Designing for print and web are two different things, although they are bound by the same concepts. If your background lies in one of them, I am sure you will have no problem in switching to the other one if needed. You just have to keep in mind that while the print industry stalls (or at least drives forward very slowly), the web develops itself a lot year by year and this will only make the whole industry more challenging. Both domains have their own advantages and limitations and understanding them will only make you a better designer.

Until next time… how do you see the web and the print industry? Do you see yourself working in both at some point in time, or one of them is just not for you? Why do you think that?

January 27 2012


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.

Yahoo!'s website in December 1996

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

McDonald's website in November 1996. 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. 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. 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…

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!