Creating an iOS app from Scratch: Day 3

I know its been a few days, sorry been busy with other projects. Ok now that we are past that where did we last leave off? I think we are working on the Cart page.


Ok so we are thinking about 2 text tables, a menu and two buttons. One being a FAB to add and item and one a raised one to select a date. Let’s create those and see where it takes us. Ok so first we need to see where the text fields should be. Well the header goes to about 80 so on an iPhone 5 we have 568 total pixels. I say iPhone 5 because thats the oldest iPhone people that I know have. So we have the 568 dp the keyboard is 253 dp and the header is 80 dp so that leaves us with 235 dp to work with.

Dp (Density-independent pixels)

“Density independence” refers to the uniform display of UI elements on screens with different densities.
Density-independent pixels (pronounced “dips”) are flexible units that scale to uniform dimensions on any screen. When developing an Android application, use dp to display elements uniformly on screens with different densities.

I don’t think that the raised button will be as tall as the FAB so let’s say that FAB is going to be 56 dp. It will need a little padding above the keyboard so we will say 72 dp. For now on I am leaving out the “dp” part. Ok so now we are down to 163. No we are going to have 2 rows of text fields so that will be 144 leaving us with 19 for padding. Let’s jump into sketch. Ok after laying out all the elements this is what we get.

I mean it looks alright but when I put it on a larger device I just hate it! Ok let’s think. What do I like about the Material Design text fields? I really just like the floating label, let’s keep the floating label. I remember Airbnb does a cool thing with guest count in their app, let’s look at that.

Image from Airbnb iOS app.

I am talking about the “1”. I like that so let’s roll with that and the floating label for the item name. Ok so will definitely need a text field for the item name. We are going to try just a floating label but no bottom line. I will use the Airbnb type button for the amount but it will also need to take half numbers because what if a user gets 1/2 a gallon of milk or 3/4 cup of flour. Let’s add those and see where we are at.

Still needs a little work but we are getting somewhere. Also I tried font Google recommends Roboto Regular 16 but after some testing I like Roboto Medium with a 32 pt font. Also the buttons are 36 dp in diameter with “Add” and “Remove” from the “Content” section. I also tried the “Add-Cirlce-Outline” & “Remove-Circle-Outline” and those just didn’t…at first! But after some trial and error I have decided that is what I am going to go with. Now I need to add a drop down menu for the type of container that the item comes in. An examples would be “Gallon” well, the more I think about it I don’t like that because we would get 1 avocado not 1 gallon of avocados or 1 whatever you call it of avocados. Now since we just got rid of that all we have left is “Date” to take care of. Also that will leave us with 4 total items so we can have a Grid of items. Amount and the FAB will be on the second level and the date and item name will be on the top. Let’s look at that on a iPhone 5. Ok so this is where we are at.

RRR! Now I am stuck. Do I want to put the date below the item name or on the right of the item name. Ok so I lowered the amount section to add some space. Then I added the date which will just be a text field. I also raised the FAB just to level things out. Here is what we have.

I don’t love it but I do like it. This is what we will roll with as the MVP (Minimum Viable Product). Ok now we are done with this. Let’s call it a day. Next time.

  1. Search
  2. Sign in pages