Web Design Practice for Tokyo Marathon 2016

Oct 7, 2015. | By: Dongmei Hu

I am a long distance runner and keen to participate in the Tokyo Marathon in 2016. When registrering online, I found it quite difficult to navigate through the website, and the web design was quite outdated. So I have re-designed the site as my own practice.


Low-fidelity Mockup


Mockup with paper and pencil help build prototypes rapidly.

Low fidelity mockup is essential in the initial design stage. This allows me to focus on the component and information archtecture, and frees me from details like colors, typefaces and font sizes. Mockup using pencil and paper is the cheapest method. I have drawn design elements on pieces of papers so that each element can be re-positioned to form another possible layout and structure.


Wireframing


Wireframing with Ominigraffle

Further prototyping with wrieframing tools Omnigraffle allows me to take a detailed look at the scale, position and typography. In this stage, I have used the actural words instead of Lorem Lpsum so I could exam whether the box size is big enough and try out different typefaces.

The earlier actual content is introduced, the better prototyping we could have.

 

High-fidelity Mockup with Photoshop


Photoshop, Illustrator and Sketch are popular mockup tools among designers. They are very powerful and allows me to adjust the content position pixel by pixel, and the tiniest difference between two colors. They are so powerful with so many functions that it is time consuming to use. Also, it takes further efforts for further editting and modification.

Mocup for Tokyo Marathon 2016 with Photoshop

ALternatively, lots of other applications like Foundation and inVision amd online tools like Moqups.com provide a more economic way to build nice and interactive mockup rapidly by providing highly usable templates.

 

Responsive Mockup with inVision


inVision helps build rapid high-fidelity mockup. After uploading the design files, I quickly added animations, gestures and transitions so the static Photoshop design is transformed into clickable and interactive prototypes.

Responsive prototypes on inVision

With the inVision’s “layer comps” feature, creating alternate scenes and managing data beceomes more handy in Photoshop. All we need are three symbols:

  • Asterisk (*): to create global elements
  • Ampersand (&): to create alternate screens
  • Suffix after a layter for images (.png): to export indivisual assets

Around the web


© 2016 All Rights Reserved.