Week 16A: Final Class

Today in class I presented my final website. The main feedback I received was that the gif was a little choppy overall. This is something I agree with but I opted the gif to be choppy instead of having it be smooth and extremely slow. I am hoping to be able to look into this and have the gif be smoother in the future. Also the more about section links needs to be a little different than the body copy so everyone knows that they are links. Even though I received feedback on both sides of this I may add a back button to the text pages to break up the text.

Week 15 Out of Class: Color Guardipsum Completed

Below is a screenshot of the completed website. From this shot the change to the deck can be seen. I changed the font and made the question at the bottom slightly smaller to allow the title to be largest and most important header on the page.

 Below shows the gif in its last frame. I was able to fix my gif's clarity by adding in my website's background in the background of my photoshop document. I also redid the frames of the gif, I ended up created less frames to have the rifle spin faster. It also shows the color hover I created, it is a deeper maroon to match the new deck under the header.

 With the help from some of my peers, like Kate W, I was able to get a sticky footer to work on my website. The above and below screenshots show the viewport on my browser and the working footer. This shows that while the footer is stuck to the bottom, it does scroll down to allow for the text to continue.

I have placed my folder onto the server and have tried it successfully on different browsers (chrome, firefox, and safari) and on different computers.

Week 15B

For class today I had created all of my secondary pages and linked them to their corresponding tosses. Below are screenshots of two of the secondary pages. I created all of the copy myself within word then placed it in my code. Color guardipsum is based off about 110 jargon words that I have gathered about color guard

This is the page that is linked to the Quad (four paragraphs of text)

 This is the page that is linked to Double (two paragraphs)

Today in class I worked on hover states of the rifle gif and other elements and refined the footer. 

Below is a screenshot of something I am still working on, which is the actual text hover. The H3 tag seemed to be blocking any link styles I attempted to create. So to attempt to fix the problem I placed all of the H3 styles in the link class instead and got rid of the h tag on the singles link. Below is what came of this. The color and typeface did carry over and the hover did work, but the text align and size elements did not carry over.

I do have the gif hover working and it does spin once for the single on hover. I am planning on refining and cleaning up the gif because there is a few size issues and I want to make it spin faster before I render it out for each toss rotation.

Some refining I did was I lengthened the footer's navy blue color to give it some breath along the bottom and to be able to space the header out and away from the audience heads.

I am also hoping to refine the sub header/deck to separate it from the bottom copy. I am thinking about creating a ribbon like flag that may fit well with my theme.

Code!
I realized I have not been posting screenshots of my code so here is everything!

This is my main index.html file with all of the new script from today included.

This is my single.html page

Double.html

Triple.html (the not shown code is the same as above so it will not be in the rest of the screenshots)

Quad.html

Five.html

Six.html

This is my css file that is linked to all of my html files. It contains all of the style for all 7 pages.

all the text formatting tags

Main page content containers

Footer content containers and link tags

Week 15A

Today I spent class time continuing work on my website. Below are screenshots of my progress throughout the class while I was adding elements.

 Throughout the process I put background colors on my divs so I could see their location and padding.
Below is while I was trying to add in a place holder image of the rifle that will be spinning. I also added in the bottom text question. (which is still not curved because I am still working on that problem).

 Below is a close up of the footer share section that I completed today. The flags no longer have poles based off of the feedback I had received before break. I also lowered the saturation so they would be less attention drawing. The flags do "wave" the change picture when they are hovered over. The below screenshot shows the hover state while above is its regular state.

 Above is the set of divs I was working on before adding in the toss content. I was able to get both columns to fit in the wrapper and at the height I wanted.

Above is what I got completed during class today.

• finish all of the footer content
• getting in all of the share links and their hover states
• placing in the rifle and bottom text
• figuring out placement of the toss column

As of right now all of the text on the site is selectable, if I can figure out how to have it curve in all browsers, all the text will stay selectable.

Week 14: Out of Class

There was no Week 14B because of Thanksgiving Break. I was able to start coding over break a little.



Below is a screenshot of what I have done in chrome. I have the background image in and repeating. I figured out how to code a fixed footer and got almost all of the footer information in and centered with the header (not sold on the deck placement yet.) The only section missing from the footer is the share section with the flags. Both links in the more about color guard section are working with hovers.

(the white was it help me to see the div not part of the design) I had figured out how to get my text to curve (like it does in my mockup) and still be selectable! Below is how it looked as I had started to tweak it (in the Gua area). But I decided before I do this I should check it in other browsers. It looked fine in chrome and safari. 

But below is how it looked in firefox. The curve was not working at all. So I saved this html document (that has the curve) as index2 so I can come back to this problem. The screenshot at the top is index.html which has the curve span tags removed for now. 

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