Design Elements & Design Principles

While studying design there are several concepts stuck in your brain for the duration of your courses.   However, you might forget about those basic concepts once you leave school.   A good idea is to have a little sticky note, or even desktop background reminding you of these basic design concepts on a daily basis.   After all, you have to keep them in mind and put them in practice every time you create a design.   It is also a good idea to look at other designs and attempt to describe them using a design vocabulary and the basic concepts of design elements and design principles.

Design Elements
Line.   A line is the path of a moving point from A to B.
Shape.   A shape is the delineated area created by lines, color, texture, or tone.
Color.   Color is a description of light energy as reflected from a surface.
Texture.   Texture is the tactile aspect of a surface, even when its only a visual simulation of the actual texture.
Value.   The relationship of lighter and darker areas of a composition.
Space.   The figure/ground relationship or positive and negative spaces are the interactions of shapes and backgrounds.

Design Principles
Balance.   A sense of equilibrium or stability achieved by evenly distributing weight.
Unity.   Visual elements in a design look like they belong together, as their interrelation forms a greater whole.
Emphasis.   Involves arranging visual elements in order of importance by making some elements more dominant.
Rhythm.   Repetition, variation and patterns that guide the viewers eye through the design composition.
Scale.   Size of visual elements as seen in relation to other visual elements.

Here is a little Wallpaper I created to remind us all of the design principles and design elements.  Feel free to download 🙂

Design Elements & Design Principles Wallpaper

Design Elements & Design Principles Wallpaper

My Favorite Infographics

Keeping with the theme of infographics, here I have compiled a list of SOME of my favorite infographics that I have come across with in the past few years.  I hope you enjoy them. (Click on them to open in a new window)

Class of 2011: What if social media were a high school?

Class of 2011: What if social media were a high school?

How Would You Like Your Graphic Design?

How Would You Like Your Graphic Design?

The Apple Tree

The Apple Tree

The Evolution of the Geek

The Evolution of the Geek

Sitting Is Killing You

Sitting Is Killing You

I also found this pretty cool free online tool to create a wallpaper infographic about yourself.  Try it out here:

http://www.ionz.com.br/index.html

*Make sure to change the language to English, though, because it is in Portuguese.

For more infographics visit these cool sites:

http://www.coolinfographics.com/

http://www.infographicking.com/

Infographics

Infographics, or Information Graphics, are a visual representation of knowledge.   It is a way to represent information graphically.   You have probably already seen many infographics, but you did not know that this is what they are called.   We see them all the time in Magazines and Newspapers, like the infographic depicting Osama Bin Laden’s Compound and how he was caught.   They are those illustrations, graphics, pictures, arrows and text that accompany an article and that help you understand the information contained within that article.

English: Hideout of Osama bin Laden, the locat...

I was always fascinated by these infographics, even before I knew that’s what they are called.   In fact, one of my favorite Graphic Designers is Edward Tufte, who creates amazing infographics.   Also, Nicholas Felton, whose annual reports I find to be incredible.   Perhaps because that I am fascinated with these types of designs, I love to see them in other media and not just newspapers and magazines.

I remember seeing infographics and enjoying them in illustrated dictionaries, and encyclopedias I researched for homework as a kid.   I always stopped to look at them, even if they weren’t related to the topic of my homework.   You know which ones I am talking about, those that showed you the parts of a car, the animals that live in the water, the solar system, the human skeleton, the process of water evaporation, and so on.

Nowadays, we see infographics in other places as well.   I have seen infographics being used in movies, such as the closing credits for “The Other Guys” movies.   That animated Infographic was about Ponzi Schemes, the bailout, and corruption in general.

I also love te infographics in one of my favorite movies, “Stranger Than Fiction”.

There are motion graphics infographics created sort of like a video, with only typography, illustrations, and sometimes a narrative.   People infographics like these to make a difference, to inform others about changes they can choose to make on their own to help.   For example, this infographic designed by Chris Harmon, about the oil spill in the Gulf back in 2010.

