Canvas TV

Digging these Canvas TV comps! For whatever reason those angles are working for me. Seems like a mostly visual decision but its nice that they repeat the hero images style as well. Nice little touch

National Geographic App by Rally Interactive

I had an awesome experience when I first started using the National Geographic application. I thought, “Wow…this is awesome!” It could be due to the fact that I design apps myself and enjoy a well made application but it was also fun to see how they solved specific problems.

They used the pullout drawer, quickly becoming a convention, for navigation but expanded on its abilities with the addition of the scrollable badges area. A great and intuitive decision which added a touch more interactivity. A good way of utilizing space that felt natural.

Good Design With Great Interaction

The app attests to the strength of good design both visually and interactively. The UX and Graphic Design came together seamlessly to create something beautiful and usable. Job well done!! 

Check out Rally Interactive’s Behance Page.

ABC iPad App

I stumbled across this little gem from Bart De Keyzer, I hope he wont mind me posting his work on my tumblr but it is a lot of fun! He successfuly created something which is educational, fun, and simple. I wonder if he has thought of how each screen would interact with the user?

Check out his work here.

Illustration and Interaction

I have an interest in how illustration will affect the digital environment we find ourselves in almost everyday. Mostly I want to see more ways in which illustration can be interacted with. Children’s books are only the beginning. Ads, apps, websites, there are ways to involve the user in a story, to educate them while enticing them. 

This all comes back to something I have been toying around with for a long time which is: 

What is the true meaning of User Experience Design?

I will write up a post on it this weekend I think. I have to get these ideas out of my head! 

uxrave:

UX Archive: A new mobile app pattern library that focuses on showing user flows for common tasks (like sign up, searching, sharing).

I’m not sure what a BirdDog is but this website redesign has some fun things going for it. This site design is brought to you by I Like Shiny Things, a freelance designer who currently resides in London (info from the Behance page).

The website visuals are bold and fun. The color scheme helps tone down the bold, rounded type and large sections, while also providing that trendy “retro” look that a lot of agency’s are going for. I don’t think that the visuals are particularly groundbreaking or different but in this case the project probably didn’t require that. They are executed well and professionally so the site fits comfortably, and even above, its peers.

The real gem is in the ux/interaction thinking behind the site. Having designed the site in modules and giving client access to switch out those modules makes it easy to update information without destroying layout and design. A good choice for sites that need to be updated frequently.

There is much more than what I’ve said so check it out for yourselves! Visit her Behance page!

Birddog Website Redesign Page!

BFA - App Goal

What is the goal of my mobile app?

I started out wanting to create a better dribbble site. One that wasn’t so focused on the aesthetic of design but which brought design thinking back into the equation. I noticed that design right now is a little obsessed with aesthetic style without putting much thought into why they use it. 

The app started out being a mobile social media platform which would allow designers to create a profile and then add process to their work. 

Why I changed my mind…

I met with a great designer, Amy Stilhorn, who inspired me with a different idea. Why only allow designers to participate? Wouldn’t it be better to allow a lot of user the opportunity to add content or ideas to the world of design thinking. With this in mind the objective of my app changed.

The application would now be a social media app which would focus on photographs or design snippets. These would be uploaded and the application would ask the user important questions about the photograph. Why they thought it was well designed or why it wasn’t and then others would comment, rate, or suggest certain things. Thus creating an active, fun look at design thinking.

Why its a better idea…

Its a stronger idea because it is inherently fun and interesting. It could build off of existing social media platforms, including instagram, and allows for a better communal gathering. People love to gripe or praise when they feel so inclined and providing a location where many can get together to agree or disagree is ideal. The main purpose is fulfilled by encouraging others to view design less as purely aesthetic and more as thought based. designers and people should be able to connect much more closely.

Web 3.0?

There was a great article written by Espen Brunborg entitled “Symptoms of a Web Epidemic” for Smashing Magazine. If you have time, skip this post and go read it! If you don’t want to benefit from an insightful article I will do my best to sum it up really quick.

Brunborg pinpoints various web trends that he finds in the world today. I will include photos directly from the article actually.

That is really only a small taste of some of the trends he pointed out. If you could’t identify some of them they are forked ribbons, texture, old illustrations, zig zag borders, etc.

The really important issue that he highlights is one of trends and trend copying. It is interesting how these trends catch on in the web world, most likely because we are so connected. Brunborg makes the point that trends in themselves are not bad, however it is vital for interaction designers to know about trends and be aware when using one.

Be Proud to Be a Professional

Its really a matter of professionalism. As we deal with clients, we want them to know that every choice we make is in their best interest. Trends tend to be more for the interest of the designer, the visualizer BUT if that trend fits right in with what your client wants DO IT!! Use the crap out of it if it works but do it with purpose and with design thinking. The biggest mistake that designers make, which causes distrust with our clients, is that we are not logical beings. That we are incapable of backing up our decisions with solid insight and thoughtfulness. A lot of those sites that were featured probably use the trend to their advantage but what if one of those sites were a corporate investment firm? It might not make sense to apply that style even though its trendy. If that investment firm wants to cater to young hipsters, then make it rain!

Design your Design

For some reason I love that phrase. I’ve also heard it said “Don’t design by default.” Those principles are profound when it comes to design. Another problem with trends and judging our design by visuals alone is that it allows for professional confusion. Instead of highlighting designer who are truly communicating we begin to highlight those who are truly copying or mimicking. That act in itself is not a bad thing, its great to repurpose and remix ideas but at what point do we draw the line? Not in copying but in what makes great design.

I think that Dribbble has a little bit to do with our obsession over visuals. We see snippet after snippet of really cool design but there’s no purpose! We don’t know why they chose that direction, how that direction communicates, or what the client thinks. We just say stuff like, “dude looks sweet” or “love the type” or “love the texture” or “loved the forked ribbons, way retro dude.” Is our profession just brown nosing more capable visual designers than ourselves?

Beware of Trends, Embrace Design Thinking

I’m not dissing dribbble. Nor am I dissing popular trends. They look great! I drool over retro type, textures, and justified type just like the next guy. I have enough saved jpg’s to prove it. I am saying that we should all make conscious decisions about what we do. This will separate the TRULY insightful designers from the ones who can only mimic what those ones do. Design thinking is a much bigger than we imagine. It is found all over the place but as designers who should CLAIM it as our own. It is our birthright so to speak and if we can embrace design thinking as our own it will only make us that much more valuable. Both to ourselves, our team, and our clients.

Responsive Design and Animatics

The Question

To really define what this article is about and the problem I wanted to tackle, I had to ask myself what I was REALLY looking for. I believe that there have been some great articles written about responsive design and its purpose in web design. I think most would agree that it is a viable practice which isn’t going to be leaving us anytime too soon in the future. Smashing Magazine had a great article by Kayla Knight, Responsive Web Design: What It Is and How to Use It, all about responsive design and practical application. Kayla Knight relies heavily on Ethan Marcotte’s article on responsive web design and fluid grids, the list goes on and on.

So as a web or visual or interactive or experience or graphic based designer, how could my process change to work with responsive design?

Other’s Ideas

This hasn’t been a recent question mind you. I’ve been on the lookout for solutions and ideas to this problem. Many have offered up solutions here and there. Those like Style Tiles, Responsive Wireframing, Bearded Studios, have suggested certain things and ideas which I find very interesting and look forward to hearing more about them. I’m not for or against mocking responsive sites up in browser though I have my concerns. What are those concerns? Well I’m glad you asked!

Concerns

My concerns mostly fall under the wonderful process that our industry has tried so hard to build. A process which helps establish designers and developers as more than mere service based grunts but as actual scientists and thinkers. It took us almost two decades to figure out that we could be more than “pretty makers” or “code junkies” and I’d hate to devolve back into my keyboard mashing ancestor, the one with the baggy jeans and Cake albums playing on my portable cd player.

There has to be other ways to incorporate responsive thinking, visualization, and movement into the process which would be beneficial, even slightly, to those involved. To add to the existing pool of experience and knowledge without taking away from it. 

Animators and Animatics

Animation has been dealing with the issue of…well…animation for as long as its existed (go figure). Just because they have to figure out how to make something move and react they didn’t decide just to animate it and see what happens. They realized the importance and purpose of having a process to identify problems before they hit them. Saving them time and money in the long run so they could produce the best quality, pleasing them and the client.

Animators generally start with a storyboard which details the important aspects of the animation in question. They highlight important moments, camera angles, facial expressions, and generally pitch the story moving through the boards at the proper time and pacing. If they can solve the issue now, before they’ve invested a lot of time then the time they put into the beginning is already worth what they would’ve spent at the end.

Next they generally move on to an animatic, which basically takes the proposed sketches and visualizes them. Timing, movement, transitions, sound, are all considered and watched in these. Take the Gorilla’s animatic for Dirty Harry as an example. It pretty effectively sums up the music video and tackles all the major parts without having to go too far in depth. For an even better example, almost weird actually, check out this Avatar: Last Airbender animatic (the cartoon not the movie, wipe the worried look of your face)

Who Cares?

How does this effect us? Maybe it does maybe it doesn’t. The real concern with responsive design is not knowing how a design will actually respond while in browser. Where are the break points? How should everything collapse? How should it expand? Etc. By taking a page from animators we could include a new section into the process after the initial wire framing, even after initial concept sketching on post it notes if you want! It just becomes a matter of plugging content or design in whatever form and planning out the interactions.

This could be done in an animatic fashion. Take the initial sketches of wireframes with planned content and navigation, place them into a program like Adobe After affects and map out several different ways that content could shift, react, or change. Why would this be worth your time? Maybe its not. It does provide you with a “responsive looking” mock up to either discuss, test, or fight over. It gives you a deliverable to a client who may have no idea what they’re paying you to do. Yes, its another step to the process. Yes, it will require fairly basic knowledge of any sort of animation or editing program. Yes, it doesn’t really address the biggest problem of where and how will a design break. It could help both parties know what to design for. With a solid plan and visuals to back up a thought process, it should be possible to get both working smoothly. I’ve never tested it as of yet so I can’t honestly say.

The Moral of the Story

Whether or not the idea has much clout behind it isn’t the real point. The real point is that responsive web design shouldn’t be “forced” into cutting corners because we aren’t sure what to do with it. The reality of the situation may be that it requires a tool we haven’t been given yet. One that allows for quick, responsive mockups. One that could even be saved as a PDF deliverable for clients to expand, which changes its design whether its viewed on a smartphone or tablet. How cool would that be? Perhaps its time everything we use becomes responsive…they’re already testing the idea out in architecture.

I think its important to look outside of the normal box we are in. There are a myriad of great ideas and solutions that other fields have discovered that we should pull from. I know of others who are now using Keynote and Powerpoint to mock up mobile apps. Utilizing the transitions, animations, etc that can be used in those applications. With CSS 3 and HTML 5 we can create in browser presentations (Its already happened) which use transitions but shouldn’t important presentations still be planned out before jumping in? 

Maybe its a combination of the ideas that have been presented. Maybe as the site is developed there is a large push for ideation as the basics are figured out. Again, I don’t know what the answer is but I look forward to seeing what happens.

Brant Day