Creating an iOS app. From idea to result
It all started with the fact that I looked around and, not seeing the car of my dreams,
Ferdinand Porsche decided to construct it
Hi, Habr. I want to tell you how I created my first iOS application and what came of it.
The idea for the application came about by itself: create something that you would enjoy using it yourself. I keep writing notes. After all, every busy person has a certain set of facts that he receives during the day, and which are worth remembering. And since all people forget (and this is normal!), There is no better solution than just writing down. All the time I felt some inconvenience when working with the application-annotator applications presented in the AppStore. Excessive management complexity, the presence of unnecessary categories, a pile of additional information - all this prevents the application from performing its main function. Plus, many of these things just look ugly.
Therefore, putting all the bets on simplicity and convenience, I proceeded to create a concept. Application model with a single list of notes. All in one place, what could be easier? If something is of great value or relevance, it is not necessary to put a label on it, because it is enough to simply move a more important note to the top of the list. Old and unnecessary entries will gradually go down and subsequently deleted by the user.
After the concept was invented, I wrote out the main functionality - the things that I would like to focus on in management:
- One main list for all notes;
- All actions with a note should be performed in one motion - create, edit, delete, select, move to the top and share;
- The ability to easily share notes on Facebook, Twitter, copy or send by email;
- Highlighting notes in several colors, depending on priority and urgency;
- Convenient editing in portrait and landscape orientation;
- Day and night themes for convenient work at any time
Quite standard functionality for this kind of application, agree. But this is only the tip of the iceberg, the devil is in the details.
Before writing code in Xcode, I completely recreated the look of the application in the vector Sketch editor. This program is great for quickly creating layouts. A lot of plugins are available for this application, among them there is Sketch Preview - view the artboard immediately on the device through the Skala Preview program. All you need to do is download the free Skala Preview programs to your computer and mobile device and install the plugin. After that, select the desired artboard, press the Command + P combination and after a second the appearance of the application is broadcast to the device.
In addition, the application is very convenient to create screenshots for publication in the AppStore. For each screen size, its own set of artboards was created, along with the use of styles, the time spent on formatting is minimal. But about the publication a little later.
In the application, I used only two controllers - one directly for all-all-all notes, the other - to display a small tutorial on the first start. I organized the work with the database using the CoreData framework.
After creating the basic functionality (creating, deleting, editing notes), I decided to improve each of these functions.
Agree, text editing in iOS is implemented quite inconveniently. If you make a mistake in the word, to move the cursor to the desired position, you need to touch and without removing your finger from the screen, try to get into the selected area. In addition, after fixing the error, you need to return the cursor back to the end of the line. In my application, I decided to revise the cursor movement mechanism: in order to make a change to a word, you just need to swipe in the area between the keyboard and the typed phrase without blocking the overview of the text.
I decided to implement the removal and moving to the top animations myself, and visual support as close as possible to real life. Something has gained a higher priority - swipe to the right and the note moves to the top of the list. To delete - swipe to the left and the strikethrough animation will show how much more you need to extend the swipe to complete the deletion. If you accidentally delete it, you just need to shake the device (“Shake”), and the note will return to its original place.
In order to highlight the note, I used LongTapGesture and the three primary colors of the application - white, blue and red, which formed the main color palette.
To share notes from the application, I added an additional lower bar, for the appearance of which you need to make a swipe from under the bottom edge of the device (Bottom Edge Swipe). The sharing panel contains all the most important actions - posting to Facebook or Twitter, sending a list of notes by e-mail, or just copying for future use. The mechanism is very simple - you need to select the necessary entries, after - click on the desired function. If you need to return to normal mode - swipe along the bar, but already down.
I decided to make the transition between day and night themes automatic - why hasn't anyone thought of changing the appearance depending on the position of the sun in the sky? Everything is very simple - after dark and after sunrise the theme changes, while the user does not need to be distracted from creating notes, because the application will always automatically adjust to the surrounding conditions.
The name of the application is the most important part during development, this is the first thing that the user sees in the store. On a habr there is an excellent article on this subject. I decided to approach the selection of the name thoroughly: for a start, I went over the list of 1000 most popular words in English and wrote out all kinds of combinations that would be suitable for the name of the mobile application for notes, besides I wanted to keep within 8-10 characters. But at the same time I did not want to choose the name SuperNotes or NotesPlus etc, I wanted something new. I liked the combination of mad note , which I stumbled upon in the Urban Dictionary:
mad note - excellent, entertaining, surprising, unexpected or awe-inspiring
The slogan immediately appeared: MadNotes - Note your passion. Since the palette of primary colors I was already ready (white, blue, red), I decided to immediately come up with a suitable icon. The situation with logos for applications of this kind is deplorable:
Since notes on paper are written with a pencil or pen, I decided to display this on the icon - a pencil rotated at an angle of 45 degrees. It turned out like this:
Since the project was originally conceived as a designer, I decided to participate with my application in the all-Ukrainian competition Ukrainian Design Awards: The Very Best Of in the category Digital Design. There were several weeks before the contest, during which time I managed to publish on Behance, where I visually showed all the main functions of the application, and also recorded a video preview.
Since the winners of the competition were not disclosed until the very last moment, it was incredibly nice to see their work at the exhibition of the winners' works - the jury saw and appreciated the main concept - a minimalistic and, at the same time, functional application for taking notes.
The application has been in the AppStore for several months, during which time I made six updates and rewrote the code in Swift. In the latest version (1.2), synchronization with iCloud was added, so that the notes had already managed to move to the cloud.
Thank you attention.
Note your passion