AIGA Lecture Series: Brian Collins

On October 6th, I went to a lecture at Mass Art by Brian Collins (put on by the AIGA Boston).

His design philosophy is that he is not a problem solver but a “problem seeker, telling a story.” I thought that was an interesting and great way to look at design and design problems. He also said that he was influenced by the idea “spirit of the future” ever since he saw a spaceship launched when he was a 9 year old boy.

He has done a lot of work with his firm. He turned an old gas station in LA into a futuristic green material gas station. He worked with an architecture firm to bring the vision to life. They created different mechanisms in the station so rain water would be saved and could water the flowers if there was a drought.

He also spoke of the WE campaign that he created for Al Gore. He couldn’t find a typeface that he liked or that he thought would go with the project so he had his professional typographer (also his friend) create a whole new typeface just for the campaign.

He had other projects that he spoke of, but the one that I thought was the most interesting and influential was his student that took a sad story and turned it into a successful design project that is utilized by Target.

His student’s grandmother was taking multiple prescription drugs and she took her husband’s drugs instead of hers because the labeling on the bottle was hard to read. The bad reaction to the mixed drugs resulted in her grandmother’s death. The student took this horrible story and redesigned medicine bottles so the labels would be clear and easily to read so that people would not take the wrong medicine again. This story was caught on the local news channel and then eventually Target loved the idea and implemented into their store’s pharmacy.

Brian was very inspirational because he made me think that great design can really make a difference. If we think outside the box and really do great research and go above and beyond, design can affect people in a positive way.


The Basic Differences Between Print Design and Web Design

This article, written by me, was originally published and posted for the Expert Articles for the Embarc website. I am reposting on my blog because I think it is a very beneficial article.

06/19/2007

Designing for web and print are two entirely different design challenges. Just because a designer is proficient at one doesn’t mean they’ll be good at the other. It’s necessary to understand that web and print share many similarities, but they also have many differences.

Web Fonts vs. Print Fonts

Typography is a design topic that has been studied by some of the greatest Designers in the world. It is a topic that is extremely complex and involves years of study. Most Designers have a fundamental knowledge of typography and how it should be utilized in design.

Print Designers have the luxury of using an extensive array of fonts in design while Web Designers are restricted by the usage of only web fonts1. Computers and Internet browsers restrict the amount of fonts that Web Designers can use because computers are programmed with minimal amount of default fonts. When the font is specialized or stylized, the designer has to install the specific font into their personal computer, but cannot anticipate that other users will have this font installed on their computer. Web Designers can include these exclusive fonts, but have to create an image of the font instead of having HTML markup text, which hinders the Search Engine Optimization (SEO) of the site. SEO is a vital component in websites today as search engines such as Google and Yahoo! have become more sophisticated and are a critical marketing strategy for many businesses today.

Print Designers do not need to worry about SEO, computers or Internet browsers including the fonts. A print file is created and prepared with the fonts either embedded within the document or the font is included in the file so the printer can install the font if it is not on their computer. Print Designers can also be remarkably innovative and creative with the treatment of typography. Because the layout is static, creating a printed design as an end result, the fonts can be manipulated and created in endless ways.

Executing a Website vs. a Print Piece

Websites are designed to be viewed on a computer monitor and are rarely ever printed out. Computer monitors are similar to television screens and utilize additive color mixing that mixes colored light together. Additive colors start with Red, Green, and Blue (RGB). When these colors are mixed, they create Cyan, Magenta, Yellow, and Key (Black) (CMYK). RGB colors are mixed in varying levels from 0 to 256, to form colors. Because websites do not need to be printed out, the colors on the monitors are the final viewing colors and the colors do not need to collaborate with a 4-color process printer. However, colors on monitors can be altered whether it is color corrected, old, CRT2 monitor, or LCD3 screen.

Collaborating with Web Developers is key to a successfully executed website. Web Designers should have a basic knowledge about web technology4 so that the design can be coded, and viewed properly on multiple web browsers. Web Designers have to be conscious that users are viewing websites with various web browsers5 and the variety of monitor resolutions6. Images on the web are generally 72 dots per inch (DPI) so that websites can load into a web browser promptly and without difficulty.

An important aspect of web design that Print Designers don’t need to be as concerned about is Information Architecture. Information Architecture is the method of organizing information that produces better usability and experience when browsing through a website. Both Web and Print Designers need to be concerned about how the information is portrayed through hierarchy of information by creating a clear concise message through typography and the layout of the design. Print Designers are more concerned with design characteristics and not the usability features since print design does not include interactive features.

