Speckyboy Design Magazine http://speckyboy.com Web Design News, Resources & Inspiration Fri, 22 Aug 2014 21:13:01 +0000 en-US hourly 1 Visionaries That Shaped Modern Graphic Design: John Maedahttp://speckyboy.com/2014/08/22/visionaries-shaped-modern-graphic-design-john-maeda/ http://speckyboy.com/2014/08/22/visionaries-shaped-modern-graphic-design-john-maeda/#comments Fri, 22 Aug 2014 11:48:32 +0000 http://speckyboy.com/?p=50664

Part of my education as a graphic designer was learning about the field’s history. Before, I thought history classes were stuffy and dull. Not this class. I was floored by the bold approaches and radical...


The post Visionaries That Shaped Modern Graphic Design: John Maeda appeared first on Speckyboy Design Magazine.

]]>


Part of my education as a graphic designer was learning about the field’s history. Before, I thought history classes were stuffy and dull. Not this class. I was floored by the bold approaches and radical experiments I saw in this “old” work. I wrote Graphic Icons: Visionaries Who Shaped Modern Graphic Design to highlight the pioneers, like Wim Crouwel, Saul Bass, Cipe Pineles and Milton Glaser. Each one offers lessons for today’s creatives, and provides inspiration for new ways to innovate. As part of our series profiling some of these icons, here is the fifth: John Maeda.

Icons of Graphic Design: John Maeda

John Maeda was a computer science grad student at MIT on his way to becoming a user interface designer. Then he read Thoughts on Design, by Paul Rand — an experience that shifted the course of Maeda’s career.

Time Paint software for Macintosh, 1994
Time Paint software for Macintosh, 1994.

Maeda took a humbling message from Rand’s book: Understanding the computer did not necessarily make one a good designer. Encouraged by his professor Muriel Cooper, Maeda decided to study graphic design in Japan, where he added traditional design skills and concepts to his knowledge of computers.

One of ten poster designs for Japanese type foundry Morisawa, 1996
One of ten poster designs for Japanese type foundry Morisawa, 1996.

Maeda then returned to MIT to teach, and founded the Aesthetics and Computation Group at the Media Lab. It was there that Maeda, who as a child excelled at both math and art (though his father only bragged about the math part), explored the area where design and technology meet. For Maeda, the computer is a tool and a medium. Through the Media Lab, Maeda created digital experiences like The Reactive Square, in which shapes responded to sound, and Time Paint, a time-based program of flying colors. His Design by Numbers project (no longer active), encouraged designers and artists to learn computer programming.

Exhibition poster for Ginza Graphic Gallery 2002
Exhibition poster for Ginza Graphic Gallery, 2002.

In his quest to educate, Maeda writes books, too: The Laws of Simplicity outlines his hopes that technology will simplify, rather than complicate, our lives. From 2008–2013, Maeda was president of Rhode Island School of Design. As an educator, he considers creative thinking equally important as technical capability in developing the leaders of tomorrow. To the emphasis on science, technology, engineering, and math (STEM) throughout the country’s educational system, Maeda proposes adding an A for Art, to create STEAM. His goal? Not to make the world more high-tech, but to make it more humane.

Shiseido poster celebrating 30 years of commercial films, 1995
Shiseido poster celebrating 30 years of commercial films, 1995.

Further Reading:

This article has been excerpted from Graphic Icons: Visionaries Who Shaped Modern Graphic Design by John Clifford. Copyright © 2014. Used with permission of Pearson Education, Inc. and Peachpit Press.


The post Visionaries That Shaped Modern Graphic Design: John Maeda appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/08/22/visionaries-shaped-modern-graphic-design-john-maeda/feed/ 0
Freebie: Colorful Low-Poly Sport Templates (AI & EPS)http://speckyboy.com/2014/08/21/freebie-colorful-low-poly-sport-templates-ai-eps/ http://speckyboy.com/2014/08/21/freebie-colorful-low-poly-sport-templates-ai-eps/#comments Thu, 21 Aug 2014 12:11:34 +0000 http://speckyboy.com/?p=50688

Lately, poly-style artwork seem to be cropping up everywhere. Just a few weeks ago we actually featured a gallery of fantastic low-poly illustrations of The Big Bang Theory cast, and last week we shared Vectors...


The post Freebie: Colorful Low-Poly Sport Templates (AI & EPS) appeared first on Speckyboy Design Magazine.

]]>


Lately, poly-style artwork seem to be cropping up everywhere. Just a few weeks ago we actually featured a gallery of fantastic low-poly illustrations of The Big Bang Theory cast, and last week we shared Vectors Assemble, the Avengers given a poly-style makeover. We really love the trend. Hopefully you do as well.

