Project 1 Reflection

     The first project tested us on our skills we learned from the 7 previous labs this year and our visual design skills from last year. The objective was to create a website about 3 of our favorite movies. We started by wire framing, or doing a rough plan of how our website would work on paper. The way I planned my site was to have a central hub, or index file, that would list links to all three movies which would have a webpage of their own. The central page also contained a link to the list of copyrighted material used. We also needed to plan the directory on our computer. Inside the root folder there was a labs and project folder. The project folder housed the folder for project 1. Within this folder would be my index.html (home page), movie folders for each movie, and an image folder for all images used. Within the movie folders would be the html file for each movie.
     Next came actually making the site. I needed to gather all the graphics and images I would use in my site before I started so it was a matter of creating graphics in Photoshop and searching the Internet for movie banners and making sure all of it was saved in the images folder. Once graphics were confirmed it was a matter of coding. The index file used a table to display the movie posters for each movie and the names underneath. The poser and respective name were made clickable links to the webpage of that movie through use of the <a> tag and the href being a relative directory to the webpage. In a div of its own the copyright disclamer was linked to a webpage of sources using the same method. Every page included publication information (author name, date of publishing, etc.) through use the <footer> tag. On the webpage of each movie information such as release date and director was included as well as a summary of a movie discussing plot and the visual choices I made for that page. As a bonus I included a quote from the movie in it's own div. Finally, each movie page had a table at the bottom with links to other movies and the home page using the same <a> tag and relative directory to each page.
     This project also had two other component, a poster and presentation. The poster for the project highlighted the most important components of how our site functioned. Done in MS Word, the poster included diagrams of the directory on the computer and a wireframe of our site with each page being a screenshot of the final website. In the diagram of the directory I included arrows pointing to each part of the directory with a brief description of its significance in the directory. To the side of the diagram was a short paragraph explaining what a directory was, how it plays a role in navigation, and why it's important to set it up properly. The diagram of the wireframe had arrows emanating from each webpage that showed where you could go from one web page. Next to the arrows I included the actual <a> tag used to help navigate from that page to other pages. This helped visualize how one could navigate through my site and explained the role the <a> tag played. The presentation was the final component. We had to explain in 1 minute what we did, how we did it, challenges we faced, etc. The challenge in this was going through a lot of information in little time; even when the information was condensed to was still too much information. We also had to present ourselves in a professional manner which meant wearing business attire and keeping an enthusiastic attitude/expression throughout the presentation.
     These skills are important for a web designer because navigation is key in improving the user experience. A webpage can be made as impressive as possible through looks and coding but when it comes to website, a collection of webpages, it takes more than looks to make it impressive. The user must be able to easily access all webpages of a website and so improving navigation is key. Not only do you want to organize the directory correctly and insert the <a> tag properly but making usability intiative. By making the poster and movie name clickable links I give the user options and cater to different types of people, some that like visuals informing them where they'll be taken and other that like reading about exactly where the link will take them. Both forms are obvious in where the link takes them. Using a table makes navigation more clean because all your links are put in one section. The user doesn't have to travel to the top of the page to find one link and travel all the way down to find the other, they can simply travel t one section to find all links.