Entry 2: Interface Design the Easy Way

header3

Once I was done with the project setup and had all the code in place, I started looking for out-of-the-box solutions for interface design.  There are countless options that work on iOS and I didn't plan to create something revolutionary for this product. The correct way to do this is through wireframes, UX studies followed by UI kits. Instead, for this side project, I looked around for preexisting solutions that are simple, intuitive and fun to use. Before I explain my choice, I need to write a bit about the app formerly known as Secret Stache. My goal is to create a simple gallery app with a passcode. Something to store private data without worrying that your friend, co-worker or your kid might see something you don't want them to see. I know we live in a very social world... but I love the idea of privacy and being able to easily manage our online life.

Core Features

  • Protect data with a passcode or a finger print.
  • Use the camera to take photos and videos and save it directly to the app.
  • Import images that are in the iOS Photo app.

Navigation

Now that we have a list of core features, lets get back to the interface. I was thinking about using a simple tab bar that sits at the bottom.

  • camera for photos and videos
  • settings
  • import assets from the iOS photo library
  • gallery to display all images on the app

The tab bar would be a natural choice, but I wanted to do something more interactive where the menu is hidden and doesn't take up any space on the screen when it isn't needed.  I frequently check cocoacontrols.com to see what people come up with.  I went through their list of tab bar menu controls and find something called DropMenu.  And here goes my first bummer: it wasn't on CocoaPods repository. Second bummer: the menu itself isn't responsive and doesn't adapt to interface changes very well. I decided to use it anyway. I can deal with the layout and make it more adaptable to interface changes. What I liked about this menu was that it is fun to use and doesn't overwhelm the user. The code was fairly simple to set up, too.

Security

My second decision was about the module responsible to keep the app secure. And here I really wanted to go with something that is on CocoaPods repository simply because if there are any security updates or changes to the code, I don't want to maintain it. I looked through cocoacontrols but I didn't find anything interesting. Then I researched on the CocoaPods website and found a few good candidates. The one that looked the most promising was SmileTouchID.  I installed it in my project and with a small initial setup it worked really well. At this point I'm pretty sure I'm gonna keep it.

Next Steps

There are at least three more modules I needed to find (or write from scratch). I was looking for something to import images into the project, a camera module that would be capable of taking pictures and recording videos and a gallery module to display images. I will write about my findings in the next post.

What I did: Find and integrate menu and set up all UIViewControllers for my subviews. Find and integrate a module that will be responsible for securing the app with a passcode. Research about all the possible camera modules and pickers to import assets from Photo library.

Time spent: 4 hours.

Total time spent on the project: 6 hours.

Thank you to Gregory Thielker for the photo for this article.