If you do love the style, then you will love this freebie. Freepik has designed for us a low-poly series of sports templates so that we can freely give them away to you guys. In total there are 17 individual sports templates in the pack and they come in both AI & EPS formats. And as always, you can freely use them in both your commercial and personal projects.

Here are the previews, and scroll down, way down, for the download link.

Poly-Style Colorful Sport Templates

athletics sports polygon style template ai eps freebie

fencing sports low-poly free template ai eps

cycling poly sports freebie template

beach volleyball sports low-poly free template ai eps

karate judo Sport Templates polygon style template ai eps freebie

gymnastics sports low-poly free template ai eps

rugby poly sports freebie template

 basketball sports low-poly free template ai eps

tennis sports polygon style template ai eps freebie

baseball Sport Templates low-poly free template ai eps

golf poly sports freebie template

 sports low-poly free template ai eps

american football sports polygon style template ai eps freebie

football soccer Sport Templates low-poly free template ai eps

ice hockey poly sports freebie template

 sports low-poly free template ai eps

 sports polygon style template ai eps freebie

Download & License

You are free to use these icons in both your personal and commercial projects.

Do you have a freebie thet you would like to share with our readers? If you do, you can get in touch with us here: mail@speckyboy.com.

The post Freebie: Colorful Low-Poly Sport Templates (AI & EPS) appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/08/21/freebie-colorful-low-poly-sport-templates-ai-eps/feed/ 0
How and When to Use Stock Photographyhttp://speckyboy.com/2014/08/20/use-stock-photography/ http://speckyboy.com/2014/08/20/use-stock-photography/#comments Wed, 20 Aug 2014 08:26:21 +0000 http://speckyboy.com/?p=50683

Some see it as a necessary evil, a few view it as an invaluable resources, others call it an annoyance, and still more see it as a slowly dieng trend. Whatever your feelings on stock...


The post How and When to Use Stock Photography appeared first on Speckyboy Design Magazine.

]]>


Some see it as a necessary evil, a few view it as an invaluable resources, others call it an annoyance, and still more see it as a slowly dieng trend. Whatever your feelings on stock photography, you’ve got to understand that you’ll end up using it at some point if you regularly create online content.

If you’re going to use stock photography, it’s important you learn the when and how of proper usage. It’s not always a cut and dry scenario. You’ve got to establish budgets, balance your time, and determine realistic expectations for your content. And even after all that, your course of action may seem a bit blurry.

Hand of person taking photo using point and shoot camera
Hand of person taking photo using point and shoot camera via Shutterstock.

Still there are some universal rules to remember when applying stock images to your content. This no-nonsense, highly usable, and implacable advice is the subject du jour. Strap on your thinking caps and get ready to enter the realm of the hypothetical as we dive into the deep depths of the subject matter, namely: how and when to use stock photography.

Last Resort

First of all you need to establish in your mind the hierarchy of preferences in image buying. Stock imagery should never be your go to resource for unique and high quality imagery to add to your content. In simple language, it’s just not unique. It’s stock. That means there’s a lot of it rolling around out there, so if you’re using it, it makes your site that much less unique, that much more ubiquitous, and it hinders your chances at standing out from the crowd.

The hierarchy is then implemented to help you go from best to worst in terms of getting the ideal imagery for your content. The hierarchy goes like so:

  1. Hire an artist/photographer to produce your images
  2. If you have artistic talent, produce the images yourself
  3. Pay for stock imagery
  4. Download free images

Now depending on your budget, talent, time, and a plethora of other factors, your own personal hierarchy may vary significantly from the one featured above. Yet, if we’re speaking in ideal terms, this is how it should go.

In a perfect world, you or your client (whatever the case may be) would have an unlimited budget to hire professional photographers, fly them to Alaska, and get a unique and beautiful, high resolution, full-screen shot of the Northern Lights to plaster across your site. Unfortunately, on planet earth, this isn’t always the most practical course of action.

Northern lights aurora borealis in the night sky
Northern lights aurora borealis in the night sky via Shutterstock.

More often than not, you’ll be under the gun on time, over the limit with your budget, and under pressure to produce excellent content with high quality imagery to supplement your text. Even if you’re a talented photographer yourself, it’s not always practical to produce your own images. You probably won’t have the time or energy to go and get the best shots for the project at hand.

In such cases, stock imagery can be a life saver. Stock images that will positively augment your content can often be procured cheaply, or even for free online. Even so, you still want to pay for images if budgets allow.

The more you pay, the less you’ll see the image you purchased. Distinctiveness equates to individuality. Being an individual, unique within an industry, in turn translates to having a more valuable service or product. You want your images to be as rare as possible, so that your content appears to be more original and more compelling.

