Today I created the wireframe for the landing page of an iOS book I am writing. I made the mobile version first:
Then I adapted it for the desktop:
Exercises
I started the day by studying two landing page designs. The first was David Elgena’s beautiful page design for Weather Dial. I replicated it with Sketch:
The second landing page I studied was Noizio, an ambient sound generator for the Mac. Noizio’s landing page didn’t have a responsive design for the mobile screen, so I took it as an opportunity to adapt their design for mobile. The result:
What I learned
Before these exercises I didn’t appreciate the huge difference between mobile app and a mobile website. As a developer, I thought of them as html5 vs native. Implementation technology was the default framework with which I understood a product.
The obvious difference (that I didn’t know) between the two is that a native app is designed to fit a screen, while a mobile website is designed for all screens.
Here’s the first screen of Yahoo’s weather app:
Even though this screen scrolls vertically, the zero scroll-position presents a fragment that is tailored to fit the screen perfectly.
Native apps feel more “horizontal”. Vertically scrollable content tend to be displayed within a context (e.g. fixed tab bar, toolbar).
Brevity
Another “obvious but I didn’t know” insight was that the mobile screen places a heavy constraint on how much text you can have. Weather Dial’s marketing copy is short and concise, and because of that, it adapts easily to the mobile screen.
I had to cut Noizio’s copy down to less than 50% to fit.