Some infographics even tell us how to do something.   Like how to make a good cup of coffee.

Expresso Infographic

Expresso Infographic

Something I found very cool is a Graphic Designer’s Resume Infographic!

Elliot Hasse Infographic Resume

Elliot Hasse Infographic Resume

There is even an Infographic about Infographics!!!

Infographic About Infographics

Infographic About Infographics

I hope you enjoyed all of these Infographics, and now you know what they are called when you see one. I will post a collection of my favorite Infographics soon.

Printmaking Experience

Printmaking: Black Cat

Printmaking: Black Cat

While attending Community College in Florida for a Graphic Design Technology Degree, I was lucky enough to be enrolled in a Drawing II class in which the professor decided to perform an experiment using us students as guinea pigs.   She wanted to teach us printmaking and perhaps if it went well, she could open a new Beginning Printmaking class in the future.   The school had the equipment necessary, those old printing presses I passed everyday in the classroom and had no idea what they were, or what were they for.   I am extremely happy to have been a part of this printmaking experiment, because as a Graphic Design student I rarely experienced hands-on projects, and was mostly assigned hands-on-mouse-and-keyboard type of things.

Jan Johnson (our teacher) came in one day and said “we were going to try something new”.   She gave us all a rectangular piece of Plexiglas some ink and said “we were going to try printmaking”.   I was scared.   I didn’t know what she was talking about.   Then she explained how we where going to try this new thing out, and I was excited.

Printmaking: The Chair

Printmaking: The Chair

Printmaking is a form of art that involves using ink to create the artwork on a matrix and then transferring it to paper or other materials such as fabric.   Printmaking makes it possible to produce an artwork several times, but that wasn’t the case with what we were doing in Mrs. Johnson’s class.   We were creating monotypes, a type of printmaking in which you create the artwork using ink and a matrix (in this case, the Plexiglas) and then transferring it to paper using a printing press.   By then, most of the ink is gone, therefore producing only one (mono) piece of artwork.   I thought that having one chance to make it right and not being able to have a re-do [like command + z] was scary, but once I had the hang of it I was very pleased with the results.   You could run the matrix on another piece of paper with the remaining ink, and have what Mrs. Johnson told me was a “ghost print”.   I had a couple of practice runs, my first one is to horrible to post in this blog, specially because it is supposed to be a self-portrait.   But eventually I got the hang of it and decided to create a series of prints with the subject being the instruments I know how to play.

So, the process was very simple.   Have an idea of what you want to print.   Draw a few sketches of your print.   Get the Plexiglas; evenly coat it with ink by using a roller.   Create the artwork by removing the ink (negative print), using your fingers, fingernails, hands, rags, cotton swabs, brushes, sponges, dried out pens or markers, or anything pointed that could also add texture. Place your Plexiglas ink-down on your paper, and pass through the printing press. This is the result.

Printmaking: Piano

Printmaking: Piano

Printmaking: Guitar

Printmaking: Guitar

Printmaking: Marimba

Printmaking: Marimba

Printmaking: Melodica

Printmaking: Melodica

Printmaking: Melodica (Ghost)

Printmaking: Melodica (Ghost)

Geeky Friday – Black Friday Essential

Anti-Theft Lunch Bags

Anti-Theft Lunch Bags

Anti-Theft Lunch Bags

So no one steals your Thanksgiving Leftover Turkey Sandwich!

What font is this?

What Font Is This?

What Font Is This?

Don’t know? No problem! Continuing with the “There’s an App for that” theme, here’s another great app for graphic designers.   It is appropriately called “What The Font?” and it is a great free and easy way to find the name of a particular font.   The guys from MyFonts.com are geniuses! I wish this app were around when I was just starting as a Graphic Designer, but I’m glad it’s here now.

I initially had found it by browsing for design apps for my iPhone, but as it turns out they have a website.   So if you don’t have an iPhone or another Smartphone, you can still use this awesome app online at What The Font.

What The Font

What The Font

What you do is grab an image (online) or take a photo of the font you want to know the name of, upload it, determine the characters, and BAM! They tell you what font it is.

