Omit needless data. 'Nuff said. (For now.)

Janaina Medeiros
Sade Olutola
we're not kids anymore.
No title available
sheepfilms
dirt enthusiast
tumblr dot com
AnasAbdin

Andulka
d e v o n
Lint Roller? I Barely Know Her

Product Placement
YOU ARE THE REASON

No title available
occasionally subtle
Peter Solarz

PR's Tumblrdome
trying on a metaphor
Three Goblin Art
KIROKAZE

seen from United States
seen from Brazil
seen from United States
seen from United States
seen from Italy

seen from United States

seen from China
seen from Germany
seen from T1

seen from T1

seen from United States
seen from United States
seen from Malaysia
seen from Philippines

seen from United States
seen from Canada

seen from Germany

seen from Brazil

seen from United States
seen from Syria
@touchtheory-blog
Omit needless data. 'Nuff said. (For now.)
Adapting to a Responsive Design Workflow
At work, I've had the opportunity to dive deep into responsive design for a full refresh of a banking site. That process has taught me much about adapting to a responsive-friendly workflow. Now I want to apply that first-hand experience, plus insights from people like Trent Walton, Brad Frost, Luke W, Jason Weaver, and numerous others.
Working with very large organizations has reinforced my belief that excess documentation add huge amounts of waste to software development. Even in my personal projects, waste creeps in.
Here's how I'm getting leaner:
1. More Sketching, Less Wireframing
Wireframes feel more complete and more authoritative than sketches. Wireframes are often a discrete deliverable, an artifact that's dressed to impress. Wireframes often raise questions that only other documentation can answer.
Documents breed like rabbits. And all those documents have to stay in sync. And the more time you spend creating, editing, and maintaining documents (and having meetings about documents), the less time you spend working on the product.
Sketches suggest impermanance. Sketches inspire critique. Sketches are a conversation tool. You can crumple them up, throw them away, and nobody cares. Sketches keep work moving.
2. More Coding, Less Photoshopping
Designing responsive sites in browser helps you find flaws faster. Mocking up mobile, tablet, desktop, and widescreen views of the same design is the bane of efficiency.
More importantly, working with the medium you are designing helps you understand your medium. And that helps make you a better designer.
3. Design is the Process
Instead of Sketch -> Wireframe -> Mockup -> Code -> Test, Sketch -> Code -> Test.
At first glance, it may appear that I've taken most of the design out of the process. But design isn't a step in the process, design is the process.
Sketching, coding, and testing are the tools to concept, create, and evaluate design.
Touch Focus Update
I'm putting Touch Focus on hold for now.
Switched to a star rating system for the third screen. The smiley rating system reinforced negative emotions about performance toward a goal. Ratings are an important part of helping users improve their goal setting, but I want to avoid discouraging users who have a tendency to underrate their performance. A 1-star rating doesn't feel as bad as an unhappy rating.
You can now enter a goal in the first view. When you click start now, the second view replaces the first and displays the goal. The countdown timer starts automatically.
The controller for the countdown timer is go. I've also set up the views and test controllers for the goal entry and rating screens. Still looking into how to store and retrieve data models across different views in AngularJS.
After reviewing a few different web app frameworks, I settled on Google's AngularJS to build the Touch Focus prototype. AngularJS adds dynamic views to HTML, and the code feels like a natural extension of HTML/CSS/JS.
Current visual design for Touch Focus. I have some more tweaks to make, but I need to shift gears away from design to build a prototype that I can start testing.
Visual design for the first screen of Touch Focus. This needs some cleanup and polish, but I'm happy enough to carry this style over to the other screens and get to work on a testable prototype.
Here are the screens set with Bariol and FF Tisa Sans Web Pro. The sans version of Tisa Web ended up working much better than the serif version. I'm pretty happy with the layout and typography now. Let the next phase of the design begin!
Layout for Touch Focus on a mobile web screen size. I use a neutral font and grayscale at this point to avoid any distractions. Doing so helps me concentrate on the visual hierarchy of content and interface elements. With this layout, I establish a great baseline for experimenting with the visual design.
Here's a nice diagram of the available screen space on an iPhone for web sites and applications. The URL text field moves off screen when the user scrolls down, and it is also possible to trigger that on page load. However, that isn't the default behavior.
The visible area is 480 x 208 in landscape orientation. The status bar and URL text field still eat up 80 pixels, while the button bar shrinks by 12 pixels in height. If the user needs to input text in a form, the real estate shrinks to 140 pixels in portrait, but the browser will scroll and zoom automatically if necessary. You can find more info in the Safari Web Content Guide.
Responsive Content
The interface responds to the user. The system responds to the user. So should the content. The homepage copy for Touch Focus has three states that adapt to different devices.
Large Screen
Stay on Target
You live in the age of distraction. You don't have time to waste time.
You need a dont-do list, not a to-do list.
Forget the milk and focus on your most important, immediate goal.
Medium Screen
Stay on Target
Don't waste time. Focus on your goal.
Small Screen
Stay on Target
I may end up cutting more copy from the large screen size, depending on how the design evolves.
This is why I am designing Touch Focus mobile first. From the 1980s through the 2000s, I was primarily a desktop user. It took a move across the country in 2008 for me to even give up my CRT. But the iPhone I purchased in '08 broke the seal.
If I'm not working or playing a PC-only game, I'm on a mobile device. And when I work on my laptop, my iPad often serves as a second screen. I went from building my own PC rigs to lining up outside the Apple store in two years... and I haven't looked back. Neither have consumers.
We have a winner! Bariol head and subhead with FF Tisa Web body. I really enjoy the contrast between the rounded forms of Bariol and the chunky serifs of Tisa. Yet the fonts still pair well together with a similar x-height and playful, humanist strokes.
Chaparral head and subhead with Prenton for the body. This is a great pairing, too.
Signika head and subhead with Cora body. Another option I like.