We showed our animation in class today. It was wonderful to see there was a big variety among everyone’s work. But after seeing them, I am wavering over whether I should continue on coding my website or build a Behance page. I think to have this for my online portfolio would be great as I am getting close to graduating. So I will have to figure this out this weekend, so I don’t procrastinate.
Truly Wu
We talked about animated gifs in class today. Colleen actually made a quick example in Photoshop. I am pretty uncertain how mine is going to turn out, but in the past couple of weeks, I have had some practice using After Effects so I plan on using it to develop my gif then import it to Photoshop. There is so much coding to think about and I really need to use my time wisely.
It is time to move on to a new project. I have chosen to program my own web page. I think this time the process will be a lot easier even though I still have no clue how to code the animation that I have planned in my head. But I will start mapping out the entire layout and naming things properly in the Illustrator file when I export it as my CSS. As I am writing this blog, I am recalling each step I had to do for our first coding project. I think I am going to be okay; I just have to stay positive and determined.
We had our critique in class today. I am satisfied that I had some good feedback about how to expand my content and navigation tips. I think I will take out my bottom portion and really work on the ‘book style’ page to keep everything consistent. After looking at everyone’s design, as always, it was quite inspiring and I think I have a better understanding of this project.
Unfortunately, I didn’t have a chance to speak to Colleen about my concept on Monday, but I don’t think that should slow me down in my process so it is time to move on to the next stage of the new project after creating the wireframe. For project 02, I would like to build a website that talks about how to use traditional binding and stitching techniques to make a book. The website will include at least 5 different methods of binding a book. People will have the option to find the guidelines to learn from scratch and also learn the brief history behind each technique. I am thinking about each step of the guideline (or select ones) being an animated gif. Moreover, there will be an online gallery that displays examples of different bound books. I am very passionate about binding books, so I am hoping to create a useful site that will inspire people and also raise interest for people in binding books.
I am delighted to start thinking about our new project. We are going to design a website and we have the freedom to choose our own story. Moreover, we will be getting involved with animation on a web page. How exciting! Before Monday, we need to create a wireframe for our stories. In class today, we reviewed some good examples of wireframes. Building a wireframe before the actual design is more serious than I thought. It is very beneficial to look at the overall layout in wireframes because it really reveals the details and provides a hierarchy for the webpage. For future benefit, that is when we work with a client, they will often ask to go through the wireframe first so that it simply indicates the problems on the page and would be easier for them to point it out.
Monday we had critique on our navigation project. It was very inspiring to view everyone’s designs and the critique went smoothly. I enjoyed learning from other people’s designs and there were a lot of beautiful navigational methods presented, some I have never thought of before. I really liked Allison’s color palette. It was very vibrant and was quite consistent. One of the feedbacks I had from Colleen was my design seem to lack continuity. The main problem was my color choices are different and leapt from each page, so I will have to work on that in my revised version.
Wednesday was an in-class workday. I coded more on my typesetting design. Unfortunately, I didn’t get too far. I think I will have to watch and do more tutorials on how to place an image in the background in the RIGHT PLACE, because that was the problem where I started getting frustrated.
Now I need to focus on making my navigation design come to life based on the wireframes I created. There were many changes that needed to be done and I have had to do some adjustments so that it would be compatible with the overall design. My wish is that the finished design will be cohesive and not only make sense to myself but also speak to and interact with the audience directly.
On Monday, we showed the wireframes for our navigation design to Colleen, individually. I was very encouraged that I had some positive feedback from her. Compared to my old sketches, Wireframes really helped me have a clear perspective of my overall concept. I can see how the interaction is going to land by following each step of the design. The difficult part for me is how to bridge the accuracy and smoothness in the transfer of each page. My hope is that once I start building my design in Photoshop, things will become clearer.
On Wednesday, we went through everyone’s navigation sketches. I treated it as an open opportunity for us to get contributions from others, and I ended up absorbing a better and more diverse viewpoint than when I just looked at my own design. I really appreciated feedback from Colleen as well, because my navigation was simply focusing on the concept of how to distribute large amounts of information; but at the same time it appeared to lack exposure to the methods of attracting the audience, which is very important in interaction design. Therefore, that is something I will have to work on more.
I liked how helpful the box model was. I have been dying to know how to cut one paragraph into two segments and finally found out the method! I also adore the idea of setting multiple tags in one div so that everything looks easier to read and organize. Anyway, that was an exciting moment. During the weekend, we were asked to start our wireframe; I am hoping that I will make something cool!