Last semester I participated in the „Design Thinking and Human Values„-lecture by Daniela Marzavan at HTW Berlin.
We not only learned the basics of Design Thinking, but also how to run a project from the idea up to a (almost) finished product.
Because of that, for me it was the most exiting and best lecture since the beginning of my study.
I was in a group of four. We created an iOS App to encourage people to buy more „ethical correct“ products(food).
Most of the actual prototypes are done by me – so I want to share how I build THIS website with app mock-ups from scratch – without many foreknowledge.
(You’ll need internet, graphics editor like Photoshop(PSD friendly), basic HTML knowledge and webspace.)
First sketch on paper
This is what the first idea looked like. The left one is a receipt we want to scan. The right is the main screen of the app.
I have no really idea of actual app prototyping – so i use the term mockup. Maybe it’s only a wireframe – but in terms of iOS app design i think it’s basically the same (because the wireframing-service uses the original iOS design-parts). In this case I don’t care – the result matters.
After a long night I found Proto.io. An online wire-framing service with 15-days trail. It’s easy, fast, interactive and generates an interactive prototype which runs on the iPhone.
I think I created this with three screens in 2 nights (maybe 10h). At this point I forgot that i maybe publish it in the web, so I used random graphics from the web – think about this in your project(; (mail me if i violate any copyright).
I don’t think I used it that much – but there are color scheme generators like paletton which gives you an easy to use color-set.
For the graphics I just googled for badges, number icons, ranking stars… and tweaked them in Photoshop. PNG is nice because transparency, but it can be generated in Photoshop too.
Remember that Google image search provide a color, size, license and file-type filter(;
Proto.io provides an PDF export of all screens via the preview-page. I used this PDF for the next mockups.
Realistic App Photos
Photos with the App in an realistic environment are the key for an „good fake“ (or maybe „good mockup“, I don’t now what’s the right term..).
After a random „app mockup photo psd“ search I found many nice looking photos. At the end i used a freebie pack from pixeden.com. I also have some with an human hand, but we only used them in our presentation.
I just copied the screens from the proto.io-PDF into the psd-mockups. Some of them need a little tweaking in size or perspective. The good once provide an special ps-layer(with layer-options) to place/adjust the screen.
To build a nice website without any idea of webdesign there are million of free templates in the web;D
I used a free one from cssauthor.com. It provides a perfect base for the final website. Just edit the HTML in the way you need and upload it(notepad++ is your friend).
At this point I tried to use cc-licensed graphics. For the embedded presentations we used Google Presentation and Prezi with auto-play. (The prezi-presentation took me around 2hours. Don’t use Prezi with no knowledge if you have no time left:D ).
To edit the website in a group there is a neat tool called cushycms. You only have to add an extra css-class into the text-paragraphs you’d like to make online-editable (It only works with text).
Now you have a nice looking iOS App Website with realistic looking photos(:.
Disclaimer: I build this for an educational project. I tried to not violate any copyright – and I don’t think i did. If you build anything for an commercial project you have to care deeply about copyrights!