Back to The Future (In a Good Way)

I have recently noticed a huge trend in retro design (okay maybe not THAT recently) and may I say that I am super excited about it. I love retro designs. I like the mixing of type, the color palettes, the ribbons and brackets. Usually my personal design aesthetic is pretty simple but I love to throw some retro design elements in now and again.

Is retro here to stay? Hard to tell since digital design trends shift so rapidly but I do now that right now, retro is taking over design in a big way. As great as the Retro fad is, however, there is a way for it to go horribly wrong. When do you stop throwing ribbons at a site? (Probably  right before the point you start throwing them instead of placing them with design purpose) When do you know when you’ve gone too far with typefaces? (Probably when you’ve reach 10 different fonts on a single page and it’s beginning to resemble a crazy sweater) Is there a difference between Retro and Vintage? (Yes! Well…a little. Maybe. I don’t know. We’ll find out?)

Never fear my readers! We will navigate the wild world of Retro together in this blog post and come out the other side more educated designers (Maybe).

Let’s begin with definitions:

retro, adj. : relating to, reviving, or being the styles and especially the fashions of the past : fashionably nostalgic or old-fashioned

vintage, adj.
1 c : of old, recognized, and enduring interest, importance, or quality : CLASSIC, VENERABLE
2 a : marked by an advanced age : dating from the past

Putting that into plain english, Retro refers to a design aestheic which is imitating a past style. Vintage refers to something that is actually from that past time period. Bought some awesome chairs influenced by the the charming Mom ‘n Pop diners of the past but was mass produced in China? Retro. Acquired a chair that actually was FROM the Mom ‘n Pop diner? Vintage.

Clear on that? Alright, moving on.

Now obviously the internet wasn’t around back in the day of the Grease soundtrack and poodle skirts so how can Vintage websites exist? Now, I’m throwing my personal opinion into this a little but I think the style difference has a lot to do with the typefaces. Design elements such as the floral edges and borders and fancy ribbons tend to show up in both design styles (if we can even separate the two).

Mm, quite.

Usually though, I think the design style encompassing both Retro and Vintage is referred to as Retro since you’re still imitating a style either way. Searching for “Vintage Website Design” doesn’t bring up NEARLY as many search results as “Retro Website Design”. This blog post gives a list of sites using “Vintage” typography however I feel that overall the design of the sites are much more Retro.

Now that we’re past the mumbo jumbo and technical terms, let’s dive into some tasty design.

1. Form Follows Function
The golden rule of design. Just because you can design something as Retro doesn’t mean you should. First and foremost, you should be giving the client what they want. This is probably the most important lesson I’ve learnt over the past couple of months. You’re not designing for yourself. You’re designing for a client and an audience. They have the money, they get what they want. It doesn’t matter if you feel like it isn’t your strongest work. If you’re pleasing the client and fulfilling the design brief, the rest will follow.

http://www.stallanddean.com/

Ahhhh, I really like this design. It uses the Retro design aesthetic very well and the design overall is very balanced. I’ve noticed that it’s very easy to go overboard on Retro design “bits” but this website does a great job. I also think this website follows the rule “FFF”. Overall, the website gives the feel of the vintage clothing advertisements from back in the day with the classic type and grainy textures.

http://www.theworldwelivein.co.uk/

I’m a sucker for white space and simplicity and this site is no exception. Usually I’m nervous about using giant introductory paragraphs in portfolios but this one actually works really well. The sentence is short, sweet and explains what the site is. Upon scrolling down you can see some samples of the designers work. Everything is easy to navigate and find. The designer did a really great job of bringing in some small retro design elements like the texture in the background and the custom logo badge. So simple, so functional.

http://www.threepennyeditor.com/

I HAD to include this website. The concept is so simple but the overall effect is quite lovely. The website works for the company. I understand what they do and important information is given to me right away. The navigation is easy to get to, it’s not cluttered. Everything is laid out neatly and I can’t stop scrolling up and down the page (so clever). I love when a website comes together like this so effectively. The design flows together seamlessly and the resulting design is effortless. I’m not totally sold on the side scrolling animation under the tagline, but I can live with it because of how good the rest of the site is.

2. Form…Doesn’t Follow Function?

You know I have to include some not so good ones in here. The sites that I have listed aren’t TERRIBLE but I feel that they could have been improved in some ways.

http://www.targetscope.com/

First of all, automatic audio. That’s a huge no-no. Many viewers are already listening to their own tunes when browsing, therefore they don’t need your unnecessary music assaulting their ears. It’s annoying and it slows down load speeds of the web page. I also have a huge gripe with flash websites. I feel that it’s very difficult to make a good flash website and even if the design is great, flash is something that’s disappearing fast. In this site specifically, if you hover near the navigation, a scope or magnifying glass of some sort drops down. I don’t know what this is for. What purpose does it serve? It drops down over the links on the navigation but for no reason. If you think people need help reading the page titles then maybe you should, you know, make them legible.

