2/5/2018

Out There Film Festival

Experience design

2/1/2018

Student Advancement Foundation

Branding

4/3/2017

How to Design for a Developer

Time and time again, designers will tell you about the importance of having a relationship with the developer from the start of a project to the end. I’ve heard this repeated at multiple studio tours, talks, and even read about it in blogs like this one from InVision: Why You Should Design to Develop. Developers aren’t designers, and designers aren’t necessarily developers. It’s important to have that communication right away in order to end up with the best design.

I can speak from experience here (at least a little). Last year at an internship, I had the opportunity to re-design a couple of websites for the company I worked at. I can remember having multiple meetings with the design team and developers. We would show the wireframes up on a large screen, and sync it to our phones via Sketch. We would discuss some of the potential issues with content structure, navigation etc. And I learned a ton from these meetings! While the other designers might have some more “designy” advice, the developers had a ton of insight into technical things that I wouldn’t have otherwise thought of. They can tell you if what you’re designing is even possible, and can help redirect you from spending too much time on something if it isn’t going to work.

Developers save you time.

 

Well these meetings continued throughout the process, and each time I would come back with a page of notes and changes to make. And the thing was, these meetings never took that much time. In fact, it was probably one of the best uses of our time. (Not to mention how excited the new design made everyone by the end of the meeting). It kept everyone informed and on track throughout the entire project.

And if you’re really good about sharing your ideas with your developers, your designs can reach the next level. I’ve recently learned about some tools that can help with this.

InVision

You’ve probably used this, or at least have heard of it by now. Every design studio I’ve toured used this tool, and it is a great one. InVision allows you to demo your design by showing a clickable walk-through. It also allows other people (developers, designers, clients) to comment on specific aspects of your design.

Flinto

This is a new one I just discovered. Flinto is an app that syncs with Sketch (yay) and allows you to create simple page and content animations. The interface looks just like Sketch and is a lot easier to maneuver than Adobe’s AfterEffects (although that is also a good tool to learn).

Principle

Similar to Flinto, but from what I understand, is better with fewer screens and more extensive animation. It uses a timeline similar to AfterEffects, but the interface is still simplified to look like Sketch. (See here to read more about the difference between Flinto and Principle).

Zeplin

I haven’t used this one yet, but it is basically a red lining tool to pass off to your developer. It can show you dimensions of elements and distance between them to create (as they say) a pixel-perfect design. And yes, it does sync with Sketch.

All of these apps can help you communicate your idea better to the developer, and, in the end, create a better looking design.

Happy Creating (and developing!) 🙂

3/18/2017

How May I Help You?

Help. That four letter word that everyone is too afraid to say. Yet, it’s one of the four letter words that we need to say, and in UX design, it can be hard to get it. An article from A List Apart titled, “I Don’t Need Help” by Neha Singh explains this topic in depth. She describes the variety of places that help is often needed for users: in a form, defining icons, new features etc etc. Face it, we’ve all experienced that newly downloaded app with those weird icons floating at the bottom. Unless you have time to do some deep exploring into every corner of the app, you’ll probably be franticly tapping icons until you find what you’re looking for.

With this lack of usability also comes relearning. If something isn’t clear enough the first time, chances are you won’t remember what it means the second time either. Digital designer, Thomas Byttebier, wrote a list of times where icons have failed to be clear enough in his article, “The Best Icon is a Text Label.” One of my favorites is the Apple mail icon. I always find myself forgetting which icon means compose, and apparently I’m not the only one either. And if we’re being real honest, I still have no idea what that little envelope does.

It is true, lack of labels and help buttons can confuse and frustrate users. But what can also frustrate users is too much help. (I’m looking at you, 1997 Microsoft paperclip!) You know, those extensive 8 step tutorials that guide you through every possible scenario right when you first open an app. No one reads those! I’ll figure it out myself! There really is a fine line between assuming the user knows something and also assuming the user knows nothing. 

As the article from Singh describes it,

“Instructions offered in a non-intrusive manner can enhance an experience.”

She gives the example of the super cute and charming, Slackbot. Send this little bot a direct message and he’ll answer any questions you may have in a human-centered voice. How cute is that?

I’ve also seen little pop-ups on apps like Instagram and Twitter that give you some “Did You Know” insights about their latest updates. The pop-ups aren’t intrusive, and aren’t meant to block your entire view of the screen. Heck, even Siri does a nice job of showing you things you could ask her. The suggestions don’t show up until your actually talking to Siri herself. They have also given me insights into what kind capabilities Siri actually has, and aren’t always something I could think of on my own. Now I ask her these things all the time!

Ok so maybe asking for help isn’t so bad…in fact, with a little bit of thoughtfulness, UX help can actually be kinda enjoyable (kinda). In fact, I think that this type of design is too often overlooked, when it could actually be a great opportunity to make what seems to be a boring objective, into a pleasant and memorable experience for the user. Don’t make the user be afraid to ask for help, instead give them an opportunity to learn more. This type of thinking goes straight back to the company as well: the more the user can learn about your product, the more they will want to use it, and the better they will remember it. Don’t make things too confusing or difficult to learn, but give them an experience that makes them want to learn.

