Website Design Example, Copyright AIGA
Your final project will have you utilize the skills that you have gained throughout the course. You will redesign the homepage of an existing website of your choice. You will learn to create a structural wireframe for the website that showcases multiple screen sizes using Adobe Photoshop and how to apply imagery, color, and typography to that wireframe in order to create a successful, visual mockup of the redesigned responsive website.
This project represents all that you have learned throughout the course. As the program is focused on web design, this project will allow you to begin thinking of digital imagery from a UI/UX perspective and apply graphics using Adobe Photoshop to multiple screen sizes while retaining visual continuity.
During part one you will complete the following:
choose a website homepage to redesign
research competitor sites and inspiration sites and the target audience
create at least eight unique idea sets of wireframe sketches (eight sets of two – each set includes mobile and desktop pairings) for the website redesign
choose one wireframe set and create digital wireframe of it (desktop and mobile) in Photoshop
write a one-page design proposal
You will upload your proposal, high-quality scans or photographs of your wireframe sketches, and your digital wireframes to the discussion board by Friday for feedback from your peers and also turn them in for your Project 4, Part 1 grade. Note: you have been given an additional day to complete this due to the addition of a digital wireframe. Your wireframe designs should be visually consistent across the mobile and desktop versions and include areas for the logo, relevant images, and information that relate to the products or services. Consider including indicators or boxes for social media icons to add realism to the redesign. Include notes or additional sketches to indicate the wireframe elements in your proposal.
During part two, you will have two weeks to complete the assignment by taking your proposal, peer feedback, and wireframes further in Photoshop and creating the final compositions.
Final Sizes/Specs:
Desktop
1280px wide, minimum height of 1000px
72 ppi
RGB color mode
PNG and PSD
Mobile
750px wide, minimum height of 1334px
72 ppi
RGB color mode
PNG and PSD
Project/Tutorial Videos
Choose a website to redesign.
Identify and research competitors and also research inspiration sites and your target audience demographics.
Reference the videos, readings and lectures on UI/UX Design and digital wireframes.
Create a one-page design proposal based on the one created during Project 1.
Make sure that you use proper grammar, word choice, and syntax (arrangement of words to create well-formed sentences), writing mechanics (capitalization, punctuation, and spelling.) Properly cite and reference. Eight unique idea sets of wireframe sketches (8 sets of 2 – each set includes mobile and desktop pairings) for the website redesign. Sketch in proportion to the final design specifications. (Ex. Vertical Rectangle vs. Square)
Sketches can be drawn on paper or using a digital drawing software like Procreate.
Include 3-4 sketch sets per page
Number the sets and ensure that your scans or images of the sketches are photographed flat, with bright lighting, and that you’ve cropped out distracting background objects.
Choose your favorite set and create digital wireframes (one mobile and one desktop) in Photoshop based on the sketches.
Combine the one-page proposal and sketches into a single PDF using Adobe AcrobatLinks to an external site. or another PDF program like Preview on Mac.
Post your proposal and sketches PDF to the discussion board assignment by Friday and offer constructive feedback to at least two of your peers by Sunday evening. The discussion submission is specifically geared towards your participation in peer review/critique.
Upload the PDF. This submission is specifically graded based on the quality of your research, written proposal, and sketch craftsmanship.