Of course, you have to weigh the money you spend against the potential benefits of that perception. If you’re low on funds, it’s hard to justify putting a sizable amount into purchasing fancy shmancy stock photos when a slightly more ubiquitous offering will still do the trick.

So to sum it up: whenever possible get completely unique imagery. If that’s impossible, do whatever makes the most sense considering your time, energy, and budgetary constraints.

The “how-to” Section

So now that you have a broad idea of the proper time to purchase or download stock images for free, it’s fair to assume you need a refresher course on how they can best be implemented. This can be tricky, because the use of stock imagery is very much dependent upon context. When placing images in context, you’re of course, being subjective. Thus it’s very difficult to make blanket statements about subjective matters.

Still, there are some absolutes one can follow when using stock photography.

Chaos is… uhhh… Bad

Another thing to be mentioned is that random images with no connection to the subject matter, have no place in your content.

A random images with no connection to the subject matter
A random image with no connection to the subject matter.

To reiterate the point, you can’t use stock imagery without purpose. If you just slap a pretty picture that has nothing to do with your content in the middle of the piece, it only serves as a distraction, a mental digression that breaks up user engagement and endangers your fragile grip on their attention spans.

Instead, you need to include stock imagery that illustrates a point that your content is trying to make. Almost like a supporting detail in the body of your paragraph, or an exclamation point at the end of your sentences. Simply put, your imagery should complement your text, rather than steal the stage.

Contextual Augmentation

Since your images should complement your text, that means you need to think about how they will affect the reading of your text from a design standpoint. That means thinking about placement on the page, and trying to help readers understand why the image is there.

Sometimes an idea is perfectly clear in your own mind, but it’s not quite translating to the reader once you’ve written it on the page. The image is there to facilitate, but adding text within an image or even adding a descriptive caption can really tie up the loose ends.

Targeted Imagery

Another helpful tip for effective use of stock imagery is to inform your image choices with your market research. By that I mean you should know your target audience, and pick imagery that’s likely to appeal to them specifically. For example, let’s say you have an ecommerce store offering a clothing line aimed at young adults. You would be ill advised to use stock imagery of people in their forties in your blog posts.

Target Audience
Target Audience. Sorry, I just love stock images!

These are simple tips, but you’d be surprised how often people get the common sense stuff wrong.

Mix It Up

There’s no reason you have to exclusively use stock photos. Variety is the spice of life, and youre content is no exception. Don’t be satisfied with your favorite stock site, and be done with it. Take a few photos of your own, commission a graphic artist to make an image for you once in a while, and play with all your hipster filters on Instagram.

I Fought the Law and the Law Won

The biggest pitfall people fall into using stock imagery is copyright infringement. You can’t just search Google images and pop whatever the first result is onto your web page. It’s dangerously irresponsible to do so. You open yourself or your client up to serious litigation. Your site could get shut down. You can even get sued for all you’ve got, and some you don’t.

Target Audience
Copyright via Shutterstock.

The real problem here is that copyright laws are really malleable in many cases. Some judges might find you guilty whereas others would dismiss the case. So you really have to be careful to cover all your bases.

In general, purchasing from a stock imagery site protects you from any such concerns, because you’re purchasing the license to redistribute and alter the image. Just be sure to include an attribution, which will usually be available on the page where you download the image.

If you’re downloading something for free though, you have to be extra careful. Research an image’s point of origin before you download. In some cases, you’ll have to contact the photographer and ask for permission, which defeats the primary benefit of stock imagery: convenient buying.

So how to cover your bases? Google has a handy search filter that allows you to search only for images labeled for reuse:

Yikes, that first one looks kinda vicious
Yikes, that first one looks kinda vicious.

Yikes, that first one looks kinda vicious.

These free images are generally good to go, but you still need to do your homework on where they came from, and if you need a license to reuse them. Be on the lookout for the type of license an image has:

  1. Royalty Free
  2. Rights Managed
  3. Extended or Enhanced

Royalty free photos are free to reuse and alter at will, while rights managed are for a particular purpose for a limited amount of time. Extended or
enhanced
image licenses are ones that have been altered from an original purchase. So be mindful of which type is which, and familiarize yourself with the legalese that accompanies each variety.

Where to Look?

The final piece of the puzzle is finding stock images worth purchasing. I’m partial to 123rf.com for paid images, and Freeimages.com (formerly SXC.hu) for images that don’t require a donation. There are, however, a multitude of sites looking to trade dollars for imagery.

Try these out and see which you like best:

And there are many more, but those are a few of the heavy hitters.

What do you think of stock imagery? Should it stay or should it go? Let’s hear your thoughts in the comment section.


