ASSIGNMENT

PROJECT #3

Create a Portfolio Website Prototype with Adobe XD:

It is a great time to create visually engaging and innovative websites. Bring concepts to life, cultivating bonds
between customers and brands. Craft your graphic elements, assets, and visual treatments that adapt and
flow with responsive design systems while developing and create HTML and CSS-friendly designs. Be the
keeper of the brand look and feel and ensure all creative broadcast across all channels lives up to the highest
quality of the company’s visual standards.

1. Build five (5) or more page Portfolio Website. Generate ideas. Look online for inspiration if you want. Each
page must be distinctly different from each other.

2. In Photoshop, create a design that is 1920px wide x 1080 height. Keep in mind, how the design may look
on a mobile or tablet

3. Remember about the navigation structure. Build a navigation bar within your designs. It must have at least
five (5) items

4. Use folders and layers in Photoshop for organizational and interactivity purposes. Also use guidelines that
shows the breaking point such as the one done in class

5. Use real text. No greeking or lorem ipsum text

6. Please save your layered file (save it as a PSD or Tiff) so that I can see the organizational and naming of
files. Upload your mockup to the server.

7. Then, let’s transform your mockup from Photoshop and turn it into clickable and interactive prototypes
(Five (5) pages or more). Make all your nav bar menu items to be interactive.

8. Use and make your Adobe XD prototype interactive. This is the last stage and a chance to show your client
what the site will eventually end up looking with interactive nav bar items and to the other pages. There
should be no hiccups, a smooth transition from page to page. Anything jumps such as the nav bar, marks
will be lost.

9. We also want a mobile UI and/or tablet size of your desktop website, use the UI kits within Adobe XD, and
create an interactive mobile UI or and/or tablet size too. Please include the five or more pages above. If you
want, you can also include the following:
a. A contact form with a submit button
b. A thank you page for the contact form when they click on submit

10. Save your prototype and share a link to me access to your prototypes (email address)

11. When the above steps are complete have your instructor take a look at your files

MARKING CRITERIA:
This project will be marked out of 150 and will be marked based on the following criteria:

TOTAL: 150 marks — 25% to your final grade

DUE:
1 Adobe XD Rubrics | Michael Chow
 PROJECT #3 Prototype Grading Rubric with Adobe XD

Level of Level 1 Level 2 Level 3 Level 4

A limited mastery of A partial mastery with A solid consistent A superior, consistent
Mastery knowledge and skills: limited to basic performance; performance; beyond
below basic performance or demonstrated expectations
expectations expected competency of
achievement knowledge and skills
major problems exist minor problems exist minor issues exist no issues exist

Site has a well-stated clear purpose

The purpose and theme of the site and theme that is creatively carried
are somewhat muddy or vague. The purpose and theme of out throughout the site.
The site lacks a purpose and theme.
this website are mainly clear but
The web pages have not used the may have some elements that The site has an exceptionally
The web pages are cluttered looking or
space of the page well, and there are do not seem to be related to it. attractive & usable layout. It is easy
confusing. It is often difficult to locate
gaps and somewhat awkward spaces. to locate all important elements.
important elements.
Some of the elements are The Web pages have a good layout White space, graphic elements and
Prototype easily located. but may appear busy alignment are efficiently used to
Several web pages do not
or dull. It is easy to locate organize material. Every web page
Assessment contain information on
Some web pages do not contain any most of the important elements. contains a statement of information
product content.
relevant information on product on product content. Page
(60 points) content or have been greatly under Most (75-80%) pages contain information is easily interpreted and
Failed to create five frames
utilized. relevant information on highly and highly informative,
variations of your COMPLETE
product content. but not busy.
site properly to show a diverse and
Created two or three of the five
appropriate grid structure
frames variations of your site to Created four or five frames Created six+ frames variations of
for the website.
show an appropriate grid structure variations of your site to show an your COMPLETE site properly to
for the website. appropriate grid structure show a diverse and appropriate grid
for the website. structure for the website.

0 1 2 3 4 5 6 7 7.5 8 8.5 9 9.5 10

Project is exceptionally attractive in

The project is attractive in terms of
Project is attractive though it is terms of design, layout, neatness,
Composition and design, layout unity and consistency.
The project is disorganized slightly disorganized. The project unity and consistency.
The project demonstrates an
Style and/or devoid of necessary elements demonstrates minimal understanding The project demonstrates a clear
understanding of the use of design
and very poorly designed. Project lacks of design tools and principles. Project understanding of the use of design
tools. Text and graphic elements are
(25 Points) text or graphics with no organized “ has text and graphics however they tools and principles. Text and
arranged but lack of appropriate
white space.” lack or have too much “white space.” graphic elements are arranged to
“white space,” appearing cluttered.
create an organized “white space.”
0 1 2 3 4 5 6 7 7.5 8 8.5 9 9.5 10
The fonts are consistent,
A bit too much variation of fonts, The fonts are consistent and point size easy to read and point size varies
Typography and A wide variety of fonts, styles styles and point sizes used which varies suitably for headings, and text. appropriately for headings and text.
Aesthetics and point sizes was used. made the content look disjointed. Use of font styles (italic, bold,
Colours of background, fonts, underline) is used consistently and
Colours of background, fonts, unvisited Colours of background, fonts, unvisited and visited links do not improves readability. Colours of
and visited links make the content hard unvisited and visited links make the detract from the content. background, fonts, unvisited and
(20 Points) to read and highly distract the reader. content somewhat tricky to read or visited links form a pleasing palette,
otherwise distract the reader. Some slight consistency across pages do not detract from the content &
consistent across pages
0 1 2 3 4 5 6 7 7.5 8 8.5 9 9.5 10
Graphics are too repetitive or simple
Graphics are related to the
Graphics seem randomly chosen, are of and add little to the overall Graphics are related to the
theme/purpose of the site,
Graphics low quality, OR distract the reader. presentation. theme/purpose of the site,
are thoughtfully cropped, are of high
and are of good quality.
quality and enhance reader interest
Images are poorly distorted, stretched, Images are too big/small in size or
(20 Points) or understanding. Images enhance
resolution, colours and cropping. resolution images poorly cropped or Images have proper size,
published documents and strongly
have colour problems resolution, colours and cropping.
supports all elements.
0 1 2 3 4 5 6 7 7.5 8 8.5 9 9.5 10

Does not have understanding Some understanding of program but Good understanding of application Excellent understanding of application
Use of Software of application program. little effort displayed with tools. program with some experimentation program. Advanced use of tools &
No effort in using tools. Little experimentation. in the use of prototype techniques. Exceptional end result -
(20 Points) No effort made to improve Little or no improvement tools/techniques. Improved the leaps and bounds above the
upon the original/sample design. from the original/sample design. original/sample design. original/sample design.
0 1 2 3 4 5 6 7 7.5 8 8.5 9 9.5 10

Writing Skills Writing skills are below the expected

Significant and many grammar, spelling Writing contains minor grammatical, Writing is free of grammatical,
level as reflected in many grammar,
and punctuation errors are throughout. spelling and punctuation errors. spelling and punctuation errors.
(5 Points) spelling and punctuation errors.

0 1 2 3 4 5 6 7 7.5 8 8.5 9 9.5 10

Adobe XD Rubrics | Michael Chow 2