Week 14A

Today in class I  continued work on the fourth article that I had started working on at the end of last week. Below are screenshots of the progress.

One of the main things I started to tackle was the impact spread. At first I was not sure what imagery to include for this article. After some feedback I decided to combine all the shapes from the secondary pages into an abstract form. I decided to use the neon pink from the last spread to link everything together/ bookend it. Next after some playing around I have the names of each site cut out of the shape, these will serve as quick links to the below pages. The impact page is still a work in progress.

 The next thing I completed in class today was adding in the features list to the content of each section of the article. It is a list of 5 items, each site's page as the boxes that apply to the page checked. I chose to do this section in a secondary color to break up the page.

I am worried about readability of the secondary color of text on this page (motionographer), so it is something I am going to look into.

Week 13 Out Of Class

Working on the cover video:

For the cover I decided on doing a interesting effect that interacted with the title and that helped to give the feel of the magazine. I feel that I did accomplish this. I found a tutorial through youtube that helped me to create this. It runs about 10 seconds long. I decided to use a purple hue because it goes along with my color scheme and I have yet to use it. 

Render News Article: (Article 3)

This is the complete Vertical and horizontal versions of my third article for next class. It does not really have a title it is just the news segment, as it is labeled in the top right corner like the rest of my articles. 

This article includes three short stories and contacting the magazine, about the cover and about a competition I made up. The content includes fake emails and such but because none of these elements or sites actually exist there are no links or interactions on this page. This article follows directly after the cover page so its theme and design is based off of the effect I created for the cover. I felt that this would aide the reader in easing into the magazine.  In the bottom right corner is a small interaction key for the reader so they can learn and understand what is clickable within the publication.

 Social Network Article: (Article 4)

After completing article three, I started right into article four. Article four is the article about the types of design/motion design social media. I have not done the impact spread yet but below are the three content pages in both orientations.

I took patterns from the site's logo (for example dribbble's logo is a basketball so circle) and created a section for the text to stand out from the screenshot of the site. Each section's color is based of the website. After some experimenting I figured out that saving the screenshots out as jpegs is a way to get the best quality on the Ipad (I also had tried .png and .tiff). The current content is mainly content from the site's about section, explaining what they are about. I plan on refining the copy, but keeping it a similar length. For the rest of the space I am going to create a checklist to compare each site's features.

Week 13B

For class today I had all of my content in the rest of my articles. I have them in the typefaces that I am thinking and the placement that I am thinking. It it subject to change but I got the bare bones in.

This is my motion social media article.

 This is the page that comes right off the cover called Render News it has 3 short stories and will also include a key to the interactions in the magazine.

 New to render is ideally going to be an article full of inspiring/ new effects motion graphics and their summary's.

In class today, I put the text within the video I created for the impact spread of the tutorial review article. Once creating this and testing it, I also created this video in a vertical format so the ipad does not force it to flip when I test it. 

 This overall works well and the text is very readable, the only problem is the slight pixelation when the video stops.

 In the storyboarding article, one of the changes I made in class was change the littler diamonds to be also yellow. This creates better signal and cue, the yellow diamond will stand for clickable content (usually a link). Also for this article I spent a good part of class creating a working multi state photo gallery. Each photo has an X and a previous and next arrow.

 This is what my object state panel looks like once I was done everything.

 This is one of the virtual storyboards I included.

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 Interaction and Experience Design 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 during class we did a round robin critique, about three minutes long each. The main feedback that I got overall was that the AE screenshot was pixelated, which I knew and have been searching for a solution to. (some stated that they did not feel that it work but I got a larger response of people liking it so I am going to keep it) The next large comment was that they want the tools heading (in the storyboarding article) directly over content not to the side (this is a quick fix I did during class). I received one comment that the numbers need color and were too plain, but this is actually what I wanted, because I do not want attention brought to them. I feel that if they are needed to navigate they are there for the user, but they should not take away from the design. The final comment I got was that the copy may be too thick and condensed, but I feel that it does read better on the ipad screen but to be sure of this I am planning on increasing the tracking within the body copy.

