12 Aug Write a brief explanation of each UI element you used

Learning Goal: I’m working on a computer science question and need guidance to help me learn.

Using a modelling tool to build (simulate) an iOS mobile app that uses consumable web services. Here is a sample of what YOUR simulated interface should look like: iOS app layout.jpg .

Like with Android last week, there are two options for starting our iOS application – build the desired UI layout then code populate,OR build the code that will populate the UI layout (p. 194). For our assignment this week and simulating assignments we do for the remainder of this course, we use the former approach; we will model the mobile app interface (UI); that is, wireframe, and design components of the UI, then create a prototype from that model. I call this “simulation” because we don’t do the actual coding necessary to populate the layout or to make each UI element functional. Instead, we start with a UI layout that meets the Derby app in iOS requirements (p. 222).

A basic component in the “anatomy” of any iOS app is a VIEW. Views usually have UI elements (text fields, table fields, labels, buttons, etc.) that can be dragged and dropped onto a canvas then edited for size and position to simulate an interface. iPhone apps are made up of one or more such VIEWS. The xCode IDE and Swift code formatter is a full array of tools that allow developers to plan, build, code, and test/debug iOS applications. The storyboarding tools in the xCode IDE allows for side-by-side configuration of UI elements and auto generation of code.

For our project this week – Assignment 7, we will use a design tool (Figma) https://www.figma.com to simulate our iOS app interface. There are many wireframing tools like Figma that could be used for this purpose. Figma is an easy to learn and use tool that allows dragging and droppping icons, and other UI elements directly onto a frame/canvas which can be edited for size, shape, and position. Layout templates specifically for iPhone models and other devices are incorporated in Figma. And, the layout that is modeled in Figma can be exported to enviroments like xCode. Best of all, Figma is free to use for individuals and small teams. Here is a video that shows how to model iOS UI apps in Figma – http://www.youtube.com/watch?v=hb7Gvevu1UE. Coding examples and a generic explanations of UIs are provided in chapter 7 for each UI element used in the layout (TextView, Button, and TableLayout), but you ARE NOT required to implement any code for this assignment.

For this assignment (2 screen shots and explanations/descriptions of UI elements):

* Download and install Figma to our computer and create (simulate an iOS app layout (UI) that follow the sample above:

• First download and install Figma – https://www.figma.com (can use comparable SW of your choice). While in Figma, sketch (wireframe) with objects – like circles, rectangles, etc.. what your design should look like (See the hand-out on wireframing with Figma in this week’s Learning Materials section)

Make one screen shot here that shows you have installed the Figma wireframing tool (or a comparable tool of your choice) and done some modelling/wireframing

* You are ready to start adding UI elements for your iOS app matching the layout above as your guide.

• While in Figma, choose an iPhone template to match the sample layout that you are simulating
• Convert your modeled objects to desired UI elements (Buttons, Views,Textviews, etc.); carefully size and position these UI elements – create a mock iOS interface that follows the example iOS app layout above. (the video above should help)

* You ARE NOT required to implement any code for this assignment. 

Make a second screen shot here that shows the final placement of the UI elements on an iPhone template. Except for coding, this is your prototype iOS app.

Write a brief explanation of each UI element you used – try to explain what specific function each UI element provide that make your app workable, Even though you are doing NO Coding, be certain to discuss the basic functions of native iOS apps (plist, core data, GPS, etc); explain how these are used in iOS apps (pp. 222-227). Understanding that this is only one screen of your iOS app, describe/explain 4 principles of mobile interface design that is employed in your iOS app.

Please make sure to include these:
our third screenshot must be a prototype derived from that modelling,
explain EACH UI element used in YOUR app
have a reference list -at the minimum should cite and reference our textbook. (Title: Professional Mobile Application Development

ISBN: 9781118203903

Authors: Jeff McWherter, Scott Gowell

Publisher: John Wiley & Sons

Publication Date: 2012-09-04

)