Category: Design

Design Find: iOS 7 Concepts

I’m always intrigued by exciting new interface designs, and these iOS 7 concepts by Mohamed Kerroudj are no exception. Kerroudj shows what a dramatic overhaul of the iOS interface could look like. It’s beautifully minmal, but also adds a lot of new functionality. I’m sure Apple will never implement quite this much change (at least all in one OS update), but there are still some great concepts.

I particularly like being able to perform simple functions and manage notifications right on the lock screen. The overall feel is much cleaner and more fresh. It still feels very Apple-like (maybe even more so), while giving iOS that update we’ve all been clamoring for. I hope Apple takes note and incorporates something similar.

Take a look at the videos below, and let me know what your favorite parts are in the comments. Have you seen some great concept videos or images? Share a link, I’d love to see them.

Logo Hidden Secrets

Logos are everywhere. You see them all the time, so much in fact, you’re probably missing some of their hidden secrets. I love a good Easter egg. Whether it be in a video game, an app or a well designed logo. I’ve tracked down a few of my favorite logo hidden secrets so I can reveal the Easter eggs to you.

FedEx Logo

The first one I always think of is FedEx. The logotype is so clean and simple you might not immediately recognize the arrow that gets created in the negative space between the “E” and “x.” It works very well for conveying the “moving forward” attitude of a shipping company.

Amazon Logo

Amazon has a very recognizable logo, and many people would probably tell you they see a smile. They wouldn’t be entirely wrong, as the orange arrow does convey smiling but it also shows “A to Z.” It’s said Amazon wanted to be the online shop for everything from A to Z. They have pretty much achieved that goal and so has their logo, making it that much cooler now.

The Big Ten college football conference has not one, but two logos with hidden goodies. The previous logo had a hidden 11 in the negative space. At the time the conference had 11 teams but didn’t want to lose the equity of their name (plus, Big Eleven doesn’t have the same ring to it). The most recent logo came out after another team was added (making 12 teams, and the Big Twelve name is already taken) so they dropped the hidden 11 and made the word Big also show a hidden ten. It allows it to stand alone without adding a second word or numbers. Pretty slick, especially for the often over-designed world of sports.

Toblerone logo

Toblerone is a chocolate maker based in Bern, Switzerland. Bern is often called the “city of bears.” Upon close inspection of the mountain, you’ll notice a bear outline. That’s nice little design detail and tribute to their hometown.

Northwest Airlines logoNorthwest Airlines may now be part of Delta, but their old logo had a couple hidden gems. There’s an “N” as well as an implied “W” in the icon. It gets better; the little arrow actually points in the direction of northwest. Those are pretty clever details.

There are many more logos with little secrets, but the above are just a few of my favorites. Maybe I’ll do another one of these posts in the future. Did I miss your favorite? Tell me about it in the comments.

Opinion: How to improve iOS

I know, I know, just what the world needs, another article on how to make the iPhone (and other iOS devices) better. Well, it’s true there’s no shortage of user dreams for iOS, but that doesn’t mean I can’t throw my two cents in. Here are a few ways how Apple could improve iOS to keep it current and improve the overall user experience.

Screenshot of iOS notification with delete button mocked up.Swipe to clear notifications: Have you ever not paid attention to your phone for a while? On occasion, I’ll leave it sit in my pocket on a long drive or while I’m in a meeting. Afterwards, I’m overwhelmed with the number of notifications on screen. Usually I’ll try to delete them, but Apple tiny little “x” doesn’t like my man-sized fingers. Furthermore, I don’t always want to delete all of the notifications from an app. Wouldn’t it be nice if Apple added support to “swipe” across a particular notification and a delete button popped up (think of the experience in Mail; see mock up at right)? I’d like to see this functionality in both the notification center and the lock screen.

Set your own default apps: A few years ago Apple apps were top notch. Now they’ve seemingly remained stagnant, and there is a wealth of better designed, easier to use and all around more enjoyable third party apps. It’s time Apple opens up a little and lets users set their own default apps. I’m in love with Mailbox and already use it as my main mail app. Wouldn’t it be great if iOS knew and respected that? I hate being in another app and trying to share something via email only to get Apple Mail app. Same goes for browsers, maps, etc. You can still ship your stuff, Apple, but let me choose what to use.

