What inspires me as a designer

This week one of my assignments is to discuss what inspires me as a designer. Its not hard to think about all the many reasons why I love design.

The design field is dynamic and broad reaching, so my inspirations are many. My goal is to design things that are visually interesting. I want to design things that are visually appealing and successful in the way design can convey information in its most simplistic and eye catching form.

It is the challenge of a design project that inspires me. Such as the challenge to create a successful design; something the client is really happy with and something that the customer base appreciates.

All the possibilities of design inspire me. When I see really awesome works such as print design and logos that are seamless and memorable, I aim to reach that level of design skill. The great, vast ocean of possibilities of design is inspirational, like any art form, it is up to the designer-artist to create something, and to be a part of that process, whether it be in the conception, rendering or completion of a project, or being the sole designer for the whole thing is one of the reasons love design.

Inspiration is everywhere, and I am truly inspired to explore the way design blends art and technical skill seamlessly. Seeing that end product is a great feeling.To know that all your hard work paid off makes it all worth it. I enjoy designing and it is the creativity involved, the way art and technology meet and the challenge inherent in the design process that serve to inspire me.

Presenting your portfolio: the basics

You make think your portfolio is a sort of representation of your inner soul, but you must also take into consideration that your portfolio is showing your prospective employer what you have to offer them.Your portfolio should show a enough range that it indicates that you are able to fulfill the needs of the design firm or employer. Gear your portfolio for each job you apply for. A large corporation will have different needs then a small printing company. Prepare your portfolio accordingly depending on the specialization of the place you are applying to, so that you can best showcase relevant skills.

Before you can create the successful portfolio you need to know what your prospective employer is looking for. You will only know if you do a good amount of research. Once you have a clear idea who they are and who their customer base is you can better adjust your portfolio.

While it is impossible to have one general portfolio that works for a number of prospective employers, having subcategories can save the amount of time you are creating specialized portfolios. For example, your main content might showcase your top designs, while a secondary page highlights skills that the employer is also looking for. You can structure your portfolio in a way that indicates versatility and well-rounded design skills while also featuring a few of your specialties as well, be it video editing, animation, print design, etc.

How do you decide what should go into your portfolio?

-make an honest assessment of what you have to offer your potential employer
-know your strengths and understand your weaknesses
-understand that creating a strong portfolio may be daunting, but it is essential
-ask yourself “who is my audience?” (a good portfolio indicates that you understand the needs of the employer)
-gain confidence by building a strategy for what should be in your chosen works
-be critical and weed out mediocre work
-try to use only newer and relevant work
-remember that an emotional connection to a work does not guarantee it will translate well for a portfolio

Creating Interactive Documents with InDesign

An interactive InDesign document makes use of the same elements used in a traditional InDesign document, with additional interactive features:

  • Animation of text, headlines and images
  • Image resolution should be 72 PPI (rather than the 300 PPI used above)
  • Hyperlinks that take you to another page or new website
  • Sound files on buttons
  • Page transitions
  • The ability to play videos
  • Interactive forms

When creating an interactive document, it is important to consider the following:

Page Transitions Should be used carefully. Too many transitions could distract your viewer, cause confusion, or detract from your design aesthetics. It is important to review all of the page transitions and stick with one or two different transitions for your document.

Interactive documents Need to be configured for document RGB. You can set this under Edit → Transparency Blend Space → Document RGB. Interactive documents should be less than 1024 pixels wide.

Interactive Effects: Roll overs on buttons should change color – the color should complement the colors in your design, however, stand out enough so the user notices the roll over color effect. Buttons can have as many appearances as you want, however, it is recommended to not include more than four per button. We do not want to overwhelm the user with effects.

Sounds on buttons need to be used cautiously. Before you add sound to a button, decide whether or not it truly enhances the interactive document? Will it annoy the viewer if they return to the document the second time? How long is the document and how many sounds will be used? What happens if the viewer doesn’t have speakers or has their sound muted?

When you add hyperlinks to buttons, make sure you apply an appearance to them that helps the user navigate to different pages within the document. When the user clicks on the button, should the document take the user back a page, to the next page, to a URL, or to the start or end of the document?

