Week 4- Outside of Class

Readings:

IID Book:

Controls- Are used within interfaces to allow the user to change adjust or manipulate the interface content. Some examples are action based, selection based, input based and display based. Each one has a different function.

Design Constraints- Design Constraints help form the scope of the project and if you don't follow the constraints then you may run into bad design or higher project costs. For example using two ink colors over 10 will make your site cheaper.

Design Patterns- Are the patterns of the site that go beyond style and visual repetition. But they are the solutions that have a working function to better the functionality of the user experience.

Multi-Touch Gestures- Some gestures that you use with your hands operate and move function of the screen using touch are tapping, pressing/holding, scrolling, pinch (zoom in/out), swipe and rotate.

Wireframes- Is an example of prototyping by using what looks like a blueprint to show content hierarchy rather than styling the elements.

Mobile First

Chapter 4- Organization-   This chapter talked about how organizing your content and placement of each section can affect where and when personas view the app. If they are trying to get from A to B but C is bigger in hierarchy then the user will go to C and mess up the whole process. Hierarchy of information really becomes important as well as the colors that are either matched and or contrasting. This chapter all talked about the function and some phones by not have the same functions as another phone so you need to know the target audience your appealing for.

Chapter 5- Actions- This chapter talked about the reach function of the user if they are using multiple fingers or just one. This also depends if the user is right or left handed. They talk about all the different functions you can do with your fingers with either two hands or just one hand. It's smart to map out what functions will happen in your site or it will become to busy and hand demanding.

Medium.com

What's in your pencil case? - This article talks about how sketching is important because you come up with more design ideas rather than going start onto the web. You are more flexible when it comes to pen and paper rather than the web. But if you have a good idea on paper and aren't sure how to produce it on to the web then you can make changes. It also allows you to see the wrong designs before diving too deep into your app design. It goes over how the design on paper do not have to be beautiful it just has to be clear. For example the little text doesn't need to be written out letter by letter it can just have a placeholder of lines to show the viewer giving you feedback that there will be content in that place.


Content:
This is the information of what will be on each page of the app

Log in/Register Screen

Register Screen

Series of pages that have a next (action) function and will end with a submit button to activate

Screen name/email/password

Honesty Act

Basic Demographic info

Select how many roommates

Sync roommate screennames

Home:

Profile Photo

Name/amount due for month

Roommates and amount they owe

Personal Profile:

Photo

Name/info

Total amount due for month

Rent cost

Utilities cost

Calendar:

Dates represented with calendar

Current date

Date rent is due

Set reminders

Settings:

Edit Info

Calendar Settings

Edit Roomates

Notification Settings

Roommate Profile:

Name/Info/Pic

Total Amount they owe this month

Rent Cost

Utilities Cost

Send personal reminders

Amount they owe you, Amount you owe them


Wireframes

This portion of the project is all about prototyping and drawing out what you believe the app will look like and see if what your drawing is really mapping out to the next page and your capable of getting to the previous page by using the back function or using the navigation bar or also known as the hamburger. 

Wireframes that I made: (mostly the register page and a little of the app)

Wireframes that Marc made: