Advanced Web Design
November 20, 2014
The Friendship Diaries
"Friendship is the hardest thing in the world to explain. It's not something you learn in school. But if you haven't learned the meaning of friendship, you really haven't learned anything."-Muhammad Ali. With every passing day, you look for more excitement, laughter, and memories, but there is no one else out there who can help you with that more than your best friend. Memories made with those who you cannot seem to forget are the memories worth documenting. We found our friendship by accident. We were forced together at our school's bowling tryouts; we instantly connected and have been inseparable for the past two years. This year, as we participate in The Michigan Council of Women in Technology's annual web design contest, we have the ability to share our friendship with those who we might otherwise be unable to reach. We were able to learn so much through their contest. We were required to use our imaginations to create an entire website from scratch. Our website includes an animation, unique Dynamic Drive codes, and so many different codes within its six pages. The theme of the contest is “Repurposing: The Ultimate in Creativity and Recycling." The point is to take everyday items, old items, or used items, and use them for other things so they are not thrown away. With our website, we will show off our "Do It Yourself" projects that turn film, light bulbs, and pizza boxes, into fun decorations meant to preserve the best memories we have as friends. Together, these projects can remind you of your childhood and bring back the best memories you have ever had.
Page 1: Index
On our index page, we introduced The Michigan Council of Women in Technology’s annual web design contest theme, “Repurposing: The Ultimate in Creativity and Recycling”. We wanted our site to go deeper than just repurposing; we wanted our repurposed items to fit a theme. We chose to repurpose our friendship through our items. We chose to layout this page as the cover of our journal, our Friendship Diaries. We created a logo for the center of our banner and added our slogan on the sides. Caitlin designed our logo, using hands in a heart shape in front of the symbol representing recycling. Jessica came up with our slogan, “Forever Safe. Forever Remembered”, to represent helping the planet and saving our friendship. For our favicon, we chose to use the heart from our logo rather than the entire logo because it had to be so small. We learned a code that allowed us to change our cursor to an image when hovering over links. Jessica created our Facebook page, while Caitlin created the Twitter and Pinterest. Caitlin designed the navigation, banners, and the icons for our social media. Caitlin’s favorite photo from our site, even though we didn’t edit it, is the main picture from our fifth page. We wanted to teach people the dangers of glass, so Caitlin coated her finger and a light bulb in lip gloss to represent blood. It was supposed to represent the jokes we have together in our friendship. Jessica’s favorite photo edit was the animation that Caitlin put together from Jessica’s idea. Jessica came up with the idea to use a pencil to write our journals and Caitlin made it work. Caitlin spent three days learning Photoshop CS6 to create the animation. It lasts only three seconds, but it’s one of the best pieces of our site. Caitlin used the timeline to layer two different animations. The letters pop up about 0.1 second apart and the pencil keeps up by floating across the screen. Our index page has one of the best parts of our site.
Page 2: Film
Entry 1 is about repurposing our friendship through film. We repurposed film by creating a memory light, which is a jar with an LED light in it and film outside of it. On this page, we changed our layout. Our index page represented the cover of our journal, while the rest of the pages became sheets of notebook paper inside of the journal. On our last page, Our Secrets, we did not change the layout back to the cover look because our friendship is not over, so there are endless possibilities of what we can do to our journal. Every piece and code of our website was selected to carefully represent a piece of our overall theme. We found the perfect color (#A0E6E6 in hex code) for our notebook lines. We wanted to make sure the text was easy to read so we chose a serif font that almost looks like handwriting. Jessica used Photoshop to carefully select a pencil out of a picture we took so it could be used as a header line; meanwhile, Caitlin learned a code to create a picture list. For our picture list, we used the image of the pencil code that we used in our footer from chesterwebconsulting.com. We also continued to match our theme by writing “Dear Diary” at the top of our page. Together, our theme of repurposing our friendship fits together due to each code that we added to our site.
Page 3: Light Bulb
Our second item was our light bulb time capsule. This item was the hardest one to actually create because the difficulty of steps involved created a challenge. We learned how to work through obstacles while making our light bulbs because figuring out a way to actually open up a light bulb so we can put stuff in it was a horrible process! However, it was really exciting when Jessica’s dad helped her out, and gave her suggestions on what to do. One of our ah-ha moments was definitely when we figured out how to change our navigation into something that tied together with our theme. Caitlin gets a lot of credit for the navigation because that was her area of “expertise”. We didn’t really have an issue with time; between the two of us working together we got the majority of our website done in a timely manner. The only real problem we had was getting the slideshows corrected. Caitlin was pretty much the one who fixed the slideshows. She had the Slideshare account. At first we had a book slideshow that opened like a book. But it just wasn’t working so we had to switch to Slideshare. We had to of changed our theme at least three times. We knew we had to stick with friendship, but figuring out the layout was the hard part.
Page 4: Pizza Box
Entry 3 is about repurposing a pizza box into a picture frame. We made two different kinds of picture frames using one pizza box lid. Caitlin created a collage inside of her picture frame, while Jessica created a single-picture picture frame. When we created our frames, we were able to paint the cardboard. As we painted and created our frames, we used the NET benchmark of Creativity and Innovation. Caitlin believes that Creativity and Innovation is one of the most important benchmark out of all six. Our entire website is based on our own ideas. There isn’t a single picture on it that we didn’t take ourselves. We came up with every repurposing idea on our own. You have to be creative and innovative to design a website because you can’t just steal ideas for your website. Another NET benchmark we reached was the Communication and Collaboration benchmark. Jessica had a lot of other activities, such as job shadowing at a hospital where she hopes to work with, and great opportunities that seemed to always come up, and Caitlin wasn’t going to let her pass up on those opportunities. Jessica missed class for an entire week and every other Monday. Caitlin would constantly text her and try to help her with whatever she missed on that day. Caitlin taught Jessica the codes she missed and in turn, it helped Caitlin with what she wants to do as a career: teaching web design. Communication played a major role in being able to finish our website. We also had to collaborate so our finished website incorporated both of our ideas.
Page 5: Ever After: Conclusion:
Ever After helps us to show you our complete and polished website. You can find information about what it was like to build our website, what sites we used and how we used them, steps for how to create your own website, and a table with information about the classes we have taken. Out of all of our citations, Bubbl.us was the most important site. Bubbl.us helped us brainstorm our ideas and create a layout for our website. When we look back at our brainstorm, we’ve been able to see how far we’ve come and how much we have changed. Our favorite citation was the site we used to create our 404 error message. One of Caitlin’s favorite things about our website is the 404 page. Since Caitlin came up with our 404 idea, she organized the picture and came up with the message. Jessica used Photoshop to merge two pictures into one to create the graphic for the 404 page. Jessica’s favorite code was the conveyor belt slideshow we used for our work samples from our technology table. We had to find just the right slideshow to display our work samples without having to worry about glitches in the coding. After we experimented with numerous slideshows, the conveyor belt slideshow stood out as the most reliable. If you think about it, it’s kind of like a film (connects to our first item!) reel that somebody keeps spinning. We both struggled with getting our notebook lines to match up perfectly with the text and with our fonts. Google Fonts gave us quite a bit of headaches when we used CSS codes. Only one piece, font or size, would ever work at a time. After several trial and error sessions, we managed to get it to work. Our fonts turned out great and we even have one that looks like handwriting so our names looked like they were actually signed on the page.
Page 6: Webmasters Our last page is Our Secrets. Our Secrets is all about us, the webmasters, on a sheet of notebook paper. We have a friendship filled with jokes, so we incorporated our jokes into this page. We have a separate paragraph about our friendship with a joke related to the picture that the text is wrapped around. This page also has general info about each of us that we took from our Weebly portfolios. We have the video we made in iMovie at Apple on this page. The video is about our friendship and how it works. To create our video, we filmed 8 different videos and combined them to create 4 separate conversations. We also put pictures we’ve taken over the past few years in between every other clip so the conversations don’t overlap. The filed trip to Apple was so much fun. Using iMovie was an incredible experience. Apple was so patient with teaching us different techniques to create clips that were timed perfectly, ways to add background sound, and how to add different designs to the layout of each clip. Caitlin’s favorite code was the orb magnification effect. Caitlin managed to perfect a code she found on Dynamic Drive where she could alter her navigation buttons and make them magnify when you hover over them rather than change as a rollover. The magnification effect is on every page and took several tries to perfect it. Trial and error is the best way to learn.
Choosing the most enjoyable part of this experience is really difficult for the both of us. Caitlin’s favorite part was the Photoshop, which makes sense since she’s an artist. As for Jessica, her favorite part was the designing, and the coding. She likes creating things and trying to turn it into reality. Jessica’s strength is definitely motivation, she helped Caitlin stay on task and not stress the small stuff. Her weakness is not being able to contribute as much as she would have liked. Caitlin’s strength is her ability to be responsible and get stuff done. She had to do a lot of stuff on her own and that showed how much passion she has for this field. If we could begin this contest over again, we would try more to waste less time changing our minds about what we want, and how we are going to do things and more time actually doing them. However, we wouldn’t change the theme that we had, it was unique, different, and we were really happy with the outcome that we had. This experience has been a lesson worth learning. We always hear people saying they wished they would have learned to get along with people better. Anyone working a job probably has to work with at least one other person, and it’s hard to do that when you don’t have any skills with that. Working together on this website has allowed us to gain those skills early in life and now we can take those with us down the road. This class allowed us to see how much creativity we really possess. When it comes down to it, even though Jessica won last year, and Caitlin knows she’s an amazing artist, being able to see something we created together, gives us a whole new feeling of accomplishment and pride. As a person we both found out what our line is when it comes to handling one another, Jessica upset Caitlin and vice versa, but we always found our way back. This contest strengthened us as individuals, but also it helped our friendship. It really did bring us closer and it allowed us to not only work with one another, but to combined our different mind sets into one solid product we both can be proud of.