Demo: Mocking Up the Viking Blogger

Using Balsamiq to create the mockups for our demo app.

Scroll down...

Content

Resources

Comments

What is Viking Blogger?

Hopefully you got to see the previous demo video where we introduced the Viking Blogger application and worked through the first two phases of our design process -- Discovery and Strategy.

In case you haven't, the Viking Blogger is the demo app that we'll be building over the course of the prep work and during the intensive program at the Viking Code School. It's a full featured application based around allowing our Viking warriors to post text and photos from their travels and so their friends back home can view along.

We will start this application from the very beginning of the design phase and carry it through its production (with Ruby on Rails, JavaScript, HTML, CSS etc.) and eventual deployment on Heroku. Each week we'll cover a new portion of it so you'll get a taste for how a full application comes together and the specific design and coding techniques used to create it.

What We'll Cover Here

The demos below will cover mocking up several pages of the application as part of the Visual Design Phase of the Design process. We'll cover how we've placed elements on the page to achieve a useful layout and visual hierarchy before mocking up the application's Home and Post pages. We'll also discuss our typographical and color decisions.

For the actual mockup, we'll reference some of the decisions we made during the Strategy phase about what style of navbar and what kinds of interactions we'll need to pay attention to but we'll build the mockups from scratch.

The video is longer than the others (~33 mins) but that's because the mocking up in the middle is done in real time so you can see it in action and with commentary.

The Video

The Presentation Notes



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Tearing Down and Mocking up Facebook