Markdown Cheat Sheet

Headlines
# Headline 1
## Headline 2
### Headline 3

Styling
*italic*
**bold**
~~strike through~~

Links
http://url.com
[link text](http://www.url.com)

Quotes
> Quote text
***Johnny Author***

Images
![image alt text](image url)
***Image caption, description***

Horizontal rule
---

Inline Code
`var name = "John Doe";`

Code block with syntax highlighting
``` codelanguage
function foo() {
  return bar;
}
```

Bulleted list
- item 1
- item 2
- item 3

Numbered list
1. item 1
2. item 2
3. item 3

Redesigning the Topgear App

Marie Schweiz's Android Design Workflow

Anyone who isn't familiar with Topgear (at least in the English speaking part of the world) may deserve a smack on the back of his/her head for ignoring popular culture.
Just in case, here's the short version: Topgear is a terribly popular television show broadcasted by the BBC. It's about cars – fast and awesome cars of any kind. And about the three guys hosting it who are as funny and witty as it gets.

I redesigned their Android app, because, well… it was awful. This is a showcase of what I did and how I pulled it off.

1. The Original Material

Alt text
You can see clearly that this was ported straight from the iOS and just doesn't work for Android.

2. The Concept

In scribbled wireframes I have laid out what is to become a solid, nicely working Android app. You get the notion: it is pretty complex at first, but that's exactly what a good UI design should do: break apart complex structures and make them accessible for the user. Here you get some insight on the information architecture and the thoughts I put into it, featuring the overall purpose of the app, the structure of the presentation, and the proposals for individual screens.

Alt text

Alt text

Alt text

Alt text

3. The Redesign Process

From the scribbled layouts of the app screens, the content structure and the navigation, I dove into Illustrator to really take everything apart and build it anew.

Alt text

Alt text

So now, to the individual screens of the app: I stuck very closely to the Android guidelines, as you will see. No gradients or skeuomorphisms – everything's flat now. You really start focusing on the content instead of the UI, which is even more important for such a feature rich, complex app as this one. One more aspect that shouldn't be forgotten is staying true to the branding as much as possible.

The News Screen

Alt text

The Seasons Screen

Alt text

The Car Reviews Screen

Alt text

Oh yeah, and don't forget about the rich notifications:

Alt text

4. The Results

Initially, I laid out a hierarchy of the app. With this in mind I designed the screens to make them match:

Alt text

Now think way, way back: remember the original material? The result has little in common with it anymore. Man, that was easy. I wonder what took me so long.

Alt text


Publication Paradigms for Longform Web Content

Transitioning from a blog to an online magazine

Lines 1.0 – Simple Responsive Publishing for Ruby on Rails

 

You can reach us via . We publish our thoughts sporadically on our blog, Github and Dribbble.