Print Designers have to consider another realm of design rules when completing a great print piece. Instead of thinking about what the design will appear on a monitor or in a web browser, they have to reflect upon what it will look like when printed out. Print Designers use Cyan, Magenta, Yellow, and Key (Black) (CMYK) and Pantone Matching System (PMS) colors. CMYK are the 4-color process colored inks used in printing while PMS colors are based on a specific mix to create new colors referred as spot colors. This allows for many specialized colors to be produced.

Unlike web design, Print Designers are not confined by the resolution of the monitor or just to the computer. Print Designers can design large-scale banners, small business cards, brochures, books, newspapers, magazines, on clothing, on assortments of paper, etc. A Print Designers surfaces and size of design is far more diverse compared to a web designer’s small canvas. Images for printing have to be 300 DPI or larger because the printer produces designs at a high resolution of 300 DPI or higher. If an image file is printed at less than 300 DPI the image prints out pixilated.

Experiencing a Website vs. a Printed Piece

Websites create a very unique user experience because users are able to interact and consciously make a decision by clicking a mouse, skip around a website at their own leisure by using navigation, and pages can scroll indefinitely. The user controls the website experience and where they want to go since it is a non-static environment.

Web Designers are often told that on the homepage of a website the most crucial information about a company or business needs to be designed above the fold. The saying, “Design Above the Fold” comes from how newspaper Designers layout news articles. The most important headline and news stories need to be placed above the crease of the newspaper because that is what will be viewed immediately when picking up a newspaper. This also applies to websites so users can quickly learn about the company or business.

Print pieces are two-dimensional contrasting websites. Print pieces can be held and felt by the user which can create much more of an impact when understanding and examining the design. Print layouts tend to have a high graphical and visual effect because the pieces are not restricted like websites are.

Summary

Both print and web design have their advantages and limitations. When designing either a print layout or a website it is necessary to take different design approach to develop the strengths of each medium and minimize its weaknesses so that the finest outcome is produced.
1 Arial, Comic Sans, Courier New, Georgia, Impact, Tahoma, Times New Roman, Helvetica, Trebuchet, Veranda, Geneva
2 cathode-ray tubes
3 liquid crystal display
4 HTML, CSS, JavaScript, Flash
5 i.e. Internet Explorer v. 6,7, Firefox, Safari, Opera
6 i.e. 800px x 600px, 1024px x768px, 1280 × 800px


Design Conventions on the Web

This article, written by me, was originally published and posted for the Expert Articles for the Embarc website. I am reposting on my blog because I think it is a very beneficial article.

10/02/2007

Design conventions are elements that multiple people agree upon and implement so that web users will have similar experiences across disparate websites. By using web design conventions when creating a site, you are making life easier for the typical web visitor, which in turns leads to thorough visits and higher conversion rates.

These similar experiences eventually transform into expectations. If conventions make a visitor’s user experience less complicated, then it is safe to assume that websites that do not follow web design conventions will be looked upon negatively by web visitors. Just as there are standards of practice in the business world, there are corollaries in the web design world that ensure that nobody has to reinvent the wheel over and over again. As a result, designers are allowed to concentrate on customizing specific client requests. Fortunately, web design conventions are very straightforward and effective. Most ordinary users could recognize these design elements since they are so common.

Here are just a few examples:

1. Logo is placed conspicuously in the top left or right-hand corner of the homepage

Because a user’s eye is often drawn to the top left hand corner of a web browser, most designers consciously put logos in this location. It has become a norm on most sites to place logos in this position. When a logo is situated anywhere else, it takes a little more work on behalf of the designer and user to establish its authority.

2. The links on your primary navigation bar should all be internal links

Primary navigation should be a consistent fixture. If a user clicks a main navigation link and is directed to an external site, that consistent fixture will disappear. The user will lose contextual understanding of where they are.

3. Main navigation is often designed in a vertical or horizontal format

Primary navigation must be clear, structured, and intuitive. Positioning the navigation vertically or horizontally creates this feel, does not confuse the user, and helps them quickly identify the navigation.

4. Underlining words often indicate an active link

Underlining words separate active links from paragraphs of text, and create a hierarchy showing that it is important and clickable.

5. Changing the color of visited links

Changing the color of the link after a user has visited this page helps the user identify where they are, and have been on a site.