Ok, ok… sometimes it doesn’t work quite as easy, but then you just leave a request for the font and someone eventually helps you find the name for it (you need to sign in for this, but hey! it’s FREE!).

The great thing about this is that the more people upload images and the more fonts are recognized, the easier it will be for others to recognize fonts through the automatic process.   It is a great tool and community to use and be a part of if you are a graphic designer, or if you simply want to know the name of a particular font.

Here is a little video on how to find the name of a font. You can download the first image on this post and try it out yourself! (No Audio)

 

How to Find the Name of a FONT, Using What The Font from My Font

Kuler Colors

Nowadays we can do just about anything thanks to technology.   The new answer to all of life’s intriguing questions is: “There’s an App for that”.   For all of us in the creative fields, this is good news and bad news.   This means that we will be forever learning throughout our careers.   A new Adobe Creative Suite, a new Smartphone that needs user interfaces designed, a new app, you name it.   However, this is great for us, because these updates, upgrades and apps can also make our job easier.

One of these cool tools we can benefit from is the Adobe Kuler color tool.   It is a FREE, yes, FREE online application that lets you create, share and explore different color themes.   This is great for us designers that sometimes have “color block”, and we can’t decide on a color scheme for a project.

Adobe Kuler

Adobe Kuler

The website is very simple to use.   You first go to http://kuler.adobe.com/, and simply begin exploring color options.   You can search a color theme by keyword, you can look at the newest, most popular, highest rated, or randomly.   You can create an account and upload your color themes.   You can make changes to a theme, select one color from the theme, select a rule like analogous, monochromatic, triad, complementary, compound, shades or even custom to find other colors for the one you have selected.   You can look at the RGB, CMYK, LAB or even HEX values for a particular color.   You can even create your own new theme using your own photos as a reference.

Adobe Kuler

Adobe Kuler

You can benefit from this great tool if you are a graphic designer, illustrator, photographer, fashion designer, interior designer, makeup artist, stylist, scrapbooker, cake decorator, painter, or any other person who at some point in their life has to pick a color combination for whatever reason.

Adobe Kuler

Adobe Kuler

Geeky Friday

Speaking of positive/negative marketing ideas…

The Buckle Up Key Holder

The Buckle Up Key Holder

The Buckle Up Key Holder

Because subliminal messages work!

Marketing & Stereotypes: The Abercrombie & Fitch Story

Nowadays it is human nature to attempt to classify people, products and brands into different stereotypes.  A stereotype is a standard classification that individuals commonly classify other people, products and brands.  People are stereotyped because of race, ethnicity, sexual orientation, gender, and even the types of products they buy and clothes they wear.  Stereotyping is not something that should be practiced, because it is wrong to assume an individual’s personality or beliefs based on their looks, clothes or products they purchase.  Even though stereotyping is not something highly recommended by society, people still stereotype other people based on such shallow observations.  One example of stereotyping based on clothes is the stereotype or label of “Preppy”, “Preppie” or “Prep” given to individuals who wear clothes sold by stores like Abercrombie & Fitch, Hollister and American Eagle.

The word “preppy” actually came about in the 1950’s, and it derived from “preparatory schools”.  The White Anglo-Saxon Protestant, or WASP term was highly associated with the term “preppy”.  The WASP community was mostly high-class individuals who attended such prestigious schools and dressed in a laid-back, yet luxurious clothing of brands such as Lacoste and Lilly Pulitzer.   This style was then re-launched by stores like Abercrombie & Fitch in a more affordable price for teenagers of modern days that belong to the middle and higher social classes.  The preppy kids back in the 1950’s where actually members of high-class societies, went to Ivy League colleges and universities and private preparatory schools, they owed yachts and boats, and could afford expensive taste such as Ralph Lauren.  The preppy kids nowadays do not form part of such high-class and do not own expensive boats or attend prestigious colleges and schools, but they can afford to look like they belong to the same high-class as the 1950’s preppy kids because of stores like Abercrombie & Fitch.