Siri API: Oh, Siri… I had such hope for you. Siri in theory is a really useful assistant. But in practice, she leaves a lot to be desired. Turn by turn directions are finally there, and you can look up movie showtimes, but I want more. Obviously setting your own default apps would take use a step closer to usefulness but I want a full-fledged API. I want developers to have access to Siri so she can do wonderful things. “Siri, check me into Starbucks”

iWatch: So this isn’t so much an iOS request as it is a new product, but I see them closely related. I want a watch that will make Siri useful (talking to my wrist is better than talking to my phone, which if in my hand, I can easily type on). I want the ability to easily glance at my watch to see who’s calling or texting or emailing, maybe even let me use canned responses right on the device. The Pebble is a start, but I think only Apple can make it a truly seamless experience.

Better app management: I literally have a dozen pages of apps on my phone. Needless to say, I’m not even sure what’s on there beyond the first couple pages. I’ve tried to organize, but it’s a daunting task, and it should be so much easier. For starters, don’t make my apps slide to the upper left corner. I want to place apps in specific spots and have them stay there. Sometimes I might want a gap between apps, it’s no big deal, just let me do it! I’d also like to see the ability to move more than one app at a time. I think there are jailbreak tweaks to do these things, but I shouldn’t have to do that. It should be easy and standard.

Alert sounds: The thing I miss most about Android is being able to customize every single little sound my phone makes. I customized apps to have alerts that let me know what was happening and whether or not it was worth pulling my phone out of my pocket. To some extent you can customize sounds on your iPhone, but it’s very limited. I hear the same ding for most apps, and it’d be nice to know if a game wants my attention or if it’s something more important. It seems this is left up to individual developers to add their own sounds right now, but I want to take it further, let me set the sound. I want to do custom sounds, so I know exactly what I’m being pinged for, and it’s not the same default sound that everyone else in the room has.

Web app notifications: Sometimes a native app isn’t the answer. One of the downsides to a Web app, however, is the inability to send users notifications. With modern browsers like Chrome and Safari allowing Web apps to take advantage of desktop notifications, why shouldn’t your phone or tablet? Hopefully this would cut down on some of those “native” apps that just wrap up a website. I saw a good mock up of this recently but I cannot seem to re-find it.

There are plenty of other ideas I didn’t add, but the above are some of my biggest desires. What would you like to see added in iOS 7? I’d love to hear your thoughts, please comment below.

Design Find: Minimalist Scientist Posters

I stumbled across a really great series of minimalist science posters by Kapil Bhagat. They are all brilliant, minimal interpretations of scientists’ names. I love how simple and clean they are. Each one does such a great job representing the scientist. It’s really hard to even pick a favorite because each one works so well. I love finding projects like this on the Web. I’ve added a few below but you can find the whole series at Bhagat’s site.

Minimalist science poster for Newton. Minimalist science poster for Einstein.
Minimalist science poster for Darwin. Minimalist science poster for Copernicus.

Project: Partners in Dance

Screenshot of WMU Partners in Dance website.

I  recently launched a website project at work for Partners in Dance, which is a community support group for Western Michigan University’s Department of Dance. It was a fun project because there wasn’t a ton of content and I could have a little fun with the design.

I opted to keep it very clean and simple with a big, bold area for photos. The dance department provided me with some great shots from previous performances. I noticed most of the pictures had a natural “fade to black” quality to them. I capitalized on this by creating a black band at the top of the page. I then set it to randomly choose from a variety of images that all make it seem like the photo exists across the entire top of the page.

The “Partners in Dance” logotype at the top carries over from a brochure they had made previously. The rest of the type is a Google web font called Lato. I was trying to find a nice sans-serif with a good mix of weights and Lato seemed to fit the bill.

Below are a few more screenshots, but be sure to check out and explore the live site. Feedback? Questions? Leave them in the comments.

Screenshot of WMU Partners in Dance website.

Screenshot of WMU Partners in Dance website.

Screenshot of WMU Partners in Dance website.

How to Use Dashes