These consistent features on a website help users effortlessly operate a site to achieve their goals, to know what to expect rather than wondering how to use a new attribute, to immediately locate essential elements on a website, and to guide them toward important components such as the navigation. These basic aspects of websites improve a user’s ability to get things done quickly, and ultimately will help reinforce a satisfactory user experience. When elements of a website always behave consistently, users don’t have to anticipate what will happen. Instead, they know what will happen based on earlier experiences.

If a user visits a site and it behaves abnormally, they will feel less in control of their experience and will be quickly turned away from wanting to search deeper into the site. Because most sites use these design conventions, users start to expect that all sites should act in this way. They do not want to relearn a new system each time they go to a new website. Designers must always keep in mind that a web design, layout, and key messaging have about five to eight seconds to convince a new user to stay at a site and dive deeper into an inner page. Don’t waste this valuable time by forcing your web visitors to understand a brand new, untested design paradigm.

Sometimes design conventions can be modified, but only if it allows a user to complete a task in an improved way. Perform user testing. If your test user visits a modified site element and appears to be confused, obviously this is not a good direction to proceed with.

It is important for designers to remember that graphics are pleasant additions to a website, but should never get in the way of users understanding of a site. The web allows a consistent interface; use these design conventions as much as possible so users will be pleased and revisit a site numerous times.

Designers are committed to working with website business owners to design websites that adhere to these design conventions. Through mutual collaboration, the implications of deviation from the conventions can and should be explored. Conventions should be followed as often as possible as they are useful guidelines that were created to help.


Future of Web Design NYC 2008 (FOWD Nov. 4th)

I was able to attend Future of Web Design: FOWD NYC 2008. This event proved to be a must attend conference. It was refreshing to get away from my computer and listen to some really amazing thought leaders in the design industry.

I really enjoyed all the speakers but especially, Mike Kus and Nick La. They were both really inspiring and are great examples of forward thinking and unique designers. I really enjoy both of these designers because their styles shine through their designs.

Mike Kus incorporates hand drawings into his websites. His sites are incredibly creative but also convey meaning. Nick La’s illustrations are incredible and so beautiful. He often uses them as backgrounds and they definitely enhance the aesthetic of his work.

Nick’s explanation of where he gets inspiration was also extremely inspiring. He is always looking and documenting patterns and details with in his environment. He takes pictures, sketches or writes about elements that he can include into his designs or into his illustrations.

I feel like I do that but not to the extent that Nick does. I want to try to make this a more extensive practice in my own design journey.

Another thing that was talked about is how designers are starting off with HTML/CSS and then going to the design and not making every pixel picture perfect but in the code making everything line up perfectly. The designers are working much closer with the developers to create impeccable design and code so the site comes out perfectly. I think this is a really interesting process.

I want to work this way because I often feel like some designs could be tighter in the coding stage and less on point in the design stage because eventually it is going to be coded.

There was so much more that was discussed, but I only want to talk about the things that really stuck out to me. More information and details about the conference can be seen here: FOWD NY 2008.

I am really glad I went to this conference and definitely plan on going next year if it comes to the area.


June 13th - AIGA Design Event: Gourmet Typography

AIGA Event: Gourmet Typography

This event was taught by a woman named Ilene. She was extremely knowledgeable and is a typographer. She was very witty and clever as well.

I learned a lot and I also met some new people/designers which was also very exciting. I always like meeting new people and it was a lot of fun to talk and be with creative people that work in the same industry as I do.

The first activity that we participated in was drawing the missing letters in the alphabet. We got to choose between different fonts and I choose a sans serif because I thought it could be easier. However, it was quite the opposite. We drew in the missing letters and then we critiqued our letter forms. Everyone’s letter forms were really off.

Ilene spoke about how each letter is created with an enormous amount of detail. Often times, the letter r is shortened because if it weren’t it would run into other letters and create unnecessary negative space. She also talked about how a lot of people think that the letter X is perpendicular but often times the legs are skewed and off center. It was really interesting to think about letters in a different way that I have before.

She also talked about different techniques to use in print design and how web design is lacking in the typography practice. I completely agree. After we talked about different techinques like kerning, em and en dashes, hyphens, etc. we critiqued book covers and different print design that utilized really bad typography usage.

This was really interesting because it sharpened my eye to typography mistakes that people often don’t pay attention to.

Over all, this event reminded me of the typography classes that I took in College, but it was really good refresher. I enjoyed the alphabet exercise and the information about the letter R and X. If you are a designer, and want to expand your knowledge about typography, I recommend this event.



© 2016. JBird Creations.