5 Important Lessons I’ve Learned About Mobile App Interface Design
I have been designing for a living since 2009 and, in the past three years, I have been focusing my skills on both web and mobile user interface design. During this time I’ve experienced the good and bad of the industry. Good clients, bad clients. Good ideas, bad ideas. Good developers, bad developers. There have been app approvals and app rejections.
Sometimes it can be frustrating, and although these so-called “bad experiences” can suck, they’ve taught me some important lessons. These lessons not only speed up my day-to-day workflow but also help me design a better user experience for the target audience.
March 25th, 2013 Posted in Business, Layouts
Using Checkboxes to Toggle CSS and Create Click Events
More and more lately I’ve seen developers utilizing tricks to create toggle states using pure CSS. This allows you to skip the JavaScript without sacrificing the interaction. How does this work? Is it an acceptable practice?
Today we’re going to examine two distinct methods for utilizing a checkbox to create a click event that swaps between two images using good old HTML and CSS. We’ll finish off with a brief discussion on semantics and the pros/cons of this technique.
March 24th, 2013 Posted in CSSSimple Steps for Creating a Fixed Navigation Bar
When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.
In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!
March 20th, 2013 Posted in JavaScript
Mixing Typefaces: Tips and Techniques
Mixing typefaces can be on of the most rewarding, and trickiest parts of the design process. Creating the perfect pairing of typography can result in a beautiful and perfectly readable outline for almost any project.
But how can you get started? What should you consider when mixing typefaces? While the answers aren’t black and white, there are a few things you can do. Think about contrast, x-heights, shapes and slants and overall mood when combining typefaces for any project. In this article, we’ll be delving into each of these in a little more detail!
March 19th, 2013 Posted in Typography
Understanding the Three Question Limit as a Designer
Have you noticed when you ask someone three questions in a row, their eyes glaze over and they stop paying attention? It’s a psychological defense mechanism to keep our privacy to ourselves. It’s one reason so many people choke up when taking a test.
The human, by nature, is a questioning animal. We question our existence and future but when it comes to giving answers, that’s just not in our biological nature. This is one of the problems with planning a design project. Questions have to be asked – numerous questions. There is, however, a way to ask questions and get all the answers you need…
March 13th, 2013 Posted in Business
10 Things I Learned About Design From iPad Apps
Good design is all around us. Not just in printed materials or on websites, but also in everyday items. What’s great is that you often don’t notice it — you just enjoy whatever item, tool or website you are using.
Nowhere is this more true than with mobile apps. Most of us use them every day, but do you ever stop to think how much they are shaping the way you approach design? Apps can be a great source of inspiration and also another reminder of time-tested design concepts. Here are ten of the great lessons I have learned (and re-learned) from iPad apps.
March 11th, 2013 Posted in Inspiration
Webnote: A New App for Browsing and Inspiration Clipping
If you’re anything like me, you love collecting visual bits that you find while working online – photos, video, text, gifts, whatever. These little pieces from the web are sources of inspiration that help to shape future projects, showcase trends, and serve as reminders of some of the neat things others are doing.
Creating this visual collection just got a little easier for iPad users with the new Webnote app, which allows you to browse, collect visuals and share all from one app. Here’s a look at how it works.
March 7th, 2013 Posted in Software
Design for People, Not Interfaces
Interaction Design has been practised long before the digital revolution, but under different guises and representing many other facets of today’s design language. Once you understand the underlying principles, you will probably realise that everything that has ever been designed effectively, has had some interaction design techniques applied.
Today, we’re going to be delving into this concept a little further, considering how we can use the basics of interaction design to ensure that we’re creating designs that work for people — not just interfaces.
March 6th, 2013 Posted in Business
How to Center Anything With CSS
Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning. We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?
There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!
March 6th, 2013 Posted in CSS
Unique CSS3 Header Styles for Copyfitting Typography
All of the newer properties emerging from CSS3 specifications have been immensely helpful in constructing more advanced UI designs. Webpages have been seeing a dramatic overhaul in the methods used to build typical layout styles. Notably typography and buttons/form elements are seeing the largest makeover – and with more developers launching open source projects there appears to be no end in sight.
For this tutorial I want to demonstrate how we can build a few sample headings into a basic webpage. I am using mostly CSS3 effects on the top navigation bar, along with the typography in the page. All of these techniques should carry over into the newer standards-compliant web browsers. Plus there are so many various design techniques you may duplicate and apply into any project. Be sure and check out my live demo to get an idea of what we are trying to build!
March 4th, 2013 Posted in CSS