Export SWF Files: When you export an interactive document as a SWF file, check under the Advanced tab to make sure the image quality is set to maximum. When you export an interactive document as a SWF file, check under the Advanced tab to make sure the image resolution is set to 72 PPI. After you export a SWF always test the interactive features. Make sure they all work correctly. If you find an error, correct the problem in InDesign. Then export as SWF again and test the new document.

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!

Planning UX projects: the project brief

UX Design: the Project Brief

The project brief is an important first step in UX design projects. The project brief gives you the framework of the project, describing the goals and objectives. It helps the designer create a framework that connects what the client wants with what is to be created. It should be dealt with at the beginning and during the initial client interview.  Another good thing about the project brief is it documents what the client initially asks for and if the client were to make changes halfway through the project, you, the designer, have documentation that shows what the original intentions were.

Best practices to consider when designing a project brief

  • Determine what the project goals are.
  • What is the client trying to communicate and why?
  • Who is the client, what do they do, and what business are they in?
  • Who is the client target demographic and audience?
  • Who is the client trying to target that they have not or have not been successful at in the past? Why?
  • What are the specifications of the project?
  • What is the budget?
  • What is the deadline?
  • Are there any limitations?
  • How will the project be delivered?
  • Ask the client to sign the project brief
  • Provide the client with a copy of the project brief

Here you can view some project brief examples

Unity and Contrast in typography

Unity and Contrast

Two important elements of the fundamentals of design are Unity and Contrast. Too much unity and you end up with something lacking attention grabbing appeal. Too much contrast and you may have something too chaotic for comfort. The key to excellent design is in finding a balance of contrast and unity that works well with the message you are conveying.

Unity

Unity in typography lets the audience know that sections of type belong together. Body copy, like that in a novel, is usually uniform so that the audience can easily read for long periods without interruption. Unity in this sense, is used so that the audience can focus on the meaning of the words rather then the typography itself.

The simplest type possible, such as Highway Gothic, is best for street signs to make sure the audience understands vital information. Unified type can be used to indicate when specific characters are speaking or even indicate feelings.

Knowledge of typography is important of Advertising, which short form persuasion. Companies use persuasion in the form of type and brand identity. Advertisements much catch attention over the chaos of competing ads via print, television and internet.

Contrast

Everything that exists appears to have an opposite. Much of our language and even thinking is based on the concept of differentiation, or placing things into dualities. Contrast is a basic part of human perception.

In typography, contrast is used to give the sense that items are different and stand apart. The type can be serifed, italic, bold, and placed next to a line break so that the black type stands out against the white background. Contrast is why the headline is the most important part of any message.

Whatever you are creating, be it painting, logo or print media, visual conflict is an element that will catch the viewers attention.

Balance

Balance is the act of creating with the right amount of unity and contrast. Until you have created that balance, its a matter of guess work. That’s why it is o.k. to make mistakes, getting it wrong first until you achieve balance in your design.

Designer of the week: Edward Benguiat

Benguiat

Benguiat Portrait

Typographer Biography: Edward Benguiat

Edward Benguiat, born on October 27, 1927, is a designer who has created many well known typographical designs. Born in Brooklyn, New York, his father worked at Bloomingdale’s as a display director and at the age of 9, began to learn the tools of the trade from his father. Before WWII, he began an interest in music and percussion will led to a love of Jazz. He enlisted in the Army during WWII and afterwords started his music career and gained popularity as a Progressive Jazz Musician. Edward later would say how graphic design and typography is comparable to the rhythm of music composition (Halperin, 2000). With his strong music background, he then used his GI Bill and enrolled into the Workshop School of Advertising Art. He became Paul Standards’ understudy. Edward would go on to have a successful career as a Designer and Art Director. He partnered with Ed Ronthaler and created Photo-lettering Inc.

Career Highlights

In 1953 he was an associate director of Esquire magazine. In 1962 he would go on to start is own New York design studio. Edward has been very influential in the typography world. He helped establish the international type face association, the first independent licensing company for type designers which aimed to market type design to the industry. This led to a growth in the type industry in the 1960’s. His first ITC Project was Souvenir. Condensed, and many more. Ed continues to create typefaces for ITC, including the recent Edwardian.

Ed created or re-designed many well known logos including Esquire, Mcalls, The New York Times, and The San Diego Tribune, among many others. He is still very active and design, and having been a prolific designer since the 1960’s he has seen the change and growth in the design industry. He has said that “Too many people think that they’ve got a Mac and they can draw a logo or a typeface. You have to learn to draw first. The computer won’t do it for you” (Halperin, 2000)