A big part of my job lately has been copy editing. It’s not exciting but it is important. Most of the time it’s just correcting little things like extra spaces (there’s only ONE space after a period!), writing out acronyms or fixing capitalization. One of the most common mistakes I come across is the misuse of dashes. Below I’m going to cover the most common dashes and how to properly use them in your writing. Once you get these down, someday a graphic designer will thank you for your well-typed copy.

When most people think of a dash, they probably think of a hyphen (-). Technically it’s not a dash but it is closely related. Hyphens are used in certain compound words like mother-in-law. Most people don’t have issues with using hyphens.

En dashes (–) on the other hand are often misused, or rather not used. These dashes are meant for a range or passage of time, like 8–10 p.m. or Nov. 12–15. Most people end up just putting a hyphen but the correct character here is an en dash. Another thing to note is that you don’t put spaces on either side of an en dash.

The em dash (—) is the largest dash. It’s purpose is to break into a thought. Often times this break is in the middle of a sentence and plops an idea or description in the middle of another thought. The most common mistake here is to use to hyphens instead of an em dash. This is incorrect usage that, like the double space after a period, results from the limitation of typewriters back in the day. Some modern word processor programs will auto-correct a double hyphen to an em dash but it’s a good idea to get in the habit of typing it yourself.

Now that you know a little more about which dash (or hyphen) to use, you probably want to know how to insert them. This Wikipedia article shows the keyboard shortcuts and HTML character codes. You can find a little more reading on the subject of dashes at WikiHow too.

Opinion: Reset Buttons Suck

Have you ever filled out an online form only to lose it all by a poorly placed reset button? Why do these buttons even exist? I can’t think of a time I’ve ever filled in a whole form only to say, “hey, I didn’t really want any of that information, let me erase it all at once.” Luckily in recent years it seems less and less forms have these annoying buttons but they still exist. I’m calling for everyone to check their forms right now. Go ahead, I’ll wait… If you’ve got a reset button on your form, it’s time to reconsider that choice.

A reset button is just a bad user experience. A user can easily change the information they’ve entered without having to delete it all in one click. I’d say almost no one intentionally hits that reset button. It’s probably an accidental click while thinking it was the submit button. Having that button in place is doing more harm than good. Do your users a favor and leave off that reset button. That way you don’t have to needlessly frustrate your users and you have the added benefit of a cleaner, less cluttered form.

Project: University Theatre 2012 Season Site

At work I’m often playing within strict guidelines. The university is moving everyone into the same look and feel on the web as part of their massive branding effort. It makes sense but it can be dull when you’re working on it day after day. Sometimes it feels like I’m just going through the motions.

University Theatre Season website screenshot

That’s why I was so excited to have a project that breaks the mold. The University Theatre at Western Michigan University was interested in a website to feature their upcoming shows for the new season. Luckily they fall under one of the areas I work for so I was happy to oblige. The overall design of the posters and other materials were done by interns in the Design Center (oh the memories). They were a great jumping off point for a new website.

I tried to keep the overall “awaken” theme the interns had come up with in their work but translate it to the web. I filled the site with the pertinent information about each show and how to get tickets. It is an extremely simple site and there were still some stiff requirements but compared to the templates I usually work in all day, it was creative field day. It’s nice to break away from the constraints every once in a while and think creatively. Make sure you explore the University Theatre 2012 Season Site and let me know what you think.

Failed or Stalled Projects

At some point in your life you’re going to have a project that just doesn’t go anywhere. It’s as true in life (a bookshelf that’s half built) as it is in the design world (that sweet iPad app that ran out of budget). I’ve had my fair share of projects that fell into oblivion. Most of the time it just plain sucks. For reasons often outside of your control, a project you’ve put hours of work into will never see the light of day.

How do you cope with this? It can be extremely frustrating and somewhat confusing. What do you tell your friends and family (whom you’ve inevitably been talking up this project to for months)? Can it still go in your portfolio?

For me the worst part is feeling like you wasted your time. You can spend months on something and have nothing to show for it. In your next job interview you’ll explain what you’ve been working on for the past few months and when they ask to see it you’ll have that lame answer “well it didn’t get made.”

Hours iPhone mockupsA recent example for me was called Hours. It was an iPhone app I had designed screens for. The project was going to serve up business hours on top of the foursquare database. We were nearing launch when foursquare announced they were adding hours into their main database. The months of time and effort we had invested was all for naught. Foursquare had beaten us to the punch. Our spirits were broken and even though our standalone app could still be useful to non-foursquare users, it was never finished.

