Week 14A

Today during class we critiqued our completed designs. I received overall positive feedback. The main suggestions I received was to

• get rid of the question marks on the toss options
• the social media flags stand out a little bit too much (so I am planning on maybe muting the color)
• look into possibly a different secondary/bodycopy typeface 
• change the subtitle because it appears black

I plan on changing or looking into all of these elements before development. 

Homework over break is to read chapter 5

Week 13: Out of Class Ipsum Mockup

I created the revised color guardipsum mockup in photoshop. Based off of the sketch in the last blog post I created this:

I created the header and chose to keep the tosses the same color as the last mock up so I made the header the two shades of blue, as well as the question below the rifle. Compared to the last mockup this one is more condensed and to the point of the website which is beneficial to the users. I feel this design overall as well defined hierarchy between color and size.

The footer in this mockup's height is a lot less than the previous one and is a lot better fit. The content inside includes 

• instructions on navigating the site correctly 
• an about the designer section explaining my background in color guard
•  a more about color guard section where there is 2 links to websites with more information
• a share section where the four social medias of choice are flags

I also mocked up a secondary page as if the user selected double.

Above is a wide screenshot of it all and a close up of the ipsum. The only change is the content between the footer and header, the footer and header will always remain the same.

In photoshop I also created a gif or the rifle spinning using the timeline panel.  (I am not sure if this video or link will work but I included them anyway)

file://localhost/Volumes/EMILY%20GREEN/FALL%202013/Interactive/Lorem%20Ipsum/Mockups/riflegif.gif

The gif will be used as a hover state. When the user comes to the website and hovers over a toss, the rifle (through the gif) will spin the correct amount of times. I was not sure how to show this hover state so I explained it instead. The text could also turn the light blue if more signal is needed.

Other hover states are:

If a text link is selected it will turn the light blue for hover.

For the hover for the social media flags, I thought they could do an image can so it looks like they are flapping in the wind.

Week 13B

For class today I brought in sketches of new refined ideas for my color guardipsum page. I feel like I was trying to force the scrolling idea that I had from the beginning; after letting it go I started designing for a no scrolling ipsum site, like many of the others. All of the designs still include the crowd fat footer.

The design below would have a typeface element in the center. On the hover of each toss the rifle in the middle will spin the correct amount of times. This footer also includes a share element. (This is the chosen design)

The design below and above are similar designs just with a change in weapon and an addition question. It has two questions then the element would spin as the text then appears on the right.

After deciding on the top design I started working on it in photoshop. I how to look into and figure out how to create the gif of the rifle in photoshop. 

The full size document (3000px width) with the guides at the 1000px marks.

Zoomed into the main viewport.

I refined the crowd element in illustrator for the new document size.

On Campus Event: Interdisciplinary Interaction Design Conference

On Saturday, November 16th was the Interdisciplinary Interaction Design Conference held on campus. This was the event that the studio class put together. All four speakers, Justin Kunkel, Robert (Bobby) Deraco, Josh Buckwalter and Aaron Chu had really interesting presentations. Below are the actual notes I took on each presentation during the conference, a total of six pages!

I felt that all of the speakers brought something different to the conference and the discussion which I thought was so great. My favorite part I think was the panel discussion/lightning round because I thought all of their answers were so thorough and caring, which I found really refreshing. They really took all of the questions seriously. I also enjoyed the lightning round because I enjoyed hearing what their favorite tools, skills and programs were. 

My favorite points of each speaker:

• Justin- that you need to recognize that design is a process, a way of thinking, not a deliverable. I felt this way a great way of putting it and I think it is something that I really need to use as a way to think. I also enjoyed that he talked about things like personas, which are components we do in the classroom
• Robert-I really enjoyed his almost.... circle of learning (student>novice>imitator>master>student) and that we should never stop learning. Also his story about the plumber and that we should not just sell our ideas on an hourly rate but sell what we know.
• Josh- I appreciated that he showed his early work because I feel like not a lot a professionals do that so it was nice to see that everyone does not start out amazing but with hard work someone can get there
• Aaron- I find Aaron to be an inspiration in himself because he came from Millersville and went on to become something great. My favorite thing he discussed was confidence; that having this quality is one of the most important things you can have when you get into the field.

As a whole I thought the conference went very well, no one got lost and there were not real difficulties technically. The meet and greet went well too and everyone seemed pretty relaxed. 

Week 13A

Today in class we got into small groups and received feedback on our mockups. The feedback I received was that they liked the addition of the red color and that the spirals are working better. When I talked to professor Pannafino, I need to work on the structure of the site itself more. So for next class I am creating sketches of the main landing page, trying to get a better hold on what it should look like. I am sketching on a larger scale so I can work more things out in sketch.

Week 12 Out Of Class

 Over the weekend I continued to work on the mockup of my website. I added in the current masthead on the left with the sabre. I added another layer to the footer to enlarge it. This also allowed me to introduce another color into the layout, the red/pink color.

The next big addition was the rifles, text next to it and the spiral for each toss. From the element collage to the mockup the circle changed to a spiral to help tell the user that the element (the rifle) will spin. I positioned the rifle at different stages of spinning to also give the idea of tossing. I am also thinking about including little nicknames or silly things about each toss to add content.

I am still working on how I am going to layout the landing page but I am still working on a few more ideas, trying to involve the figure. 

Week 12B

For class today I had researched to gain ideas and inspiration. Below are some links of the sites I looked at. I looked into what goes into a good footer since I am including a "fat" footer in my site.

http://www.creativebloq.com/web-design/10-superb-website-footers-take-inspiration-1131597

http://www.creativebloq.com/web-design/improve-your-site-microinteractions-10134906

The other link discusses how the little things are important within a website and help with the overall feel of the site and the usability.

Below is the 5-10% of the photoshop mockup I had done for class today. I focus on adding in elements I was sure I was using. These elements are the background texture/color and the crowd footer. Before adding the crowd vector image to the photoshop document I elongated the dark blue layer to start to create the larger footer.

After brainstorming and talking to peers I have come up with a way to aid the user in understanding the tossing concept.  I was having trouble  trying to force a figure into my existing ideas/designs or having it awkwardly to the side, I also felt the figure would be too large and the scale of the rifles would be odd. To solve all of these problems, I came up with a completely different way to look at the problem. The website I mentioned in earlier posts, that has the scrolling style that I would like to do utilized also had a loading page before the actual landing page. I feel that I could also do this with my design. I could create a small loading animation of a figure tossing, it rotating, them catching it, then it starts all over, below it would be the word loading.

I feel this allows the user to understand tossing and what/how it happens, so once the user gets to the site no additional information is need. The user will be able to recall from the loading when they see the rifle again.

I am not entirely sure how to code a page like this be I hope to be able to research and look into it. I feel this is the perfect visual solution for the user.

During class we took a field trip to the hall where the conference is being held.  We practice intros, figured out positions (I am a greeter at the main door), and checked out lights and where tables and where the food will go. I also figured out how to put the motion video on a loop for the intro of the conference, below is the link to it.

http://www.youtuberepeater.com/watch?v=kXRmFUcZCu4

Week 12A

In class today I presented my designs and element collages to the class. The feedback I received included

• having the saber be the textline instead of hanging
• think about a possible highlight color so it is not so monochromatic
• including a fat footer with instructions and some other copy
• trying to find a way to include the flag within the design since that is what a lot of people think of

Once I talked to professor pannafino I am also trying to sketch and rework the initial page where the website starts. It was decided that I need to show the action to connect to the result of the spinning weapons above. So there needs to be a tossing figure somehow involved in the piece; its placement and look is being worked out for next class.

Week 11B

For class today

Below are my 3 11x17 sketches of my website ideas based off of my element collages.

Above is the first version it is a diagonal line background. The rifle (night) element would be used throughout. The writing is on the left instead of the right. The header is the full header and the crowd header is on it (which is in all of the designs). The newest edition to the sketch is the flag/silk navigation on the left. It is based on the site I mentioned in my last blog post, each flag would represent a toss and a click would take you to that part of the site. 

Above is the vertical line version of the site. The dashed line on each represents where I expect the page fold to be. This version does not have a sabre or a nav bar, but one or the other may end up in the design. The toss text is on the right which I feel works better. The triangle button signals the user that the scroll will go upwards. 

