HTML Resources

Mac OSX
Tincta 2.0 (purple octopus)
http://mr-fridge.de/software/tincta/

Windows Vista, Windows 7 or Windows 8
MetroTextual
http://singularlabs.com/software/metrotextual/get/

W3Schools (online lessons/practice/information)
http://www.w3schools.com/html/default.asp

HTML Book
HTML5: The Missing Manual Paperback
by Matthew MacDonald

Responsive Web Design Book
Responsive Web Design with HTML5 and CSS3 
by Ben Frain

Good article to read for this current project : ) via Diana Caragan

Sketching For Better Mobile Experiences

Mobile user experience design is maturing. One way to gauge this is to look at the tools at our disposal. Prototyping tools such as Balsamiq, Axure and Fireworks enable us to build wireframes and click-dummies, helping us to explain the targeted user experience. Cross-browser frameworks such as PhoneGap, Zurb Foundation and jQuery Mobile help us to create prototypes using the native languages of the Web: HTML, CSS and JavaScript.

http://uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/

Templates

Dimensions & PSD file

When designing your App, set up your canvas size to 1136 px by 640 px

Download the User Interface for the iPhone 5s iOS7 at the following page:
http://www.teehanlax.com/tools/ios7/

Extra Credit

Extra Credit Opportunity

Visit the Art Museum of South Texas and view the TAMUCC Department of Art Faculty Show, Corpus Pluralis. 

To get credit for your visit, take a “selfie” with one of your favorite pieces of the show and send it to me at nicholas.mcmillan@tamucc.edu before December 9th.

Sketch Templates

Four (4) sketches for each one of your five (5) concepts.

Download a PDF here… 

http://miketheindian.com/2012/09/28/iphone-5-wireframe-sketch-template/

Project 2 :: App

User Interface Design for iPhone App
Due Monday, November 18

If your UI even vaguely resembles an airplane cockpit, you’re doing it wrong.

— JOHN GRUBER

Objective

Create a user interface design for a new iPhone app.
Note: You are not creating a functional app.

Process

Part I

Choose a topic of interest from the following list:

• Wayfinding
• Medical/Personal Health
• Lifestyle
• Art

Part II

Develop a concept for a Smartphone application that is based on your area of interest. The application should simplify a process that is commonplace in your area of interest.

Part III

Research & writing the Creative Proposal (Due October 23)

Begin to research the specific area that interests you and write a creative brief (a plan of attack). Your creative brief should follow this outline and be no shorter than two full pages in length (not including the cover page):

1. Title Page with the name of the company, your name, date, course, semester, and instructor name.
2. For this section write a brief assessment that is approximately 150–200 words in length of the action that your application will attempt to simplify. 

• What is the activity?
• Is it specific or general?
• How has it historically been accomplished?
• Will people be inclined to switch to a new form of interaction?
• Who has done this type of action in the past?
• Does a specialist have to be present to complete the action?
• What does the future hold for this type of interest? How may it change?

3. What are the benefits of this app over existing technology or other resources?
4. Who is your target market? Age? Sex? Location?
5. What are some of the challenges that you might face when creating this application? 

Part IV (Due October 24)
Develop and sketch (pencil or pen) five (5) concepts. Each of these concepts should include at least four (4) separate screen shots of your application. Use the templates provided to you in class.

Part V
Form your sketches, class critique and other feedback, develop one of your concepts into a full interface for your application. You will need to design a minimum of twenty (20) screenshots to clearly communicate the function of your app.

Extra Credit

Extra Credit Opportunity/Replace your lowest quiz grade!!
Due October 21, 2013

Objective
Develop your own vision of the mobile interface based on your team’s desktop interface design. For this assignment to be considered complete, you need only to develop one screen design. Follow specifications below for your artwork.

Screen Dimensions (your canvas): 640×1136 pixels

Grade
This is an individual project and your final grade will replace your lowest graded quiz. 

The current mobile site can be seen in the picture attached to this post.