The post How and When to Use Stock Photography appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/08/20/use-stock-photography/feed/ 0
Weekly News for Designers (N.248)http://speckyboy.com/2014/08/19/weekly-news-designers-n-248/ http://speckyboy.com/2014/08/19/weekly-news-designers-n-248/#comments Tue, 19 Aug 2014 11:58:53 +0000 http://speckyboy.com/?p=50652

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week. You can sign-up to our awesome weekly newsletter for some more amazing...


The post Weekly News for Designers (N.248) appeared first on Speckyboy Design Magazine.

]]>


This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

New Resources & Tools

Tumblr-Style Loading Cogs animated with CSS and SVG icons.
Tumblr-Style Loading Cogs animated with CSS and SVG icons

Responsive Transactional HTML Email Templates from MailGun.
Responsive Transactional HTML Email Templates from MailGun

PowerToCSS is a versatile and lightweight CSS Framework.
PowerToCSS is a versatile and lightweight CSS Framework

jquery.matchHeight is a more robust equal heights plugin.
jquery.matchHeight is a more robust equal heights plugin

Shrthnd is a handy tool that converts CSS properties into shorthand.
Shrthnd is a handy tool that converts CSS properties into shorthand

Learning Resources & Tutorials

The WordPress Database Demystified by Shaumik Daityari.
The WordPress Database Demystified by Shaumik Daityari

A Complete Guide to Grid by Chris Coyier.
A Complete Guide to Grid

10 Xcode Plugins for iOS Development by Bart Jacobs.
10 Xcode Plugins for iOS Development

Making a Case for Animations and Interactivity by Sara Sundqvist.
Making a Case for Animations and Interactivity

Secrets of the Browser Developer Tools by Andi Smith.
Secrets of the Browser Developer Tools

HTML5 Prefetch by Luis Vieira.
HTML5 Prefetch

Designer's Guide to DPI by Sebastien Gabriel.
Designer's Guide to DPI

9 Nightmare Clients and How You Can Avoid Them by Martin Gittins.
9 Nightmare Clients and How You Can Avoid Them

CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS by Harry Roberts.
CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS

Free UI Resources

Freebie: iOS 7 Illustrator Vector UI Kit (AI).

Freebie: Eye Candy UI Kit XL (PSD).
Freebie: iOS 7 Illustrator Vector UI Kit ai

Freebie: Mobile UI Blueprint (PSD).
Freebie: Mobile UI Blueprint

Freebie: 8 Photorealistic Stationery Mockups (PSD).
Freebie: 8 Photorealistic Stationery Mockups

Some Inspiration

20 Examples of Fullscreen Responsive Menus.
20 Examples of Fullscreen Responsive Menus

…and finally…

Microsoft has Relaunched Its Original 1994 Site On The Web.
Microsoft Relaunches Its Original 1994 Site On The Web

You may also like to browse the Weekly News Archives.

The post Weekly News for Designers (N.248) appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/08/19/weekly-news-designers-n-248/feed/ 0
Free Ebook: Web UI Design Patterns 2014http://speckyboy.com/2014/08/18/free-ebook-web-ui-design-patterns-2014/ http://speckyboy.com/2014/08/18/free-ebook-web-ui-design-patterns-2014/#comments Mon, 18 Aug 2014 11:20:41 +0000 http://speckyboy.com/?p=50677

In web UI design, there now exist many new approaches to transition cleanly between devices while preserving the user experience. And in this free eBook – Web UI Design Patterns 2014: A Deeper Look at...


The post Free Ebook: Web UI Design Patterns 2014 appeared first on Speckyboy Design Magazine.

]]>


In web UI design, there now exist many new approaches to transition cleanly between devices while preserving the user experience. And in this free eBook – Web UI Design Patterns 2014: A Deeper Look at the Hottest Websites and Web Apps Today – UXPin analyzes a selection of 63 UI design patterns through the lens of today’s top companies, including Pinterest, LinkedIn, OKCupid, Spotify, Amazon, Kickstarter, and AirBnB.

Free Ebook: Web UI Design Patterns 2014

Within the 200 pages, you will find:

  • A problem & solution discussion for each web UI design pattern.
  • Carefully selected visuals to show different implementations of patterns to solve different problems.
  • Answers to common UI problems, including:
  • How do you make your web user experience as easy as possible for your user without sacrificing functionality?
  • How can you adapt your web UI to touch screens and responsive design?
  • What are the key differences between large and small touchscreen devices that have driven new UI conventions, and what design patterns can you use to best address these new practices?
  • What specific UI patterns make for the simplest yet most intuitive web UI?

So take a look, and feel free to share if you find it helpful! You can download the ebook here: Download Free Web UI Trends 2014 eBook.


The post Free Ebook: Web UI Design Patterns 2014 appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/08/18/free-ebook-web-ui-design-patterns-2014/feed/ 0