January 15, 2019

CityApper Mockup

In our last installment of CityApper we were sketching a logo. In this round, we use the same tool, InkScape, to sketch a layout. It was recursive starting with the box on the Services page and menu bar. Then thinking through the services that I could offer. Then when the mockup was done, I copied it whole-sale to the Labs page. I toggle the bold to indicate a selection, and made the document have 2x the width. I then built the Labs page. Same process for additional pages. None of this was screencasted.

I did a screencast that took about 2 hours to convert the wire frame to HTML using our blog engine of choice Cryogen.

Here are the screens:

Services page mockupLabs page mockupSchool page mockup

Tags: illustration biz tech