Archive for the ‘Design & Development’ Category

by Joshua Mauldin

Design Books for Beginners

Why I picked these books

Overall, the web is mostly typography. I believe designers will want to focus on understanding the basics of how fonts work, and establishing a good visual rhythm with it.

You’ll also want to focus on grids. They’ll be keeping everything in alignment and help it adapt to various screens (aka responsive design). I wrote a little love note to grids in a Smashing Magazine article. It talks about a neat design program called Fireworks, too.

The third thing is usability. If you’re designing anything that a user would interact with (hint: you will), living and understanding usability is is critical. Usability, at its core, is caring about people. All the pretty pixels and amazing, sweet fonts with cool gradients in the world can’t save an unusable product. You could design the most elaborate castle in the world, but if users can’t find their way in and out, it’s not going to be good for business—same with websites and apps. I said living because you can’t just read a book and have done with it. It’s an evolving process that changes with technology. As technology gets better, usability standards change.

Good books for beginners in design

The Non-Designers Design Book

I worked at a startup and helped mentor some new designers. They didn’t go to school for design, so we had to help them build a foundation quickly. Using this book gave us some great results. Folks in design school will likely cover these topics more in-depth, but browsing through this could give students a head start.

The Fundamentals of Creative Design

This was one of the first books I had when I started designing, and it has solid sections on grid, color and typography. It’s full of beautiful examples, too (I confess I bought it in part because it had one of my favorite designers in there). I bought the first edition, and I’m not sure how much it’s changed with the second.

Don’t Make Me Think

There’s a 3rd edition that’ll be published on Dec 20, 2013, and I’ll be getting it. This version is my bible for so much about usability. If you’re going to be designing things for screens, I easily call this book required reading—I even buy this and send copies to my clients. It’s not a tome, and you could get through it in an afternoon if you wanted. It helps you understand the value of testing your design, and using data to avoid what we call religious debates with your team (or client). What’s a religious debate? “We should make this blue, because the CEO likes it!” “Nah, red is amazing, and all the ladies will like it.” You could argue like that forever, because you’re just talking about what are essentially subjective feelings and assumptions. The only way to really know is to let data decide.

Design Is a Job

Written by a smart(y pants) designer, this book helps you keep (or develop) your backbone while designing for clients. It has applications for designers who work on in-house teams, but this was one where I found myself highlighting something frequently and wishing I had known that before I took on a certain job.

A Book Apart

Depending on your area in design, you’ll find something good here. These are all written by Super Smart People™ and I’ve read a good amount of them.

by Joshua Mauldin

Your brand and iOS 7

There’s no question that iOS 7 changes almost everything on your device. The refined interface, complete with new toys, etc.

Other questions that come to mind are around how a brand can keep its identity and still fit this platform. With previous version of iOS, it was easy (and encouraged) to design the menu bar and put textures, etc. until our little designer hearts were content. That isn’t really the case anymore, since it’s much harder to keep those design elements and take advantage of things like translucency.

Part of these questions come from Apple’s new design philosophy for iOS 7. That philosophy includes 3 principles: deference, clarity and depth. A little about them before we continue.

Design Principles in iOS 7

Deference

Deference ensures we put content first, not design. So on one hand, designing in the menu bar seems like it’s out of the question if you want to adhere to those principles. Apple wants you to use the entire screen for content, and in doing so wants you to remove the design surrounding your content.

Apple also combined the menu bar (where you navigate within your app) with the status bar (where you see the time, WiFi signal, battery, etc.), which makes any design in that area much more obvious. It makes it more difficult to design up there.

Clarity

Clarity is to ensure legible text, precise icons, subtle ornamentation and a focus on functionality. We see other things like using a key color for icons and fonts, eliminating borders on buttons and more white space.

Depth

With depth, we’re seeing iOS 7 rely on using visual layers to communicate hierarchy and position. A perfect example of this is Control Center. You swipe up from the bottom, and it’s visually apparent that Control Center is on top.

A question of personality

The question for me becomes how can brands live on iOS 7 and still keep maintain their identity? To me, one answer is to look back at your brand elements and see how they can apply to the new look in iOS 7.

Apple provides these guidelines on how to brand yourself:

  • Use a key color for all of the icons and text in the menu bar
  • Use the icon as your main branding piece

Ideally, your brand several parts to it:

  • Key colors
  • Logotype
  • Icon or mark
  • Typography

You can employ these brand elements to help you fit into iOS 7, but I realize that may not fly with every brand. Especially those brands with textures, pinstripes, gradients or other visual treatments as a part of their identity. Brands are understandably hesitant to do anything that may dilute their brand.

