Week10- Outside of Class

Web Team: Interdisciplinary Interaction Design Conference

For our portion of the class, we were required to add in the montage image of photos form last years conference into the about page and add everyones photos and blurts to the team page. The things I fixed from the previous montage photo I created was the line width between each photo and got rid of the outside border and just exported it as a .png so the background color of the webpage would show through the images. We accomplished the image to be responsive. My other teammates worked on the images and making the optimizing of the photos to the right size so the loading time wouldn't be too long. After looking at the page I thought everyone's name was getting washed out so I thought it would look nice he we bolded everyone's name so it was each to recognize.

We

Week 10B

In class we started reviewing over css or (cascading style sheets). Something I forgot was the different forms that are used with css. The three forms are inline, embedded, and external. Once I heard the names I remember their function in an html page. We will always be using external styles to identify the content in html by using syntax notation. You can identify each selector with either class or id tags. The last thing we reviewed before jumping into the code was the margin, padding, and borders that go around the content. Below is the page we worked on in class. 

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.