Month: March 2015

The International Style: Integral to the history of typography

A major force in the history of Typography is arguably The International Style, also known as the Swiss Style. This is the style that is most firmly planted in my mind as being a 20th century methodology that has shaped modern typography. Though decades have passed since this style rose in popularity, it is still a methodology of sorts that is still used today.

The International Style came about in 1950’s Switzerland where the hallmarks of modern style began. It is characterized by the use of flush left sans-serif fonts and the use of a grid to create clean, readable and objective design concepts. International Style relies on strong and vibrant color, geometrical forms and effective photographic images as elements. Layouts are based on a mathematical grid and elements are planned out in accordance to this structure. The grid system and strong typographical statements gives the Swiss/International style that certain look and feel. From the 1550’s to 1960’s this style dominated the commercial design scene.

ITS had its origins in the 1920s and 1930s when designers were developing new ideas to coincide with industrialization and technological advances. Printing technology was advancing and growing and a clean readable font was required. The sans-serif font of the Swiss style was an answer for that. Jan Tschicholds 1928 book Die Neue Typographie was a major influence of Swiss style designers as well. This style was not only a response to new technologies but also also an outlook by designers who saw there work as useful and as elements of social change.

The Swiss style is still important today, especially in the arena of corporate design. The focus on legibility and cleanliness are still important facets of logo design, government and corporate. The simple and flat designs of the time period which sought to remove excessive ornamentation was criticized as being cold and formulaic, but Swiss Design has an important place in the 20th century and today. The idea that designers are not only artists but should also be aware of there social responsibility, and also problem solvers trying to fix problems associated with technology, accessibility and readability, are just as relevant today.

The International Style was an important style in terms of its place in typographical design history and its influence today. The method in which designers such as Joseph Muller-Brockmann and Max Bill chose to tackle design problems is the basis for modern Graphic Design theory. The Swiss Style was created in an era of scientific advances, social strife and war. Today is an era of scientific advances, social strife and war. The lessons learned from ITS are no less relevant in the world of mobile devices, web accessibility and marketing.

Working with HD Wireframes

Working with text

How text is written on a website determines how successful the website will be. Well written text will build trust, educate, sell products, and get viewers to return.

Best practices when adding text to a wireframe

  • Select a sans-serif typeface or another typeface that is designed for readability for body copy
  • Use white space well
  • Break up paragraphs and get to the point
  • Do not use different colors for the body text
  • Create hover-over effects for hyperlinks and have the links a different color from the rest of the text
  • Always double check spelling and grammar
  • Cite any references and resources used
  • Link additional information to other parts of the website (a great practice for web presence and search ability)
  • Give viewers the ability to save and share the content
  • Write content that is easy to skim & scan
  • Know the audience
  • Engage the viewer

Working with color

Hi-definition wireframes show the client what their website will look like as a final product. Providing the client with a Hi-definition wireframe vs. a low-fidelity wireframe can make a world of difference impression-wise with the client. It can also save you time by showing the client how the colors, images, media components, etc. they wanted will work together as a finished piece.

Best practices when adding Hi-definition Wireframes

  • Determine what color palette your client wants to use
  • Make sure the color palette compliments the images you are using
  • The first showing of the wireframe should be with the low fidelity wireframe
  • When presenting the hi-definition wireframe explain to your client this is only a visual representation – no code has been done yet
  • Keep the focus on the flow of the website – do not let the visual reference distract the client

Selecting colors

To help you select colors please review these different color scheme websites:

Picking complementary colors is critical as a designer. This website helps you select the correct complementary colors.

Maybe you would like to pick colors for your wireframe from photos you found? This website allows you to upload a photo and provides you with a color scheme to use!