Edward received the Gold Medal of excellence from the New York Type Directors Club as well as the Frederick W. Goudy award. He currently does lectures around the world and since 1962, has been an instructor at The School of Visual Arts.

Typography

Edward is credited with the creation of over 600 typefaces (Strizver, 2006) He created the typefaces Tiffany, Benguiat, Benguiat Gothic, Korinna, Panache, Modern No. 216, Bookman, Caslon No. 225, Barcelona, and Avante Garde. ITC Souvenir is based on Souvenir by Morris Fuller Fenton which was originally a single weight typeface, Ed added additional weights and italics . It was redrawn by Benguiat in 1967 for the Photo-lettering Corporation. ITC Benguiat is a decorative serif typeface released in 1978 and is based the typefaces of the Art Nouveau period. He continues to work on typefaces for ITC and his more recent font is Edwardian Script.

 scriptpage

References

Strizver, I. (2006). Type rules!: The designer’s guide to professional typography (2nd ed.). Hoboken, N.J.: Wiley.

Font Designer – Edward Benguiat. (n.d.). Retrieved January 24, 2015, from http://www.linotype.com/1515/edwardbenguiat.html

Halperin, E. (2000, January 1). Edward Benguiat. Retrieved January 24, 2015, from http://adcglobal.org/hall-of-fame/edward-benguiat/

ITC Benguiat. (2015, January 1). Retrieved January 24, 2015, from http://en.wikipedia.org/wiki/ITC_Benguiat

Souvenir (typeface). (n.d.). Retrieved January 24, 2015, from http://en.wikipedia.org/wiki/Souvenir_(typeface)

Ed Benguiat. (n.d.). Retrieved January 24, 2015, from http://en.wikipedia.org/wiki/Ed_Benguiat

\

Basic programming vocab for designers

As a designer, its not expected that you have a extensive and complete knowledge of programming but having a fundamental understanding of programming is helpful and even essential for those in web design. Here are some of the concepts that you will find in almost all programming languages.

Variables

Variables are used to store data and set values. Variables typically have an identifying name and value. (such as x = 3) This is similar to the concept of variables in math.

Arrays

Similar in concept to variables, arrays can hold many variables under a single name.

Syntax

The syntax of a programming language is the set of rules that govern the structure. Think of the syntax as the words and grammar of the language itself.

Conditional Statements

Conditional statements (sometimes called conditionals) are used to make decisions based on certain conditions. For example a conditional can allow JavaScript to perform an action if a variable is greater than or equal to “3”.

Loops

Loops repeat a defined set of code over and over. They are usually paired with conditions to ensure they don’t loop forever.

Functions

A function is a block of code that does something. For example, the prompt function displays a dialog box asking for user input.

A great way to learn some of these concepts is through Code Combat, which is controlled through writing simple code.

Visit CODE COMBAT to have fun learning basic code.

Demistifying Javascript

JavaScript is a programming language made for web browsers which was initially made for basic image display, text and data but in the 1990’s Netscape developed it into what you see today. It is a language that allows web developers to make all manner of user friendly web items  possible. It allows for a  dynamic and user friendly experience. It handles complex procedures in the online environment such as making live feeds of sports updates and validating user data.

You may be familiar with HTML and CSS. HTML is a markup language. Unlike a markup language which is excellent at organizing elements, Java Script adds a bit more bang for your buck as it is a programming language which means it has more capabilities then HTML.  JavaScript can not only tell the browser how to arrange the web elements, just like HTLM,  but it can interact with the browser in such a way that it is more like a conversation with the browser, rather then just a set of instructions.

As a programming language, JavaScript is based on logic, algorithms and math. Even though this may seem like it is outside the arena of graphic designers, if you want to get into web design, it is important to understand how to implement programming languages such as JavaScript to create awesome functionality to websites.

JavaScript is converted into machine code and interpreted by the web browser. This was initially a major issue in the 1990’s, as each browser interpreted JavaScript differently and some elements would not work properly from one browser to the next. JavaScript requires a browser to convert the script into something workable.

Hopefully this brief overview was helpful in demystifying JavaScript.