Abercrombie and fitch Paris summer 2011 advert...

Image by cattias.photos via Flickr

Abercrombie & Fitch Users and Stereotypes

I do believe that users and consumers of Abercrombie & Fitch clothing identify with the “preppy” stereotype.  The Abercrombie & Fitch crowds are labeled by others as “preppy”, and they do not consider this an insult, but instead a compliment.  “Preppy” kids are usually the popular kids in high schools who are concerned with looks, popularity and material possessions.  Even though some of them do not belong to high social class, they like thinking that they look that way.  The reality is that Abercrombie & Fitch is not actually a real “preppy” store, because they are not as expensive as the real “preppy” clothes like Ralph Lauren, Lacoste, Tommy Hilfiger, etc.  However, the style does look like the more expensive stores.

Abercrombie and fitch Paris summer 2011 advert...

Image by cattias.photos via Flickr

Stereotypes and Sales

The “preppy” stereotype helps Abercrombie & Fitch sales.  Mainly because most middle-class teenagers who wish to belong in the popular group may not be able to afford the real expensive “preppy” brands like Lacoste.  Therefore, they will choose to shop at Abercrombie & Fitch because the clothing looks like the more expensive clothing and has the same “preppy” style, but it is much more affordable for teenage kids with a middle-class allowance.  The more they wish to fit in to the popular crowd the more clothing they will buy from stores like Abercrombie & Fitch.  The “preppy wannabe” crowd purchase clothing from Abercrombie & Fitch basically because of the way it makes them feel.  The clothing makes them feel like they belong in the “preppy” crowd.

The image of Abercrombie & Fitch today.

Image via Wikipedia

Stereotypes in the Advertising Campaigns

The Abercrombie & Fitch advertising campaigns most definitely intentionally designed to target the “preppy” and “preppy wannabe” crowds.  If we look at their advertisement and images placed throughout their stores we can appreciate the intent of the ads through their design, and specifically the scale of the photographs being displayed at each store.  Most of their advertisement feature clean-shaved, clean-cut, muscular, slim body, Caucasian, good-looking people.  These are the typical characteristics that fit the “preppy” individuals.  Another major effort from this company to keep the advertisement targeted at “preppy” teenagers is the fact that they hire people who fit into this stereotype to work in their stores.  There have even been lawsuits against the company because they would not hire a Muslim individual, according to her, because of her headscarf.  There was another case of another teenager who claimed they would not let her work outside of the back storage of an Abercrombie and Fitch store because of her prosthetic arm.

Geeky Friday

Pantone Themed Products

This slideshow requires JavaScript.

Because some people could use a little color in their lives.

Find these products online here:

http://www.pantone.com/pages/pantone/category.aspx?ca=33 
http://www.chroniclebooks.com/titles/pantone-100-postcards.html
http://www.uncommongoods.com/product/pantone-mug-set-of-10
http://www.uncommongoods.com/product/pantone-boxes
http://www.seletti.it/pantone/pantone_xmas_ball.htm
http://www.uncommongoods.com/product/pantone-folding-chairs

 

Branding and Re-Branding

As Graphic Designers, we should constantly be aware of our surroundings, paying attention to design styles, trends and branding.   Branding can be defined as the process a company uses to build awareness about their products and organization, as well as to extend customer loyalty.   The branding process involves several steps to ensure successful branding of the company and its products.   The steps involved include conducting research, clarifying strategy, designing identity, creating touchpoints and managing assets.   Many companies have modified their branding strategy in the last step in order to change their branding, diversify their branding or limit their branding.

A good example of a company that has managed its assets in order to change and diversify its branding is Federal Express.   Founded in 1993 as Federal express, the company later changed its name to FedEx Corporation.   Later, the company acquired different logistics and shipping companies to provide a wider list of services.   The company now has several different company services such as FedEx Express, FedEx Ground, FedEx Freight, FedEx Custom Critical and FedEx Trade Networks.   Each logotype for each service is the same; the difference is that the word “Ex” is color coded to each service.   For example, FedEx Corporation is grey, FedEx Express is orange, FedEx Ground is green, FedEx Freight is red, FedEx Custom Critical is blue, and FedEx Trade Networks is yellow.