The reality is it happens. Much more often than anyone would like to admit. I think the best thing to do is try to move on. I hate that advice; it sound so simple but it’s very difficult. In the case of a designer, you are left with un-built screen designs or the artwork of un-printed posters. You’ve done the work, you’ve taken the time to think through the project but it was never put into production. Moving on for a designer could simply be taking the skills and experience you’ve gained and applying them to your next project.

I think it’s still appropriate to put in your portfolio. I have a couple of app projects that stalled out for one reason or another (like Hours) but I plan to put them into my portfolio. The screens were thought out and designed. The mockups were completed. My side of the project was finished, even if the other side wasn’t. Why shouldn’t I have at least something to show for it? Sure it might not be as valuable as a full-fledged running app but until I have those completed projects I want and need something in my portfolio demonstrating my interest and abilities in the app arena. Sometimes just having a few mock ups can be enough to demonstrate your skill and thought processes. In the end that’s what a portfolio is all about anyway, right?

Team Groom Discs

It’s no secret I’ve fallen in love with (some my say became obsessed with) disc golf. It was sparked around the time of my bachelor party and all of my groomsmen have also taken up the sport. I knew I wanted to make a special gift for my “team groom” and our shared affinity for disc golf provided the perfect project. I had read a little online about dying discs so I came up with a design and set out to create custom putters for the guys.

As my friends would say, “Nuttin’ but chains!”

This project seemed really simple when I was planning but there were a lot of hurdles to overcome. The design was easy. I came up with a simple vector drawing of a bow-tie (which were a staple of our wedding wardrobes) and then put the text “TEAM GROOM” and “#JONESWED” underneath. We had referred to ourselves as Team Groom and #joneswed was the official hashtag of our wedding.

The design was the easy part, getting it from the computer to the discs was where things started getting interesting. I thought cut vinyl could be applied to the discs fairly easily so I set out to it cut. First I tried using a friend’s Cricut cutter. Apparently the software “hack” that let you cut custom designs had been updated and lost support for Cricut machines after a lawsuit. I tried to no avail to find an older version that would work but I was left without my vinyl. At this point time was running out of time so I found some local sign shops and finally got my vinyl.

My original plan was going to just stick the vinyl on the discs but after doing some research into dying, it seemed I could use the vinyl to create a unique design with the dye. This technique allowed the discs to dye the area around the vinyl, then when it was later removed the original disc color would show through. I liked the idea of a smooth surface on the disc so it didn’t disrupt the flight pattern. I found some Rit dye in a color I liked and went home to start dying.

The disc prep included using acetone to remove the labels. My first attempts seemed tougher than the videos I had seen on youtube. I kept at it and then stuck vinyl on my first disc. I dunked it in the dye and it didn’t seem to be taking. I added more dye, left it in longer, but it still wasn’t really working. Turns out, I had bought the wrong type of plastic discs… I went back out and bought a new set of discs, this time in the Innova Star plastic, which upon further research, appeared to be the best type of plastic for dying.

Applying the vinyl to the blank disc

Applying the vinyl to the blank disc

Star plastic was much easier to remove the labels with acetone and lucky for me, took much better to the dye. The dye seemed to turn out more of a dark purple than the bright blue advertised on the box but they still made the custom look a success.

disc in the dye pan

Here is the disc face down in the dye. It’s important to keep the dye warm but not too hot or you can melt the plastic of the disc.

dyed disc with vinyl still on

Here is a disc after it’s been dyed with the vinyl still applied

peeling the vinyl off of the dyed disc

After the dying process and a quick rinse, you can remove the vinyl from the disc

pile of custom team groom discs

the final products

I topped off the gift bags with a custom Team Groom water bottle using the same design. Those were an easier task, which just consisted of the application of vinyl to the bottles. Overall I’m very happy with how they turned out and can’t wait to try another dye job. I think I’ve learned a lot about the process (and which discs to choose, definitely the Innova Star plastic!) and the next time should go much smoother. Have you done any custom dying? Share a link or some pro tips in the comments.