And as always, Happy Creating 🙂

 

3/7/2017

Augmented Reality: A Big Reality

Augmented reality: a huge trend for 2017 in the UX world. At this point, everyone has heard of at least one app that can turn the normal world into an interactive game of knowledge and power (and that app is most likely Pokémon GO). And let’s face it, Pokémon GO was huge! It was on the news everyday, drumming up local business with PokeStops. You couldn’t go anywhere without seeing someone playing that game. But the truth is, AR has been around a lot longer than Pokémon GO. Google Glass came out 3 years earlier, but, as we know, wasn’t very successful. I can even remember taking picture of my house and virtually painting wall colors years before either of these things came out!

Other apps serve more resourceful purposes. Google Translate allow viewers to translate languages from a picture (which, by the way, is great for menus in other countries). Another app guides forgetful consumers to where they parked their car. Another acts as a mechanic, showing you where and how to change the oil in your car.

Although they all serve different purposes, these AR apps are changing the way people go about their every day lives. AR in areas like retail is expected to grow this year. Other trends are even turning 2D drawings into 3D renderings. Perhaps the biggest thing is seeing new AR headsets and wearables on the market that are more functional and affordable than Google Glass. Wearables allow  you to check Facebook, emails and routes without ever looking at your phone. This reality may someday be built into our contacts and prescription glasses.

But what does this mean? All of this new technology changes the way we function. It can make our lives easier, but it can also make us lazier. Even worse, it can control us. Anyone who has seen the first episode of Black Mirror knows what I’m talking about. These people can see one another’s profiles and ratings just by looking at them. Talk about major Facebook stalking! Not to say that we will ever reach the point where we live based on online ratings, but seeing a Facebook profile next to the face of a stranger is very much a possibility.

There’s no doubt that AR will continue to grow and take a part of our lives more and more throughout this year and the years to come. AR offers countless opportunities for designers and developers to enhance people’s lives, and it’s exciting to imagine all of the possibilities the future may hold. However, I do believe that we have to be mindful of how far we take it. AR can be a very dangerous and invasive form of technology (think back to all of the robberies that happened during the Pokémon GO phase). No longer will UX designers be just designing websites and apps, but they will be creating new, extraordinary realities for ordinary people. The work we create from here on out will impact our lives, for better or for worse, let’s just hope it’s for the better.

Happy Creating 🙂

Sources from this article:

12 Mobile UX Trends

Top 15 Augmented Reality Trends

Best Augmented Reality Apps

,

2/18/2017

Design in Motion

This past year, I’ve found myself becoming really interested in animation and motion design. So much so, that I downloaded AfterEffects, opened up YouTube, and began watching countless tutorials. I picked some basics up pretty quickly and started making little animations and videos. Well, I am no pro, but I do understand how powerful motion can be. It’s the difference between looking at a picture and watching a video. The video adds depth, character, and personality to the story, while the picture is just…eh, well, static.

In a recent project, I was able to put some of these skills into motion (pun intended). In a rebrand for a small business called Artworks, I included a short 6 second animated version of the logo. And let me tell you, it got people’s attention.

The logo from Artworks made me realize how effective motion can be. What I created wasn’t anything incredibly complicated or challenging. But the thing is, animation doesn’t have to be extreme. Just subtle details and movement can change the whole look and feel of something. The article from A List Apart talks about this. They mention how to make a bouncing object. The object goes up, past the end position line by a smidge, and then back down to the end position. It’s subtle, but completely changes the whole mood of the animation.

Of course, you don’t have to be skilled in AfterEffects to use animation in things like websites. Some readymade jQuery, Javascript and CSS will do the job! I found this website last year when creating a cute slide-in effect for my portfolio landing page. The simple interface of the website allows you to choose from a list of CSS items and see them in action. Then, just download the CSS! I plan on using this, and other resources again for my new portfolio site as well. My new portfolio landing page is similar to last year’s in that it’s just my name centered in a field of yellow. Using animation would add character to the page, and also fit my brand personality.

Right away, some of my initial ideas are to have my first and last name slide in from each end and meet in the middle. The arrow pointing down would slide-up last and bounce before reaching it’s end position. Whenever navigation or buttons are hovered over, they could also bounce, or slightly tilt from side-to-side.

Animation is so often overlooked in design, but I think it’s something to really take advantage of. It’s one of the benefits of UI, really. Where else can you make your designs come to life? (Unless your a cartoonist of course). Web design offers so many opportunities to make someone go from saying “Eh” to “Wow, did you see that?” And I can promise you, (especially after my Artworks logo experience) that people will take notice, no matter how subtle it may seem.

Happy Creating (and animating)! 🙂