Fedex truck

Image by Crystian Cruz via Flickr

The choice to diversify and expand the company branding was ultimately beneficial.   Because of their diversification and expansion, FedEx could now provide different types of services to their loyal customers under the same recognizable branding.   The identity risks of expanding the company’s branding to a number of different services is that the customer could be confused when identifying the company, a particular service or the parent company.   The visual branding considerations that a company must keep in mind when expanding its brand identity is, like in FedEx’s case, to not alter the original branding so much that the customers are unable to recognize the parent company.   Looking at FedEx’s decisions to expand and the branding that they chose, I think it was a good idea and it was executed perfectly and it ultimately was a success for the company.

1,000 Visits

Thank you! Today, October 19th, 2011, I have reached 1,000 Visits on this blog.   I am honored!   I wished I could thank visitors personally, but I have no way of knowing who they are.   Either way, as a special thank you for visiting my blog I have decided to write this post and leave an open thread for any special Design, Photo, Apple or even Geeky Request or Questions.   So go ahead, ask and you shall receive!

Thanks again!

What is the Design Brief? And Why Do I Need It?

As we embark on a new project for a new client, there are certain steps we must follow, before we even begin to create any designs for the project.   We can’t just simply jump on the computer and begin creating anything that we can think of for the project.   We must first complete those specific steps.   This is when the design brief comes in.

The Design Brief and its Importance

A design brief is the first step of a design project.   The brief is a thorough document that provides an overview of the entire project.   This document informs the client, as well as the designer and everyone else involved, about the steps to be completed before, during and after the development and production of the project.   The design brief is very important and should be revisited before, during and after the project is completed.   The design brief will also serve as a reference document to guarantee that the finished product fulfilled the design’s objectives, it will reach the specific target audience, and it is following the predetermined path.

Parts of a Design Brief

Design briefs can vary when it comes to content.   The design brief template or parts should be tailored to each individual type of project and client.   However, there are a couple of important sections that must always be present.   A design brief should be thorough, clean and organized so that all the parties involved have a clear understanding of the entire project.   Most design briefs usually include a cover/title page; a table of contents page; an executive summary or corporate profile of the client’s company; an overview of the current situation of the company; information about the target audience; the overall objective of the project; description of the components or deliverables; a timeline for the project’s completion; the budget allotted for the project; personnel requirements; and payment schedule.

Importance of Research

Conducting research about the target market and current competitors of a specific project is crucial.   In order to tailor a design and effectively communicate the message to the target audience and to persuade the consumer that the product is better than the competition, we must first understand who is going to read the message (target audience) and what are the competitors saying about their products.   If we launched an advertising campaign for an educational product for elementary school students and we used a scary monster as the image of the product and we had the same message as one of our competitors, we would be ignoring the target audience and the current messages by competitors.   In order for the campaign to be successful, extensive research should be conducted about the target audience and competitors.

Important Steps

I believe that the most important steps in a design brief are the project objectives, target audience and competitors.   The same goes for the creation of a new product.   In order to successfully create a product or a design package for a product, we must first know what is the message we are trying to convey, who is this message aimed at, and what are other companies saying about their similar products.   When we research and understand these three steps then we can tailor the message to the right audience.

Here is a downloadable example of a Design Brief prepared as an assignment for an Advanced Graphic Design I class, as a mock proposal for an existing company that specializes in educational software and gaming systems for elementary school children.

Design Brief Sample

Other Designs II: Environmental Graphics

Graphic Designers who wish to be true successful professionals, must be aware and knowledgeable in all matters of graphics and designs including different types of designs.  Environmental graphics are one of the many types of designs a graphic illustrator can create.  Environmental Graphics are designs that include architectural elements in order to better inform and create a spatial organization of a specific area or place.   Environmental graphic design is actually a profession in which designers create such graphics concerned with wayfinding, or the idea of using graphical icons in order to navigate an environment, such as maps and signs.

