Week 10B

Today in class we took notes on Cognitive Load Theory, Miller's Magic Number, Hick's Law, Fitt's Law, and chunking. I learned that choice based systems are not necessarily bad, they just need to have successful hierarchy so the user does not become frustrated.

Also today I committed to the Lorem Ipsum project instead of zen garden. I decided that I am going to try to create colorguard ipsum. Color guard is a large part of my life that I have yet to include anything about in my portfolio so I feel this could become a good addition.

For next class we are creating an element collage and I am looking into types of scrolling and what is possible.

Week 10A

During class I took notes on entry point and view point. We learned more about markup language and created a test page as a class. Near the end of class we learned about the new project options and my group went to the middle room. We got to mind map out ideas for a few of my group members. I do not know what project I want to do and I'm going to continue to brainstorm for next class.

Week 9 Out Of Class

The notes I took for the Above the Fold chapter 1 include:

Factors that effect screen appearance:

color depth:the # of colors that a monitor is able to display (really not an issue anymore)
monitor resolution: # of pixels when measured horizontally and vertically
Operating System: type of computer and this can effect how browsers and type looks
Browser Type: function is to receive layout and styling information from a host and display that information on screen.

Week 9B

Today we finished up presentations and I showed the class the completed animation of the motion graphic. Overall I felt people liked it but I was able to receive some good feedback.

• The device section seemed to happen a little too fast
• I am going to go back in and slow it down so it can take up some of the visual rest that follows it.
• There may be a name mispronounced in the audio and it was felt that the information at the end should be spoken
• I plan to talk to the peer that I got to do the voiceover ASAP about these changes and hopefully he can rerecord it quickly
• The words fly in too fast during the discipline section
• after this feedback I am going to try to re address that whole section to make it work and read better, for example maybe start with all the words on the screen then highlight them and have them move towards the center than fade.

At the end of class we took some notes on code and received reading assignments.

Week 9A

Today in class I presented my design brief. I went over the five minute mark but overall received positive feedback from the class.

Over the last few weeks I have been working on bringing to life the storyboard I created for the conference motion. It took a while to get started because I could only do so much/ go so far without the voiceover. I prefer to work with the audio so I can have the motion synced from the beginning, not have to back track. After receiving the audio over fall break I got to work.

Below are some mid motion screen shots of what my screen looks like while I work.

Characters changing into keys

Image being clickable as the segway into the arrow

Clock changing time

device changing screens

That is about how far I got over break, up to the animation of the device section. This is about 12 seconds and 14 frames into the piece. These sections are the parts that took the longest to do because they involved the most animation. They were not completely clean at this point but they were in the document to be tweaked.

I was able to clean up those animations once back at school and continued work. Next I worked on the second have of the motion which is more text based.

All of the different disciplines flying in to make up interaction design.

One of the speaker's names spinning in (Robert Deraco)

The final frame, date and location of event. The motion stops here; I opted not to fade out in case the viewer wanted to write any of the information down.

This section went by, what it feels like to be a lot faster. The motion, as it stands now, is 42 seconds. I am very happy with how it has turned out so far, the only thing it may be lacking is a music track in the background of some kind. That is something that is up for debated and that I'd like to discussed with others. The video is too long to post directly to blogger.

Out of Class: Design Brief and Final Visual Designs

Design Brief
Over the weekend I completed the final few pages of my Journey Owl design brief.

 I also vectorized my flowchart which can be seen in the above layout. 

Above and below are the wireframe layouts I created which discuss how I did not use color so as to not draw focus away from the layouts but I did include content so peers could understand the functions

Above and below and the final visual layout spreads. I will discuss more about how these were completed later in this post.

 In the conclusion section I just wrote up a short summary about the main sections explaining what I did. I did not feel the need to include a visual because everything I mentioned was already shown elsewhere in the brief. No picture also works because I did not include one below in the About the Designer section because I did not feel that a picture of me was essential to the design. I included information about myself like my hometown in the layout below.

Final Visual Designs (interfaces)

With the feedback I received I made adjustments to my designs since last class. 

 Above are the My Week screen (home screen), My Week with the side bar, and the My Day screen.

Below are the add an event, my day with the side bar and the share screens.

One of the things that changed that I have been struggling with is the sidebar menu. I have tried many colors for the background and nothing was working well with the rest of the layout. Finally, after deleting a color and seeing the actual background as the background it looked good, the icon popped more. So I added a low opacity black rectangle behind it to slightly set it apart from the background and I feel that it is working a lot better with the rest of the layout than before.

To add more color to the layout and help with readability, on the My Day page I changed the top day rectangle to green. This helped to fix a lot of issues; it sets it apart so it does not look like an event, switching the text to white because of it helps readability and it adds that pop of color.

The other main change was on the events page. Instead of having a keyboard at the bottom half of the screen there is a selection scroll because it makes a lot more sense for the interface, everything was selections, nothing needed to be typed. I included the colored circles on the scroll to help show the different and their point on the my day page.

Week 8B

Today in class we did a round robin critique of the interface design. This is what my screen looked like;

One of my files is currently not working right (which has half of my screens of it) so I opened all of my screenshots in preview instead.

The feedback I received was that the designs are clean and simple and speak to my audience. The other feedback I received spoke to color scheme, that it may be too dull/ something more could be done. I completely agree with this. After looking at it for so long I do feel that it needs more green or something to pop a little more/ make it more lively and the sidebar color my still need some help.

During class I worked on my design brief.

 First I scanned in my list I brainstormed for my app name and added to the app name page so it would have a visual.

 Next I created the content for my digital sketching page and played with the original illustrator document I sketched in so it would fit within the layout. I think it still needs some tweaking but all of the elements are there.

 The last page I worked on during class was the final icon page. I created the content then I decided that I want to include the icon at multiple sizes to show how it still works. I am still working on placement for them.

Since this is the final icon (with a different background) also during class I spent time resizing it in the right template.

Week 7 Out Of Class

Over fall break I created all six of my interface screens in photoshop. Below are the screenshots from my laptop.

 This is my home screen "My week". The main change I did was making all of the boxes larger, making the gutters more consistent. Making the boxes larger forces the week not to fit, which signals to the user that they have the ability to scroll through multiple days, not just one week. (wednesday is suppose to be 15 not 17). I redid the color of the sidebar. I was trying to make it look more like ios 7 by having a lighter opacity and brighter colors.

I chose to stay with the idea of boxes instead of just placing rules in between each day because I felt the interface would be even more white and bland, it is a lot easier to read as separate entities, and it makes it feel like separate events, which it is.

Above is the add the event screen (what happens when you click the plus sign). the screen to the right is just the addition of the drop down. I found a few free psd ios 7 templates online which is where I accessed the keyboard and menu pieces.

 Above is the "My day" screen. This screen stuck pretty much to the wireframes. It is where the user can see their day. The sidebar is the same as above.

This is the share screen I created using the same elements as the event page.

I am happy with the direction my design is going in I feel that it is cleancut and business like.

Week 7B

Before Class

Interface
For class today I have two screens completed in photoshop and 5 more pages of my design brief in InDesign.

I created the screens using the same template as I did for the wireframes, I actually designed right on top of them to make sure I was following them. I am overall happy with how the design is coming along. The main areas where I feel I need feedback is the color of the numbers and of the sidebar menu; I am not sure if those colors are working but I really wanted to introduce the green from the icon. I was able to find free vector tools that allow me to create a realistic interface. Besides the main apple icons (search, settings, back) I created the My Week and My Day icons from free vector drawings I found.

Design Brief
Below are the five pages that were due for class today. I did the topics of, Design Inspiration, App Name, Persona, and Icon Sketches. The main page from these that still needs a little work is the App name page. I am still trying to decide what visual should fit there. The last page. the Icon Sketch page, is the first part of last "chapter". The first section has a vertical bar for the initial idea and brainstorming, the horizontal bar is for the next steps of research and focusing and the final sort of start of designing is where the circle element comes in.

I have started the motion graphic for the conference and hope to continue it today in class. I have contacted and given the script to the broadcasting student who will be doing the voiceover in hopes that that will be completed within the week.

During/After Class
During class I was able to work on the motion graphic and receive feedback on my app work. Overall I just need to set guides to be sure everything matches up page to page in the design brief so it is consistent.  It was decided the light grey background is working best so that is the one I am going to use. The spacing in my interface needs to be more consistent and I am going to enlarge some sections to signal that there is the ability to scroll. I may make a version using rule lines instead of boxes to see which is more visual appealing.

Week 7A

During class today I worked on my wireframes during class. I explored the links that were on the server and I started using the site fluid. Below is a full screenshot of the website and two of the spreads  I started to create on this site. It has all the iphone templates including the keyboard (the second screenshot). Since I was not sure how to export it to programs, or if that was even a capability I switched to photoshop.

Below is the photoshop document I started. I saved my illustrator file as a pdf and brought it into photoshop to base my designs off of. I started created the top nav and trying to decide on background colors. I will continue work on this document for next class.

Week 6 Out Of Class

Fixed Persona!

Above is the fixed persona, all the changes are applied from the last post including the new Facebox picture.

Icon Variations? 

Above a are some variations of my icon. The only thing that changes is the background. The main question is if the background should be lighter of if it needs some type of gradient/pattern.






 Interface Wireframes

Above are the wireframes I created for my app, Journey Owl. From left to right top to bottom I created, the home screen/ My week, My Week with side menu, My Day screen, add an event, My Day with side menu, and I started the share screen.

After watching the keynotopia video I tried to open and use some templates on the program but nothing would open so I was not sure if we actually had the program. I was hoping to create the share screen with that since it will use a lot of standard apple menu components. Since we had to only create 4 wireframes I just created bare bones for the last one (share screen) in hopes that I will be able to use that program.

The home screen is now My Week instead of My Month as I had originally sketched. This is to be true to the idea of having a large touch target. The user could have the ability to scroll through multiple weeks. I kept the idea of the side bar menu from my sketches but I got rid of a few options. The options in the side menu are, Search, My Week, Share, My Day, Settings, and an arrow that will hide the menu. Once the user clicks on a day, or goes to My Day they will see their schedule. For that screen I went with the second sketch I had created that had larger rectangles overall. This screen only includes what is on the schedule, not every hour in between. The add an event screen is a pop out that can be accessed from any screen.

Design Brief

Below are the initial six pages of my Journey Owl design brief. I tried to connect the style of it back to my revised persona and the app interface. The cover page has the same background as the persona. I tried to carry that throughout the rest of the layouts. The dashed line is references travel is also throughout the layouts.

The stacking of text and photos is a reference to the interface wireframes. Since they are very rectangle/ square based I tried to have that style overall.
I was not sure what imagery to place on the elevator pitch/ tribe questions page so I am hoping to get feedback on that during class.