Designing iOS Apps With Sketch 3

Last week, I had the pleasure of using Sketch 3 to redesign the UI of an app we’re building inside the Objective C App course (No longer offered. New course here).

I hadn’t planned to redesign it, but after reading Meng To’s book, Design+Code, I became inspired to do better.

Additionally, I was quite a beginner with Sketch and wanted to take this opportunity to get familiar with it. By the way, Meng is an excellent designer/developer and is a prominent figure in the Sketch community. I’d recommend his book if you’re keen on learning principles of app design!

The book gave me a jump start with using Sketch, especially the shortcuts and iOS specific workflows. I came up with this over an evening and an afternoon:

New Objective C Trainer App Design

Menu Sketch Redesign
Multiple Choice Sketch Redesign
Fill in the Blank Sketch Redesign
Find the Error Sketch Redesign

Original Objective C Trainer App Design

And now, compare it to the original app design that I had made with Photoshop. (Not to say that using Photoshop or Sketch made the difference but rather, it was in the design principles and iteration that made the new designs better)

Objective C Trainer Menu Screen Design Composite

Objective C Trainer Question Screen Design Composite

Sketch iOS Design Process Video

Quite a difference between the original design and the new design right?

I recorded a process video of how I created the new app design in Sketch 3 and released it in my course.

I also took that same course lesson and adapted it for YouTube which you can see here:

Hope this is helpful for you guys and inspires non-designers to learn some app design principles!

11 Comments

  1. I need to learn iOS app design for iPhone and iPad using Sketch.
    Do you have a course package that teaches design and also teach coding for iOS in Swift (Xcode)?

    Reply
  2. Hi Chris, first of all I’m very excited to be following your website and to say that my app will released soon and I can say that MOST of it was built from the knowledgement. You are such an inspirational person.
    I love sketch “tools”, however, I couldn’t find any tool to animate transictions in my designs and preview them quickly. Would you have anything to recommend, please?

    Again, thank you very much for dedicating your time helping people.

    Regards,

    Ed

    Reply
  3. Chris, thanks for this writeup! I am a Fireworks guy, but I have purchased Sketch 3 and will be looking forward to learning it moving forward, especially since Fireworks has been discontinued from Adobe!

    Reply
  4. Hi Chris,
    Is the app you’ve created here actually available on the app store? Or is it just an example app? I’d be interested in taking a look if it is on app store.
    Thanks,
    James

    Reply

Leave a Comment

26 Shares
Share
Tweet
Pin
Share
Buffer