Thinking back to the beginning of civilizations, when roads where being created and buildings being constructed, back when the need for environmental graphics became clear, it is no different from nowadays.  With the advancement of society and technology, new needs will rise and new needs for graphics will rise as well.  The need to label the environment around us to better navigate it will always be there.

In my opinion, the future will bring change to the environmental graphics and their designers, but they will still be needed.  For example, cartographers used to create maps for individuals to be able to commute from one place to another.  Nowadays, technology has created interactive maps that are installed within our cars that literally “tell us” how to get from one place to another.  However, there is still someone who needs to design the digital maps and user interfaces of these navigation systems.

I also believe environmental graphics will not be obsolete, they will always have use, because people will always need to know how to get from point A to point B, whether it is from the parking lot to the emergency room in a hospital, or from Miami to New York.  The way we search for and retrieve the information may change from a physical map to a navigation system, cell phone or computer.  We might even have digital transparent air-screens pop up in front of us magically by just thinking of them, but there will always be a need for the actual design of the information, the user interface and the information itself.

One of my favorite things is actually creating maps.   I am sharing two different maps here, one of a fictitious mall and another of a building.

Fictitious Mall Map

Fictitious Mall Map

Floor Map

Building Floor Map

From Illustrator to InDesign

When using page layout applications like Adobe InDesign or QuarkXPress, designers are usually creating art for printing, for the web, or for mobile devices.  Depending on the final output of the design, the designer will choose a different file color mode, such as RGB or CMYK, different file dimensions, and different file weigh.  Therefore, the designers must usually create all parts of the artwork in other applications like Photoshop and Illustrator, with the final output in mind.

When it comes to Adobe Illustrator, there are two different options for creating files.  The designer may choose to “Save” the artwork, or “Export” the artwork.  When saving the artwork, the designer may choose from several file formats like .ai, .pdf and .eps.  When exporting the artwork, the designer may choose from other file formats like .tiff.  However, one thing must always be kept in mind, the designer should always save an original copy of the artwork in an editable format will all editable layers and text, which would be the original Adobe Illustrator format, .ai.

This slideshow requires JavaScript.

Now, when it comes to saving Adobe Illustrator files to later use inside InDesign page layouts, we can use PDF, TIFF or EPS files.  Therefore, a second copy of the original file must be saved for the sole purpose of importing to InDesign.  Once the page layout is completed and it is time to import artwork created in Adobe Illustrator, we can select the “place” option in InDesign.  In theory, all 4 file types, AI, PDF, TIFF and EPS can be placed using the “place” option within InDesign.  However, we might encounter some problems with each file.

The Adobe Illustrator file may not place correctly if the “Create PDF Compatible File” option was not selected when saving the original Illustrator File.  The PDF file will be placed correctly, but there will not be a transparency effect for the background of the object placeholder.  The TIFF file may place correctly, but like the PDF file, the background will not be transparent, and the quality of the image will be determined by the specifications made when saving the TIFF file.

EPS files are virtually accepted by every page layout, word-processing and vector applications.  When saving EPS files from Adobe Illustrator, there are far more options available to the designer, than when saving any other file type.  An important option is saving a transparent background, which would import perfectly to InDesign.  Another important option is the “Embed Fonts” option, which will ensure that the correct font will appear when printing an imported EPS file into InDesign.  Although, the designer could always save a copy of the original Adobe Illustrator file, with all the text outlined, but it would not go well if all you had was this outlined file for last minute text changes.  Another great option is the “Include Linked Files” option, which will ensure any placed and linked files within the Adobe Illustrator original file will not be missing once imported into InDesign, which is possible, because EPS files may contain both vector and bitmap graphics.  With all of these options, it is clear that the best file format to use in this case would be the EPS file format.

Nevertheless, there are plenty of export and save options for a reason, and that is because one file format may work best for one particular type of project, and another format may work best for another type of project.  This is why there is not and should not be one particular standard file format.

 

%d bloggers like this: