Week 10A

Shift from UI design to Desktop Experience

In Class: 

Our class is now shifting from UI mobile design to UX Desktop experience for web design. With all design there are constraints such as weight, dimensions, time, materials, cost and function. Constraints are everywhere. For web design the normal document flow is top to bottom in html and to create a layout we use css by floating elements.

For our studies we will be 30% designing the site, 20% thinking about the front end development which has to deal with html, css, optimizing images and more. Finally we will be 50% UX developing. The UX developer are more computer science majors who deal with the flow, user, wireframes, sitemaps and the overall experience. In most job settings we will be place in either one or two spots but for the project we must think about the over all design and function of the page. 

For the most part, I have basic understanding of html and css and feel comfortable using both. My strength is problem solving when it comes to the code and have an easy time reading the format and knowing where things go within the code. The first few weeks will be review but I think this will benefit me because it helps me remember things I may have forgotten from the last time I use html and css. 

We started working with a basic exercises in class which are the photos below.

Homework: 

Assignment-  To create a static webpage explaining a dream vacation and things about the vacation that may go on and how to get to the destination. This static layout means the flow goes from top to bottom.
I felt this was a nice refresher because I got to practice in-style design in html. Some things I had to look up by using www.w3schools.com and previous assignments I worked on, were the hover on and hover off for images, line heights by using em's and how to create a wrapper for the body copy instead of having a long string of content run across the page.

Reading: Above the Fold

Chapter 1: Web Site Planning  (Reflection)

Before you are able to start design for a website you must plan out what the function of the site will be. In short terms the site planning is taking the client's goals and business needs and align them with the target user group. It helps to map out the site first by thinking it as the big picture to accomplish the mail goals of the webpage. This chapter focused on getting the functionality of the site solid by using assent inventory which is the logos, copywriting, imagery that can all be collected by spread sheets. Some things I learned were that you can never use spaces in files names because other servers may not pick up on it and the file names must all be in lowercase. Another little fact that I didn't know about was that your suppose to keep the navigation bar to no more than 7 items or the user creates them into subcategories. Other ways to start laying out the function of a page is by information architecture the underpainting of a layout. The next steps are creating a sitemap for showing linked pages and their relationship. After that we move to the wireframes which illustrates a blueprint map of each individual page with the important elements. Each one of theses steps are a way to fine tool all the little details. After wireframes usability diagrams are used to show the flow a user may take. Prototyping is a major portion because it helps the developer fix all the bugs with trial and error. After prototyping is when you can really start designing. Concept designs are similar to mood boards to start and understand the clients goals in a creative way. Imagergy, iconography, color, texture and typography can be used to illustrate the client goals. The last two things that the chapter talks about are style tiles/element collages and metaphors or the inferences to show the user clickable items to better understand the content with the design of the site.

I really enjoy reading this book because it's very informational and I feel like everything is very clear and to the point. 

Week 9- Outside of Class 2

Later on Sunday Night

Thankfully Quan had the file of the code saved on his flash drive and we were luckily able to get most of the web portion done. What we got done was the photos of the students and the montage on the about us page. What we couldn't get done because of the server problems was getting each students blurps and their full names.

Week 9- Outside of Class

Homework Requirements for the Weekend

Group #1: Web

For this portion of the project we have 3 students working on the web portion. We split up the work by having Kristyn and Quan edit the photos that were taken of all the students and I was in charge of combining the montage photos from last years conference into some type of image gallery to be placed onto the About us Page and then on Sunday we would combine our stuff and place it into the code as well as place each person's descriptions under the team photos.

ISSUE: 
We have a slight dilemma that doesn't allow us to finish our portion of the assignment. The art server where the code for the website and images are all saved onto the server and there is no way of retrieving this information because none of us were aware or thought we need to save the website code, images or student blurbs because we were going to finish it come Sunday night.  


Group #2: Speakers

My speaker is Melissa Zane and for homework we were required to create a prompt that explains a little bit about Melissa and her work before we talks in front of the conference. This prompt is suppose to be in our own words with correct information about her.

Hello everyone,

Today we have Melissa Zane speaking on behalf of us today.

Melissa received her undergraduate degree in Communication Design from Kutztown University and her MFA from the Academy of Art University. She is now the Vice President and Director of Creative Services at Godfrey. Melissa joined Godfrey in 1996 as a designer and later worked her way up to be promoted to art director, then senior art director, manager of the art directors, director of operations and then finally where she is today as the director of creative services. Melissa provides creative and operational leadership in her career. And in her road to success Melissa balances a passion for learning with her ability to see a vision and carry it through, constantly drawing on her practical experiences and strong creative background.

Thank you and I hope you enjoy listening about Melissa Zane's experiences.

Week 9B

On Thursday we spent most of our time going over what each group we be taking care of for the Interdisciplinary Interaction Design Conference (IIDC). For the conference I am placed in two groups, the first group being the speakers and second for the web. In the Web group we are required to create a montage / image gallery of the photos from last years event and place it onto the about us page. And secondly we are required to place photos of all the class onto the Team page and place everyone's 30 word self descriptions under each photo. For the speakers we are required to introduce our conference speaker that we are assigned to. My speaker that I am in charge of is Melissa Zane.

