In this lab you will create wireframes for all five web pages within your project. Remember a wireframe has no color, content, or specific font at this point. However, it should be accurate in representing the size and placement of the different elements of your site. Follow the lists below for wireframing each of your project web pages:
Home Page
- A homepage banner.
- A main call to action based on what your website is about. (examples could be breaking news on an event, new artwork, a sale, etc.).
- A logo space.
- Social media logos space.
- Search textbox.
- At least two spaces for secondary stories.
- At least one ad or photo space.
- Contact information.
- A secondary navigation on the bottom of the homepage that contains all links from the navigation.
3 Content Pages
To create the content pages, make 3 copies of your home page wireframe and save them with the appropriate page title as the file name. Remove the home page content area and create a new content area that looks similar or identical to the home page layout. For each topic on each page, include in your page wireframe the following elements:
- A title.
- At least 1 heading.
- At least 1 sub-heading.
- Filler text (Lorem Ipsum) that takes up about the same space on the page that the actual text will use.
- At least 1 image placeholder and/or 1 video placeholder that would be included on each of your content pages.
Contact Page
Make another copy of your home page wireframe and save it with the appropriate page title as the file name. Remove the home page content area and create a wireframe for a contact form. Include the following elements:
- Visitor’s Name.
- Visitor’s E-mail.
- Message subject.
- Message body.
- Submit button.
- Cancel button.
Put all 5 Illustrator or JPG files into a folder named with your first initial and last name, followed by an underscore and the name of the assignment, and an underscore and the date.
An example is shown below:
Jstudent_exampleproblem_101504
Zip the folder and submit to the drop box below. Please check the Course Calendar for specific due dates.
Animation Students: Editing Animated Graphics into Videos
It is your turn! Now that you have explored this week’s lab activity, apply the concepts to your own project.
Create animation and incorporate it into a video clip rendered in Photoshop. You may NOT use the exercise files or any graphics contained within those. Your graphics must be your original work and be all within the same theme as outlined in the animation final project overview in Module 1. You ARE, however, permitted to use video clips you have created for other courses and projects. If you have found a legitimate, academically appropriate resource for provided video clips and would like to use a source file, please reach out to your instructor for approval FIRST.
You will achieve an average score for following the tutorial step by step. To score above and beyond you must show a working knowledge of the techniques introduced by applying the process to your own assets reflecting your chosen topic or brand.
Submit the Photoshop .psd file as well as all created assets.
Submitting Your Project
When you have completed the assignment, place all of the media asset files along with the software native files and ZIP it into a single file folder. (NOTE: You will need to include all of the graphics and media assets along with the main save files from Adobe.) Make sure both the file names include your name, so that when they are unzipped your instructor can tell who did the particular project.