While I can’t presume to tell a brand what to do without diving into specifics, I would advise being open to change to fit evolving platforms like iOS. Here are a few considerations that will, if nothing else, help you start some conversations:

  • Using your brand’s type family in the app for body and headline copy
  • Using key colors for things like icons and buttons
  • Putting your logo in the menu bar
  • Using the app icon as a key branding element
  • Considering how animations can enhance your branding, and which types would be appropriate (e.g. Kenny G is probably not going to want lots of flashy, snappy animations. MTV or Red Bull might)

Not adapting

It’s a valid question, but one example of an app not adapting to changes in iOS comes to mind. Tapadoo’s article suggests that clients who didn’t upgrade to take advantage of the iPhone 5 lost out and users deleted their apps.

Users adopt iOS in high percentages, and my experience tells me people care about having an experience that fits their shiny, new device. At the time of writing, 94% of users are on the current OS  I seem to recall Apple saying they hit 80% of users updating to the latest iOS within a couple of weeks of the last iOS release.

Parting thoughts

Overall, what I’ve read makes me think upgrading your app to iOS 7. There are tons of technical enhancements, and benefits to folks who use your apps—I didn’t cover them here, but there are tons like iCloud Keychain (it stores and generates passwords so users don’t have to) and Dynamic Type (people can have a consistent font size across all their apps, which increases readability) which will be tremendously helpful.

by Joshua Mauldin

Modern Pictograms

modern pictograms

I’m a big fan of making everything my work compatible with whatever resolution a device may have. Whether someone’s browsing on a 3Gs, iPhone 4 or an iPad, I’ll want the icons that I employ to look the best they can.

Right now, I use media queries to do that; it’s fun and pretty, but adds a a little weight to the site. That’s why I was especially stoked to see that someone put some icons together in a font. This lets you put in one icon and not have to worry about exporting a larger duplicate.

They’re free, too. So grab them. I’m itching to try them out myself.

Modern Pictograms – The Design Office.

by Joshua Mauldin

Should websites look the same in every browser?

do websites have to look exactly the same in every browser

I get this question a lot, and wanted to give a brief explanation. In short, no, they don’t. I’ll sometimes point users to Do Websites Need To Look Exactly The Same In Every Browser?, but of course more detail is usually necessary. So, here it is.

Why not? Because each browser handles displaying elements differently; often it isn’t the best use of your client’s money to give users the same pixel-for-pixel experience on every browser.

What’s important is something called graceful degradation, because it focuses on letting users access what’s important—the content—regardless of what their browser supports. The best browsers get to display the best features like drop shadows, rounded corners, sweet CSS-based animations and other goodies. Browsers that can’t support those still get the best experience they can afford; sometimes that means no rounded corners on your buttons (hi, Internet Explorer 7 and 8 users).

Of course, it’s possible to add these things after the fact with jQuery and the like, but I’ve found it really just makes things cumbersome when you go to update something a year or so down the road.

You also need to ask yourself if supporting an older browser is right for your site. Take a look at your Google Analytics reports (you do have that, right?) and see what percentage of your visitors use Internet Explorer, and what percentage of them use older browsers like Internet Explorer 7 (or 6 even). Depending on the size of your site, 3% may be the magic number for dropping IE6 support. Other sites it may be 15%. It really all depends on how many visits and page views you get per month from that browser.

It’s nice to know that since Microsoft, Chrome and Firefox (Apple, you out there?) are turning on auto-updates, since discussions like this will one day be irrelevant. Seriously, thank you, Redmond.

While it’s important to consider your users, you also need to make sure you’re using looking forward and using the best technology possible for your site. If you keep looking back to support older browsers, your site’s current version won’t stay as fresh as it could.

by Joshua Mauldin

Don’t Give Your Users Shit Work

no-thanks

via Zach Holman

Some people still like shit work. They can spend an hour moving Twitter accounts to special Lists, and then at the end of it look back and say “Boy, I spent an hour doing this. I really accomplished a lot today!” You didn’t. You did shit work.

It’s great that Facebook finally got user lists right: they’re smart, useful and respectful of users’ time. Google+ makes it tough for users to get started by requiring them to add friends to circles. I don’t want to do that (and definitely not at first), I just want it to work. Which is why I’m still not really active on Google+. Twitter’s implementation of lists is ok, in that I can still follow people I want and not be forced to think about making a list.

While the article references how social networks integrate lists, there are so many other ways users get stuck with menial tasks. Filling out forms, categorizing information, phone trees, etc. etc. It’s boring and I’d rather be doing more interesting things (read: checking out funny photos of cats).

Things are looking up though. Our mobile devices are handling organizing our music, photos and documents, so we don’t have to worry about where/how we store all our little things if we don’t want to. We need more things trending in this direction.

How can we help this, as it relates to building apps and websites? Build things with the user in mind. They’re busy and don’t appreciate their time being wasted. They just want to get in and get out, so help them along the way as best you can.