The home page

The design mockup

The tools I use to mockup

When I start a project, I like to start with the design mock up. For several reasons: it helps to see the project out of the box. I mean, it’s better than setting up the architecture or the database because you may miss something that a quick feedback on your mockup can bring.

There are a lot of way to mockup your app. You can use software such as Photoshop or Gimp. I feel better with Power Point or Balsamic Mockup. Yea, I really think you can do a nice mock up with Power Point. Even more once you downloaded some package given by Microsoft which contains a lot of control and icons ready to use. When I realize a mockup, I don’t focus on the final design. The screen I design are a cross between wire frames and final screens. If you spend more than an hour designing a screen, you are probably doing it wrong: don’t spend too much time because it can be a waste. The simpler your mockup are, the more understandable your app will be.

Balsamic Mockup is an amazing software I discovered 5 years ago. I felt in love with the look & feel of the result. It’s also easy to customize and to set up.

SDF mock up

You can click on the image below to open them in a new tab in full screen.

The “home” & “menu” page:
As you can see, the home page will be light. I also add some info on the kind of animation I would like to add.

1 - Home, menu

The “around me” page:
This page will be the core of the app. It is where user will perform actions like reporting if a homeless people is still at the same spot, if he has cover, foods or something like that.

2 - Around me

The “my activities” page:
The page where the users will see the summary of their reports.

3 - My activities

The “wall of fame” page:
A page that shows who help a lot.

4 - Hall of fame

The “about” page:
A page where I will put every other information. I still don’t know what it will say.

5 - About

 

Notice that I still don’t have the app icon. It’s something that can wait. I will focus on the application icon once it will be mature enough.
I don’t see the point of making an icon if you don’t develop and publish the app. I already made this mistake: I spend few days on the icon, the name of the app, the splash screen but I never ended this project. It was a waste of time: it would have been smarter to spend those time somewhere else.

Hardware and software for development

If you want to develop application for smartphones, you will need some hardware and software to start working.

Here is what I use to build native application for iOS, Android and Windows Phone.

Hardware

> iMac 27″ : required to compile iOS application, enough powerful to have a VM with Windows working well
> iPod Touch 5 : try my apps on a real device at lower cost
> Galaxy Note I with a custom ROM which allows me to change the phone’s dpi and with Android 2.3 so I can still check that my apps works on old smartphone
> Nokia Lumia 930 : for Windows Phone application (and as my current phone)

Those devices allow me to test my app by myself on real devices. I feel like I develop faster by testing on a real device than the emulator because it builds faster.

Software

> Inkscape : I love SVG as much as XAML. That’s the main reason why I create most of my assets with it.
> Mamp : Apache, Php, MySQL.
> Visual Studio Code : a light editor with Visual Studio shortcuts. I tryed it because Notepad++ isn’t available on OS X.
> Xamarin Studio : the main EDI I use.
> AppceleratorStudio for Titanium development.
> Vivaldi as my main web browser & mainly Safari to inspect my HTML elements.
> MySQL WorkBench : to modelize and manage my database.
> OneDrive : to keep some files available from everywhere.
> FileZilla : to upload my files.
> Virtual Box : to launch a Windows 10 instance so I can work on iOS and Windows Phone app with Visual Studio at the same time.

Other tools

> Balsamiq Mockup
> LinqPad
> Notepad ++