Week 9A

Presentations

For our presentation we stay right under the 10 minute mark at 9 minutes and 50 seconds. After we gave our presentation to the class we received some feedback from the class. When they started to use our app most students got stuck at the loading page and that was our fault for mistakingly making the page a double tap instead of a singe click to move to the next page. As for other feedback we found that our fixed widths were working on some pages and not other and we should re-look into that. One last thing the group said we should change and I didn't agree with was that our app had too much information. But because our app add so much information I think we successfully created a design to minimize the appearance that we had a lot of content.

Some positive feedback we received was that the side bar navigation was working very nicely and the effect worked seamlessly. Other features the group like was how consistent we stayed with the flat design of our app and all the colors were being balanced well throughout the page.  The group found that are large target areas help navigate through the pages easier.

Week 8- Outside of Class

By the end of the project it felt as if I was doing more work because Marc started to have other commitments. Unfortunately this wasn't 100% fair to me because I have already put in a lot of the work from the beginning and I was also very busy these last two weeks. But the project is finished and I am very happy with our end result. Overall I think our app has created a realistic functional and professional looking app. We based our design off of the flat design. Ideally, I would like to see this app as a fully functioning app to split roommates bills because its very useful and I know a lot of students and friends that would use something like this.

You can view our app at:

http://marvl.in/7309ji

Here is all 19 final screens for Splitmate

For the presentation it was mostly up to me to complete and Marc was only able to help out on 3-4 slides. 

Splitmate Presentation

Week 8B

Today was more of an in class work time because our group was more on the unprepared side because I had spent so much time working on the prototype in Marvel App. So much of my time was wasted because the app wasn't working and the gestures that were give in Marvel App became dead pages and weren't linking right and you would get stuck in the walk through. Because I spend so much time finishing more of the screens we were left with no presentation to show Professor Pannafino.

In class we started working on finalizing the screens and start working on the presentation. Some of the screens we have below is the concept of our app, one of the personas and the drawn wireframes.

After we had our work time, groups within the class had a small critique of the prototype in our marvel app. The only problem was we could show that much because we were having so many problems with the dead ends but we were able to show the app on the computer. 

Week 8A

Fall Break - No Class

Week 7- Outside of class

Over the long weekend I worked on more screens for the marvel app. But I was having troubles making most of the gestures work on the app. They use to work and now the slide gestures aren't working anymore which makes it difficult to use my app so I am concerned about this.

Week 7B

In class we worked on moving our screens on to the marvel app which is a prototyping app for color screens that does the same function as POP with the hotspots and gestures. Marvel just has a few more features to make it really functioning. For example they have scrolling features and you just have to change the fixed footer so the content is scrollable.

Most of the notes we got from our classmates were that they liked the colors and the app was working nicely. But it was just hard to work because the app is designed for the iPhone 5 and it was displayed on a 4.

Week 7A

In class:

We had another mini-critique on our colored 3 screens and from our notes we were given feedback that they liked our clean design and the colors were working nicely. Although some concern areas were the boxes where the check marks are placeholders. The icons at the bottom were to be redesigned and just placement of text. When we met with our professor some advice he gave us was to rethink our generic typeface and use web typefaces off of google web fonts and rethink general placement of body copy and hierarchy of repeated colors. He also thought our photos we need to actually get photos and change the shape to a circle to make our app more modern and break up all the square grids that our app is showing.

From our notes we made a lot of changes and tried to meet the needs of all our our classmates advice. Personally, I feel like this is working way better and actually looks like a professional flat design application. 

After Class on Monday

For the next step we are creating a case study or presentation about the process of our app. We were only assigned to do 3 slides. The slides we chose to do was the (process of the app icon, detailed flowchart, and three final app screens).

Week 6 Outside of Class

iOS 7 Icon Template

For this part of the homework I was a little confused because the radial of the curved edges were suppose to be 13.5 pixels but when I place my icon on all the template areas it was way different and the edges don't line up correctly. Plan to ask professor about this!

3 Colored Screen Designs

The three screens we choose to complete were the navigation (hamburger bar), the profile page and also the home page. 

REVISED FLOWCHART!!!

Week 6B

What was due:
For class we were suppose to have one icon loaded onto our phones but after I loaded my first version with all the gradients I didn't like the way it looked on the phone. So I tried a couple different versions until I changed it to flat design. After a few more tries I think the best working on was the flat design icon with blue and black with the white outline.

 In Class Critique:
we got to show everyone our designs and everyone got to place their feed back about our apps. After looking through all the critiques most people leaned for the black and blue flat design. Marc had a few designs but the split person made more sense.

After the critique we went back to finalize our design. We got rid of the outline and the background colors so now there is just two people and one background color. We also changed the blue color slightly and added yellow and we really think this makes our app pop and when we go to design our app we will be able to incorporate that pop color on top of the blue and black shades.