My biggest problem with this website is that I don’t understand what it’s about. I see the descriptive words on the right side of the page but I actually have to go read a few pages to understand what exactly this company offers me.

http://singularityconcepts.com/

I don’t hate this site as much as the previous one but I do find it a bit overwhelming. It’s not bad, but there are so many things happening that I’m not sure what I should be looking at. The navigation is especially distracting, the different colors and different styles (why does one button completely change?) is way too confusing for the average viewer. Then two of the headings say the same thing (with one being cut off) even though the sections are about different topics. Like I said, it’s not a bad design but I think some things could have been dialed back and some things could have been cleaned up a little.

All in all, I love the retro design boom. When used correctly, retro design can be a very effective way to grab your target audience’s attention. Don’t get carried away by the ribbons and birds, always keep the audience in mind and aim to design something that’s pleasing to the eye rather than overwhelming.

Questions? Comments? Something to add about the retro fad? Let me know.

 

Graphic Design Resumes & Portfolios (Part 2)

Here is the long awaited Part 2 of my discussion about Graphic Design portfolio and resumes. I know you’re excited, please maintain your composure.

In my last blog post I discussed some differences between what makes a good resume and a bad resume. This time around, I will be talking about portfolios and what makes an effective portfolio. There are three important things to keep in mind when creating your portfolio site.

1. Navigation – Can the viewer navigate your site easily? Can they find what they’re looking for? Keep your navigation clean and simple so that visitors to your site do not have to search for it. Also, if you want to have a splash page when someone first views your site, make sure its easy to navigate. There is nothing worse than being greeted by a splash page and then being stuck there with no hope for escape. Simple is best!

2. Work – Obviously you will need a page to display your work. You want to keep the gallery portion of your project page very clean and simple too. If you want to separate your pieces such as print and web, certainly do so but don’t get confusing with it. You want clear titles so that the viewer knows what they are looking at. Make sure your thumbnails are large enough and contain enough detail about the projects to peak the viewers interest. Tiny images are not going to look attractive on the page and neither is a thumbnail of the corner detail of the serif of a letter form. Ain’t nobody got time for that.

3. About You – This is your portfolio, include some information about yourself. You can also include your resume on the site so that potential employers who find your site have easy access to it. Keep the about you section short and concise. There is no need to ramble on about your childhood, simply talk about how you got to where you are today, what inspires you, and where you hope to go.

Now for the examples of portfolio sites!

Foundry Collective

I think this site is a really great example of a portfolio site. Now, this isn’t a personal website but still take note! The navigation is really easy to see and easy to understand. There is a fantastic use of a grid which makes the web page look very organized and clean. The page is not too simple that the viewer would become bored but rather entices the eye with large, interesting images. Also, I am really loving the text. It’s a good balance between the clean, modern white space and the serif typeface.

Buffalo

Also not a personal site but another great example of using the grid system (in a new and interesting way). The site uses a great sense of symmetry to create a clean space. The color scheme really pops against the light background and the design uses the black logo and type to create hierarchy (I’m really digging the logo). The navigation is also easy to see and neatly organized. Clicking on an image takes the viewer to a page where they can learn more about the project. Remember, when creating a website, you want to emphasize your work above all.

Made Like Me

And here we have a personal portfolio site! Now this one is a little different than traditional sites simply because the home page is the portfolio page. This designer opts to showcase his work first and foremost without messing around with silly things like home pages or splash pages (who even needs those?). He is very clear about what he wants the viewer to see. Look at his work. Look at it! The thumbnails are a great size and show just enough detail of the projects. The only critique I would have for this is that there is no description for the projects. I have absolutely no idea what these are for. Does he do them in his spare time? Are these illustrations commissioned? Any information would be fantastic.

I’ve been giving a lot of love to grid based designs (I can’t help it, they’re too sexy) so I’m going to shift my focus to something a little different…

Jesse Willmon’s 2013 DESIGN-TACULAR

“What is this monstrosity?!” you may be screaming at this exact moment, but lets take some time to examine this website. This is actually a splash page and any picture you click will take you to the actual website and the page of the project. Yes, it took me a second to figure it out, but those doodles were too fun to pass up. Another important aspect when making a portfolio website, inject your personality into it! Add some color, add some spice. When looking at this portfolio, I get this person’s aesthetic and personality right away (Whovian? Right on man.)

The navigation is clear, and you can see that this guy has done some really awesome projects. I may or may not be a little jealous. There could be more white space around the site and each project title but at this point I’m just nitpicking.

As you can see from the above examples, they kept their portfolio pieces the main priority. Remember to keep plenty of white space around your images and text and use big thumbnails. Add a little of your personality into your portfolio and show employers how great you’ll be to work with. After all, employers are looking for exciting talent and personality, not robots (yet).