Also during class I explained to everyone what I learned about how to save a local/made video so it will show up on the ipad. Next I worked on getting a youtube file to work. I got it to go through all the way to the desktop preview but it stopped on the ipad so it is back to the drawing board for that.

Week 12 Out Of Class

The breakthrough that happen this weekend for me is that I was able to get my self made video to play on the ipad. How I got it to work was I went back in after effects and rendered it as a H.264. Then once I placed it, it finally came up in the overlay panel and I was able to get it work. The video's color did change slightly from less of a teal and more of a blue, but this does not bother me because it still portrays that bright feel I was going for. When the video was viewed though it sat in front of the text. To fix this problem I am currently adding the text to the video so it will be clumped together.

 Once I was able to try it on the ipad I went back and made the text overall larger especially in the small call out boxes.


Below is the overview of my second article I changed the lines on the second page of each layout. The zoomed out screenshot below is to show the progression now; it starts complex and becomes simpler throughout the layout to almost signal how there is a confusion at the beginning of an idea but as the design works through the idea it starts to make sense.

 On the second page I also added in a larger golden diamond  and text to signal to the user that there is a gallery of storyboard photos to look through. I wanted to include the photos without forcing them into the layout; so I felt this was a good fit.

Week 12B

Below are the changes I made to the copy in both of my layouts. I lessened the copy in the tutorial review. It is more visible in the vertical layout. I took out so body text and spaced the text out in a more readable way. (the screenshots are from my laptop so they are not the highest quality)

I also added content to the second page in my second (and main article). I do agree that this fills the page a lot better. It fits well on both layout types. 

In class today we learned how to create a lightbox effect within the publishing suite and also learned that the circle flipping element that I would like to do involves code. I am still trying to work out how I would do that since it involves images. Small fixes I made during class includes:

Cleaning up this panel in my first layout, adding the word the, nudging elements to create better spacing. 

It was also discussed that I made need to look into the readability of my second layout to an extent. 

 

I have received mixed feedback but the debate is over the lines; if they are creating an issue with the copy or if there is too much of them overall and if it is taking away from the piece. I am going to create a new document and try to apply a different system to it and see how it works out. I also plan to add page numbers to help add to the publication feel.

Week 12A

Today I presented my layouts to the class in the form of interactive pdfs. The exciting part of this is that my video did work in the pdf, it was just the only text that would show up is the link that says here. So for that portion I brought up my blog. For the same article once I got down to the vertical version, the video had flipped itself back to horizontal. Hopefully these are just simple technically fixes. The main feedback I received was adding more visuals overall and adding more copy to the storyboarding article.

After explaining my content of my storyboard article later, it was decided I should look into interactions to display photos and examples instead of trying to force it into my layout.

This is the second page in my first layout, which is a tutorial review. I added a screenshot of my actual after effects document during the tutorial in the left half of the layout. I received mixed reviews on the addition so I am still looking into it. I also plan on fixing up the copy on this page to make it more readable.

Week 11 Out Of Class: Article 2 update

Below are screenshots of my progress on my second and feature layout. Unlike last time I am completing my horizontal layout fully first before creating the vertical counterpart in the program. During the last article I learned the hard way that elements do not link over (at least I haven't found a way to yet) after the layouts are initially created.

The pattern I created for this layout is based off the idea of storyboards/ storylines. The magenta line is the main line throughout; it is the largest and leads the reader's eyes through the content The golden line is less prevalent and is more for secondary pattern throughout the piece. The small amount of grey lines is used just to create a little more depth in the piece.

Solely on this impact spread is the title and the deck. Throughout the piece as a whole I try to space out content and put less per page to aide in readability. 

On the second page one of the subheadings is discussed. Within the white rounded rectangle, brainstorming is discussed and the bullet points are links to each method and are clickable.

The final page includes the two shorter sections. It also has a pull quote and another white rounded rectangle, in this rectangle it has information about the storyboarding moleskine notebook. Each bullet point is a link to buy each version.

As of right now all the links I have created and mentioned is working.

Vertical versions

Below are the screenshots of my vertical layouts, the text is a little difficult to read because of taking the screenshots on my small laptop screen. I feel the core structure of the layout stayed the same I just had to adjust the line placement in each panel.