HTTP5111 HTML/CSS Assignment 2 (Figma
mockups)
Using Figma, create a mockup for your portfolio site (this should be a new design done for this course).
This will NOT be a functional website but is just an design in Figma. Think about what type of
information you should have in a website which is geared towards clients and/or employers looking for a
web developer.
Your design should have some featured content. Do not create splash pages because this is too simple!
The desktop design should fit a 1366px wide screen. Create the mockup for a potential home page for
your portfolio website. You should create two more mockups for the same main page but for a tablet and
for a phone.
The tablet mockup should have a width of 768px (so when you create a new frame in Figma, set the width
to 768px). You will need to rearrange your layout to be more appropriate for tablet users. (Think of
spacing between the content and the screen edge.)
The phone mockup should have a width of 320px. Again, rearrange your layout in an appropriate manner
for a phone. If there are some things which are unnecessary and can be safely removed (e.g. an
unnecessary slideshow), you can remove it for the phone layout.
Think about the user when you redo your mockup as tablet and phone size. Don't just shrink everything
down. Is the font a readable size? Are links big enough that they are easy to tap? Is the text easy to read?
Is the font too fancy? Is there enough contrast between text and background?
The mockups expected are:
ONE home page mockup (frame) for desktop (will fit a 1366px width)
ONE home page mockup (frame) for the same website for tablet (will fit 768px width)
ONE home page mockup (frame) for the same website for phone (will fit 320px width)
All mockups should be in one Figma file! Add frames for each layout size.
What to include in the mockups:
header
footer
navigation
a body section with a multi-column layout somewhere (for desktop and maybe for tablet; phone
should be single column); the entire page doesn't need to be multi-column, but make at least one
section of the page multi-column
images
a logo for the website
some form elements (e.g. contact form)
Make sure you use layers effectively and label and group them not only for me but for your own
organization.
You will be marked on the following criteria:
Colours/fonts (5): Do the colours and fonts look good together (use a colour palette tool to help
you if you're not good at this)? Is there enough contrast? Is the font size appropriate for the
screen size?
Usability (5): How is the spacing/layout? Is it balanced, crowded, or inconsistent? How
appropriate is the design for the device? Are the font sizes readable or legible regardless of
screen size? How easy are the links or buttons to click in smaller screen sizes? Do form
elements make sense? Think of the end-user for all your designs.
Figma skills (5): Do you use guides effectively? Is your alignment okay? Did you scale your
things nicely or did you stretch or squish images or fonts?
DO:
Cite your sources if using images not your own as dummy content for your page. It is okay to use images
for educational purposes but make sure you cite your sources (e.g. in a TXT file or in your comments).
DO NOT:
Do not use lorem ipsum for these mockups. I want to see content that makes sense for your website.
Do not use the standard Times New Roman or Arial. I want to see some other webfonts. (Figma does
have Google Fonts available in the font list so you can find the fonts you like on Google Fonts then look
to see if it's available in Figma when you add your text if you’re unsure. There should be an option to
only show fonts available in Google Fonts.)
Submit the link to your Figma mockups on Blackboard.
This assignment is worth 10% of your mark. Please submit this assignment via Blackboard. This is an
individual assignment.
Due Date: March 13, 2024 at 11:59pm