Posterous theme by Cory Watilo

Make the button bigger

There is a lot of talk around the web about always have a responsive designfor any web project that you create. But one thing we never seem to talk about is how to actually design for this space. So people are doing an amazing job of this like Think Vitamin/TreehouseSimon Collison to name a few. But what really makes these great and easy to navigate through. 

Well it’s the spacing and size of buttons. So often we talk in desktop screens about hierarchy and whitespace around elements, but when we get into our responsive designs all of this can change. We navigate responsive designs differently. We’re using our big thick fingers to click on buttons and navigate information. So then why when we design for these smaller screens do we also make the buttons that much smaller.

You might say it’s because we are working in a screen size of 320px and other various sizes. But that just means that you need to review the strategy we’ve developed and user experiences we want to create. Yes you are in a 320px space but this just means that less is more. Don’t make your buttons smaller so that you have room for a thousand other things. Reduce the amount of content you have so that you can fit those buttons in there. If it’s a site with a significant amount of images then maybe you reduce it down to 3 or 4 than than 20. Small touches and quick evaluations of your strategies will go miles with how the user sorts through your content.  

We need to start looking at making these buttons bigger. We need to take on new perspectives in regards to our hierarchies. Our user experience will greatly improve if we are just make navigation easy. We can still have our whitespace around elements. But we need to judge the sizing different. This might mean you add some extra padding around the button text or maybe you center the button in the screen rather than floating it right or left. Just make it easy for that user.

Like most I’ve fallen into this trap a few times. Thinking that if I make that button and bigger then I’ll lose the detail or elegance of my design. But in the end, designing that button to be a bit bigger always helped and created a better user experience. By doing this I was able to remove concern from my clients and myself that the user would click and get lost in content they didn’t actually care about. Sure the time spent on these new pages would be great from an analytics standpoint but would that user ever return knowing that they had such trouble navigating to the information they wanted. Probably not.  

So I ask you to all consider this when creating your next responsive design to make buttons bigger for your user. You might think it’s the wrong way to go but your user will be forever grateful if they can navigate your content more easily.     

QR code

Lobster Becomes The New Comic Sans | Da Sie Designs

Ladies and gentlemen, I bring you the latest in Comic Sans style fonts. That’s right, it’s the Lobster font. The new decorative over used font on the web. Originally created by Pablo Impallari, it has become one of the most popular web fonts out there. It has been picked up by quite a few of the web font providers like Font Squirrel and Google.

I’m on several different social media sites that allow you to display your latest and greatest innovative and inspired work, but let’s be honest here. When you’re work looks like everyone’s else because you’ve used the exact same font as everyone is using then it’s not very inspiring. I’m not saying there isn’t a time and place for using Lobster. There definitely is. Just like there is a time and place for any font. But you must choose your typeface based on the message and tone you are trying to get across to your end-user. Don’t pick a font based on it’s popularity or ease.

I’ve started to see this font on everything from corporate high-end designs to playful apps. Lobster doesn’t always look like it’s the perfect fit.

Web fonts have come a long way over the last couple of years. Hell some could say even just the last several months. So then why as designers are we limiting ourselves to a standard few. Reusing, overusing them in every way possible. We as designers submit countless of galleries and articles every day on making the web a beautiful place. We bitch and complain about IE and it’s lack of support for CSS, javascripts, and general framework rules that help make our sites beautiful. Then why with all this complaining and information do we begin to over a very nice font like Lobster. Instead we should take the time and design with purpose. Selecting our fonts in the same thoughtful manner we select our colours and borders. Our font choices shouldn’t be the after thought of our design. They should be put of the strategy. They should add to a site design, not hinder or take away from it. They shouldn’t in most cases be the first thing you notice when landing on a page. The content that they are styling should be. Just like we wouldn’t use loud colours all over our pages, we shouldn’t use loud fonts that take us away from creating easy, beautiful user experiences.

I’m not calling for a ban on using Lobster. I actually think the font is quite beautiful. I’m just calling us as designers and the experts in making smart choices for ourselves and clients to really think before throwing in Lobster as part of your next design. Do it if it makes sense and there is absolutely no other font choice that could be used instead. Don’t just do it because you’ve hit your deadline or are just getting lazy.

QR code

Give Me Process

Recently, I got thinking about how differently creative designers approach their client's problems. Some work best by just throwing themselves in the adobe suite and start working through design after design until they feel they've gotten it right. Others use different methods or technologies to pull together a useful solution. 

 

For me, I always start with a sketch. It allows my basic thoughts and knowledge about the direction I think the project should take to get out on paper. From here I usually take my rough sketch and begin working in either Photoshop or Fireworks. These days, I spend my time mostly in Fireworks. I start by building a general digital version of my sketch. As I'm working through this I begin to revise the experience and wireframe to a more finalized version. I find this useful because it helps me really see how the information is going to look with colours, typefaces and general layout. I get a much better understanding of how the user may use the end product. After I'm happy with what I see in front of me on screen, it's time to go back to the sketchpad and build out further wireframes that are more refined. I usually go through several personal revisions during this process as ask myself several questions regarding the experience that the client would like to provide the users with. In my wireframes, I never add colours even though I have them semi determined with my single onscreen design. 

 

Read the rest of this post »

QR code