At Mtn. Dog Media we put an enormous amount of emphasis on our individual learning goals. We believe that in order to best serve our clients we need to continuously push ourselves to increase our knowledge and skills. For a month, I focused exclusively on increasing my capabilities as a graphic designer. I spent five intimate hours with Justin Seeley studying Illustrator for Web Design on Lynda.com. In my evenings I hunkered down with Graphic Design The New Basics and several months worth of HOW, Juxtapose, and Entrepreneur Magazines for that extra sprinkle of creative inspiration and know how.
The result? Over the last 30 days I've seen my skills as a graphic designer leap from average to creative professional. I'm moving more swiftly within Adobe Illustrator, creating more elaborate and sophisticated designs, while challenging myself to obey (and selectively defy) the fundamental principals of graphic design. I've gathered inspiration from the furtherest reaches of Pinterest and challenged my abilities to mimic current design trends, and filled the pages of my sketchbook with ideas for the future. Here are a smattering of the graphic design skills and principals obtained from the sources described above that have helped me solidify my status as a professional graphic designer.
Remembering the Essential Principals of Design
Before embarking to master the technicalities of creating advanced vector based graphics, it's important to establish an understanding of the fundamental principals of design. Become familiar with the concepts of designing on a grid system, establishing rhythm and balance in your layouts, and using scale and color to define user experience. Browsing editorial layouts on Pinterest is one of my favorite methods for examining how other graphic designer are utilizing these techniques. For example, in this Corporate Branding Pinterest Board you can see how I've chosen to study layouts that use color, texture, rhythm, and balance in various ways to create a crisp, modern aesthetic.
1. Design as a Universal Language
The Luton and Phillips book reminded me that, "Bauhaus in Germany explored design as a universal, perceptually based 'language of vision.'"(i) A quote definitely worth scrawling on your whiteboard for a few days. I contemplated the concept of a universal language of vision while reviewing the 2014 HOW International Design Awards. These exquisite design submissions arrive from all around the globe, but language creates no barrier in enjoying their composition, colors, balance, and creativity. We graphic designers need to remind ourselves that it's not just about what our work says, but how it says it. Would your designs stimulate someone that couldn't read your language?
2. The Gestalt Principal: Look Past the Positive
My favorite principal of design is most definitely the Gestalt Principal, "The form of an object is not more important than the form of the space surrounding it." (ii) Understanding the Gestalt Principal will allow you to create designs that utilize negative space to help deliver your editorial message. For web designers, this means creating designs with deliberate awareness of the space surrounding our copy, images, and elements of functionality. Heck, understanding the Gestalt Principal means that you will choose the space between your letters with deliberate awareness. How do you develop an understanding of the Gestalt Principal? When looking at designs, squint and blur your eyes, and try imagining the inverse of the design you're seeing. How does the positive space balance the negative space? Is there a LOT of positive space, but minimal negative space? Try establishing a more harmonious balance.
Selecting and Using Colors as a Graphic Designer
Colors are the spice of life! Colors convey emotion; enabling graphic designers to create icons and images that appeal directly to an individual's inner nature. They create distinction; allowing us to use colors to create content hierarchy and a navigable user experience. I have always enjoyed the task of choosing color pallets for branding and design projects, but here are some tips and tricks that will help you choose more professional and unique color palates, and easily manage and use digital color swatches.
3. Choosing Unique Color Palates
I picked up the Color Inspirations book compiled by the fabulous folks at Colourlovers.com. This spiral bound wonder displays more than 3,000 interesting color palates in color spectrum order. Infinitely cheaper than a book of Pantone color swatches, this little gem provides RBG, CMYK, and Hex codes for all of the color swatches therein as well as a CD containing .ASE files to directly add color swatches to Adobe. In the less than 2 weeks since I acquired the Color Inspirations book it hasn't made it more than a few inches away from my computer! I'm referencing this book to find new color palates, identify new hues and shades to compliment existing palates, and more.
4. Efficiently Utilize and Manage Brand Specific Color Swatches
Using .ase files to share color palates between programs is an extremely efficient way to keep branded materials consistent across your programs and projects. For example, I can save a Mtn. Dog Media color swatches files that can then be opened in Illustrator (to quickly create a featured image for a blog) and then quickly opened in Photoshop (to apply a color-specific gradient or photo effect).
5. Setting Your Adobe Workspace Color Management Settings
This was a real game changer for me. In Justin Seeley's instructional video I learned that sRGB is the most widely used color profile across all devices. Different color profiles display different amounts of the color spectrum, ultimately effecting how a color will look to the human eye. Unfortunately variations in color management settings from screen to screen mean that we can never accurately predict exactly how our colors will display. When I learned that sRGB is the most widely used color profile, I updated all of my Adobe Workingspaces to match. Even though this means a reduced color spectrum, it means increased reliability predicting what my colors will look like on other people's screens.
Using Illustrator to Create Website Mockups
At Mtn. Dog Media each of our client's receives a static website mockup created in Adobe Illustrator during the design collaboration process. These mockups allow clients to obtain an understanding of my aesthetic vision for the project and also convey my needs to my developer. Justin Seeley's video taught me some great tricks for making these mockups more efficient and developer friendly.
6. Saving Layers to Distinguish Key Elements of Design
Before I learned this organizational system the layers panel in Adobe Illustrator has always seemed useless to me, but I had never considered the potential value for a developer looking to understand a complicated mockup. I learned to organize my elements in easy to read layers, this way, if a developer is using my mockup to create an element for a website she can reference colors codes, font sizes, and shapes quickly within my design. Look at my example to the right for an idea of how I've broken down this mockup for my developer.
7. Export Mockups as Layered Photoshop Documents for Developers
Once we have made all of these beautifully organized layers for our web design mockup we can actually export our Illustrator document as a layered .psd file and preserve a large amount of editing functionality. (Note, your graphics will no longer be vector based when rendered in Photoshop, so you will loose scalability.) This would be particularly helpful if you're working with a developer that is more comfortable taking apart a layered mockup in Photoshop than Illustrator.
8. Designing for Screen Size and Saving Templates
Using Illustrator to create mockups for web design projects is excellent for creating a static preview, but doesn't do much for us in the way of previewing how the site will display on multiple screen sizes. I created a list of the screen sizes that I feel to be the most relevant for a 2015 graphic designer, then I created templates for each of these screen sizes within Illustrator for quick accessibility. Did you know the most common screen size in 2015 is currently 1024 x 768 pixels? Now when I create a website mockup a render my design in three formats; Large Desktop 1920 x 1080, Average Horizontal 1024 x 768, iPhone 6 Vertical 1080 x 1920.
Adobe Illustrator Shortcuts for Streamlining Workflow
I have been working with the Adobe Creative Suite for just over a decade. For many years InDesign reigned as my favorite program, but recently Illustrator is starting to take the cake. The more I learn about it's robust capabilities (and the further I move from strictly print design) the more I find myself loving Illustrator. Well, I learned to love Illustrator a little bit more when Justin Seeley taught me some amazing tricks for streamlining my workflow.
9. Creating Symbol Libraries for Buttons and Icons
Particularly for web designers, there's an enormous gamut of buttons and icons that you will need to reuse throughout your various designs. Social media icons, call-to-action buttons, service buttons and badges, etc. Just like with our brand specific color swatches, we can save these buttons and icons to our Symbol Library to open and use on any project. I immediately compiled a collection of all of my stand social media buttons, which is now a click away whenever I start a new mockup! Similarly, you can utilize Graphic Styles for repeating styles across similar objects.
10. Embrace the Keyboard Shortcut
Who knows how many minutes of my life have been saved since I started to embrace Illustrators copious keyboard shortcuts! It doesn't take long working within Illustrator to learn what your most used tools are going to be. For me, it's the direct selection tool, eye dropper, and shape builder that I use the most. And for copying and alignment I love to use the Shift and Option keys. I highly recommend learning the keyboard shortcuts that seem the most applicable to your workflow. Start saving those seconds!
The above is just a smattering of the information I picked up while working to improve my graphic design skills. Want to improve your graphic design capabilities? Anything is possible with a little bit of self motivation. Find the tutorials, books, and resources that inspire you to push your portfolio to the next level. At Mtn. Dog Media we believe strongly in the power of the self taught. What are you motivated to learn?