The picture on the left is the small sketches I created when I was looking into doing the navigation side bar. The picture on the right is my newest version/theme of the website. It is inspired by the website that I mention in the last blog post. It has all the similar elements as the others but the background is a sky and the rifles are not confided by circles. The sky will have a change in colors as the user scrolls upwards.

Revised Element Collages

Above is the first of my revised collages. I decided to revise one of the beige ones because everyone I get feedback from enjoys both the beige and green and the vertical pattern is favored.  I made the crowd footer larger, added different copy to the body, and added more rifles in the correct label order.

This is the newest version that I created an elements collage for. It is based off the sky being the background. The picture on the left is a screenshot of the background I started with, I felt it was not the best color scheme so I moved towards this shades of blue one seen on the right. I changed the color of the crowd to reflect the background change. I am debating if the text should be larger or the rifles smaller. The middle picture is the start of the illustration of the possible side bar element. All of the tosses are listed as is a start flag. I am going to look into changing the colors of all or some and adding stars to the background. I did receive some feedback of maybe combining the two themes but that is something I am still looking into.

Week 11A

Today during class I completed the motion from the conference. I completely redesigned the section that had the different disciplines flying into interaction design. Below are screenshots of this section in progress. I decided to have them appear on the ipad since I received feedback that the device section happened too fast.

 I researched each of the named disciplines to decided on what the illustration should be of. For Industrial design I chose an interesting looking chair, cognitive psychology a brain and User Interface Design an iphone. I created the illustrations in illustrator using the pen tool and the light blue color from the original style tile. I chose to do a line drawing/contour style to represent the illustration style that is in the book.

 The illustrations practically draw in as each discipline is named and the titles swing down as they are said. The audio has been redone to fix pronunciation, mistakes and to add the date at the end of the entire video. I also have added music, I found the music on the audio section of youtube. The audio is free and has no copyright issues. I felt it fits well with the content without being too serious or playful. At the end it fades out.

Once I finished the conference motion I researched the style of scrolling I would like to do for my lorem ipsum site. The type I want to do is have the user start at the bottom and from there scroll up. Screenshots below show the website that I found that does this. The site is google's The Guide to the App Galaxy.

 There is navigation on the side that is clickable that can take the user to each section. Or the user can just start scrolling or they can click the launch button to start the experience.

 The other two screenshots are views of different sections of the website, as seen in the navigation the little red ball is at different locations in response to clicking or scrolling to that location.

The main difference of mine would be that the rifle could be a link to copy or the circle could expand to show the full paragraph.

Week 10 Out Of Class: Element Collages

Below are my element collages I created in illustrator, I ended up making several, 6 to be exact. This all started because I could not decided on a texture, I had two favorites, and I was debating background color, green blue or beige. My overall idea is color guardipsum and below are elements that I would like to include within the website. Each collage has its variations like text color changes so I'll start with something that's the same,

Footer and header

On all of them is ^^^this crowd footer colors are subject to change but I felt it rounded out the design really well. I chose to have a crowd because the sport of color guard always has an audience. I created this using the pen tool, same as with the rifle and sabre. The header type is the same throughout but the content around it varies. The one above has everything, stroke, deck, and sabre while the one below does not have the sabre, and some have nothing. I am leaning towards the complete one above.

Rifles

The links to the certain amount of paragraphs will be the spinning rifles (their hover state will be spinning). The debate is what type of sky should be in the circle day? (top one) or night (bottom). Also whether or not to include a spotter (the black piece of tape). If I do include the spotter the gun will have to be flipped. I am planned to have the height of toss word next to it, I am leaning towards the placement on the right. The circles in most have different types of shading the top has a crescentz and the bottom has a small inner glow. 

 Body Copy
The type I chose is a clean sans serif I felt it went well with the header copy. It is also very readable. The main debate with this is the color, which will be decided once the background color is. The copy in the collage is the actual color guardipsum, I was able to brainstorm with by teammates through facebook and came up with a list of 110 words.

Buttons

 I feel that this is the most difficult part of the design for me. The site will not be button heavy, mainly only the one that is in the collage currently. This button will lead the viewer to the rifle single and etc. The circle variation is a foreshadow/recall of the sky circle with the rifle. The triangle one leads the eye and points in the direction of where the rifles/links are above. On the blue circle I added a small crescent to make it appear to have dimension.