#hack design

So I'm a bit late with this version of "Jessica learns along with Hack Design". In my defense, the assignments were a bit lengthy. And I'm lazy.

Episode 2!

1. Helvetica - A Documentary About The Most Ubiquitous Typeface In The World

Documentary

Task: Try to learn why this iconic typeface is so prevalent in our world, and how it grew to ubiquity. What does it represent, and why do designers love (or hate) to use it?

So, the first time I watched Helvetica was my freshman year of college. I watch it pretty frequently, actually, and every time I watch it I've gone a bit further as a designer and I have a little bit of a different answer to this question.

I'm not a big fan of Helvetica. I think designers love and hate it because it's so simple that it's a challenge to make interesting, but at the same time everyone uses it so much in the years since the movie was made that it's becoming bland. It's practically a cliche. It's not the new comic sans (it's tasteful and well made, for one) but it's the comic sans of design, because everyone uses it and nobody thinks about how to use it well. 

To quote my studiomate: "Eeew, Helvetica. I've always hated the closeness of the e's terminal to the crossbar, and I've always been afraid to mention it because everyone likes Helvetica."

With that being said, it's easy to read, and it's a good sturdy sans serif. 

2. KernType: The Kerning Game

Game

Task: Seeing type as a designer is all about observation. Play the Kerning Game and score at least 70/100.

Here's another one I'm pretty familiar with. 

Not the greatest ever, but good enough.

3. Better Web Typography In a Few Simple Steps

Article

Task: Line breaks, correct quotes, dashes, and HTML entities. This is a great article to learn how to make web typography better in a few simple steps. Author Yves Peters points out very simple tips to make web typography more beautiful.

Massively useful list article about web type. As someone without a formal design education, I didn't know several of these -- and I'm betting a lot of students and recent grads won't know them either. Read it. And bookmark it for later.

4. Bonus Material: "Thinking With Type"

Book

Task: I wish they made us read this book when I was in school. This lovely short book by Ellen Lupton is such an insightful resource that talks about typography on print, and on screen. It's not a new book, but it's still one of my favorites.

Another resource I've had for awhile. I can't speak for the book at all; I don't own it. But this site was something I found in 2013 when I was teaching myself about typography and design, and it's one of the best resources on the internet for that. I agree that I really wish that I'd had this in school. Enjoyed re-reading many of the small articles while doing this week's design exercise, and I might spend some time reading the entirety to brush up on my knowledge a bit.

I do have to say that it's a bit of a pet peeve of mine that it's hard to read on mobile but whatever - it's an older site, and doesn't look to be updated often.

5. Typography Essentials – A Getting Started Guide

Guide

Task: Typography is all about observing the details of type. Next time you step outside, observe traffic signs, public transit signs, banners, logos, etc. and remember – each and every single one of them was designed by someone.

Real confessions time: this task made me laugh, because my main grant-funded project right now is cataloguing signage, lettering, and type around the city. It's safe to say I do this one daily.

So instead, I focused on remembering that each one had a lot of physical work that went into it. It was a nice reminder about the process of making things, and being a maker in general, and made me think of when I first started Gratiot and Riopelle/ glyphcitydetroit. I was on my way to work and stopped to photograph a beauty parlor sign, and saw a guy in his 70s walking down the road on his way to work, carrying an ancient paint-covered wooden carryall full of brushes, and two gallon cans of oneshot paint. I hadn't really thought about how many of the signs I was documenting were recently made.

I've been kicking around the idea of interviewing shop owners and signpainters for the documentation portion of my project, and really would like to find that guy, whoever he was. 

On another note, if you're new to typography...take some of the advice in this one with a grain of salt. It has a few errors and quite a few things are questionable advice ("use a favorite movie font for a child's birthday"). Ellen Lupton's is better. Her course on Skillshare is good, too.

6. Shape Type: Letter Shaping Game

Game

Task: This game is not as easy as the first one, so try to have fun and relax. If you score more than 60/100, high five!

Plot twist: this game isn't actually that hard, especially if you have a working knowledge of Adobe Illustrator. I could see how maybe it'd be hard for someone who doesn't regularly work in it, but I'm not exactly the most precise person ever and I still scored pretty well. 

Boo-yah. 

Some time ago, I signed up to receive the Hack Design emails. If you're not familiar with those, they're a weekly digest/course to help development-oriented people learn to design.

However, I haven't done anything with them so far. Starting post-Christmas, and for most of 2015, I'm going to be blogging my reactions & results of the activities recommended every week. It's like Julie and Julia for design!*

*I have never seen this movie or read the book. I'm assuming this is what it's like.

Without further ado, here is Week One.

Startups, This is How Design Works

Article

Task: Look for some resources that you can bookmark and reference later on your own. This article is filled with helpful sites, meetups, and design-focused organizations around the world. The first step to design literacy is to immerse yourself.

Done. I already have plenty bookmarked, so I added a few more from the site to my Pocket account, as I'm always running out of good reading material.

As a side note, I love Dieter Rams, and keeping his key principles in mind is a good way to try and create a useful, timeless output - but holy jesus, this site is basically teaching potential designers that he is the ultimate aesthetic & approach to aspire to at all times, for the rest of every project you do. 

I'd argue that this is less than practical, and could also lead to some awkward client interactions if taken too literally -- imagine if your client's vision involved excessive amounts of art nouveau swirls, hand-drawn type, and metallic gold. I doubt they'd take it well if you replied with "but according to the principles of design outlined by Dieter Rams this would be dated and overdone! Try this minimal, ultra-sterile white canvas instead."

    2. Making the Transition from Development to Design

        Task: As you read through the tips, notice that they're not necessarily only about design – they're about making great products in general.

Bookmarked. I like the bit about designing everything in your life -- I'm pretty disorganized. I could stand to apply a bit of this philosophy.

3. Complete Beginner’s Guide to Interaction Design

Article Task: I suggest bookmarking this for later. There's a lot of helpful content and definitions, and you'll probably want to come back and reference this later on.

Oh, this is *long*. I took their suggestion of bookmarking it for later, and I'll be reading it tomorrow evening when I'm back home from the holiday break. 

We're Not Unhappy, We're Designers

Editorial

Task: Why did Morgan write this? What issue is he addressing?

  So far as I can gather, this was written because many people say that designers are negative - when really, according to Morgan, we’re just upset that something hasn’t been done to our personal standards. I feel like this isn’t a valuable way to look at the world once you have matured as both a designer and a person who wants to improve the community around you. Instead of being unhappy and frustrated with what you are seeing or using, and complaining about it, you should find ways it could be improved upon, and ask yourself why the person made these choices.

  For example, take all of the redesigns of Facebook, 8tracks, soundcloud, et al done by designers as “case studies”. These aren’t real case studies at all, imo -- they don’t take the real decisions made by the designers into account. They say “this is something I hate, so I have improved it in a way I find personally and aesthetically pleasing.” However, when you’re designing for a client or for your company, having to take frontend & backend developers’ needs, user feedback, ROI, and conversion rates into account, it isn’t half as easy to do something “just because it looks nice”. It might look slightly less attractive, but it might function fantastically for the users -- so then it is well designed.

  I felt that this article, and several others in Lesson 1, including the Dieter Rams idolation-fest (Design for Startups), fail to take real people and real challenges into account and cater to “high design” over “low design”.

  Beautiful Web Type – A showcase of the best typefaces from the Google web fonts directory

A tenant of my dad's recently emailed me asking for advice on moving from print design to web. I tried to come up with a good list of resources for her and realized this might be useful for others too. 

Here goes! 

UX apprentice

Some of the guys in my office recommend http://uxapprentice.com/

It's made by the folks at Balsamiq who are really well respected and do a lot of great design stuff. 

Skillshare

http://www.skillshare.com/ is paid but it's pretty cheap and they have a lot of great content. 

Hack Design

One thing that I've been enjoying (although admittedly have not been doing all the lessons for) is Hack Design: http://hackdesign.org/

It's more geared towards a programmer audience but it's also just good intro for what to look for in web design. 

One Page Love

Another useful thing might be to just get started with some inspiration sites to get an idea of the current trends in web design. I'm into http://onepagelove.com/ but I'd recommend just googling around for web/app design trends and inspiration. 

Wordpress

A good place to get started building your first site http://wordpress.com/ I hear there's profit to be made just designing wordpress themes. 

Treehouse

Paid video lessons on all sorts of useful topics.

http://teamtreehouse.com/ 

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Skillcrush

It's always useful to know some HTML and CSS. Some friends of mine run  http://skillcrush.com/ which is aimed at teaching web development basics to women. 

Creative Market/Colour Lovers

I love these two sites (both from the same company). More like resources than tutorials but they're super useful. 

https://creativemarket.com/

http://www.colourlovers.com/

Code.org

Good list of resources to learn basic coding http://www.code.org/ 

Codecademy/Khan Academy

High quality interactive coding tutorials. Great for learning the basics of front end development.

http://www.codecademy.com