1. Student portfolio wireframing & key principles

2. Everything is pre-made for you.
PFx | Introduction
A Microlearning moment
This is an exercise in wireframing.
You are NOT required to layout or design any part
of your new website.
Everything is pre-made for you.
This is to make you aware of layout
and alignment of pages should you
choose to add more content.

3. Red mask = computer screen
PFx | Key Information At the TOP
Key Principle & General Rule of
Everything you want to present needs to be in the top section that appears to the viewer on their computer screen, not BELOW.
The red mask shows the computer screen where YOUR important message needs to be presented.
Good
Not Good
Red mask = computer screen

4. Margins & Spacing - Working “On The Grid”
PFx | The Layout Grid
Scrolling Sections
Margins & Spacing - Working “On The Grid”
Think of your layout as being on a horizontal and vertical grid.
Keep things in line based on this grid.
Put your most important message at the top and work down to the less important.
1 – Most Important
12 Point Grid 2 3 4
5 – Less important

5. PFx | Color Basics Color Schemes 50 to choose from Hints-n-Tips.
Color selection can MAKE or BRAKE a web design
Choose it wisely!
This is a portfolio not a new game app! So keep this in mind
Colors need to reflect PROFESSIONAL pallet, so let’s have a look at what that means.
50 to choose from
Hints-n-Tips.
Premade palettes
Choose a color palette from a favorite nature photo.
Hue
Value
Chroma
Keep in mind
Colors are already chosen for you in each template! Keep them or select new ones to suit your needs.
People who view your site will have a perception of based on the color palette you select.
Keep it professional looking!
While these colors are clearly different hues, do they have the same value?
Click again for the answer!
No. The middle color has less white but the other two colors are near the same value. This trick comes in handy when trying to select colors for you WHOLE house. Best to keep them in the same value range and then add a darker accent color for contrast.
The actual color
Amount of white is in a color
Amount of gray in a color
Most professional colors fall in the gray tones or colors that have a higher value of gray in them.

6. Exercise This exercise is about choosing layouts that appeal to you.
On each slide, choose what you like and remove what you don’t like.
When finished this can act as your guide when considering new layouts.

7. PFx | Portfolio Layout Ideas
Choose one you like
6 Grid layouts: Click and a larger image appears.
Left: Interactive slider where user can move through the images using mouse or click button.

8. PFx | Sliders Choose one you like
Sliders can be used to showcase work.
These are blocks, called elements.
The functionality of the slider is built in. All you do is replace with your images and you are done.

9. PFx | Contact Forms
Choose one you like

10. PFx | HOME
Choose one you like OR

11. PFx | ABOUT
Think about the number of images and text that will need to be replaced which choosing your layouts.

12. PFx | RESUME
Choose one you like OR

13. PFx | PROJECT BLOG
Choose one you like OR

14. PFx | PORTFOLIO
Choose one you like

15. PFx | CONTACT OR HIRE ME PAGE
This is a basic contact page
Try changing the elements around to create another layout.

16. Putting it all together
PFx | PUTTING IT ALL TOGETHER
HOME
ABOUT
RESUME
PROJECT BLOG
PORTFOLIO
CONTACT
DEDICATED PROJECT PAGE
Putting it all together
Key point to remember: Don’t get “hung up” on specifics of a page layout. Pick something that appeals to you on first impression and go with it.
These have all been chosen to make sure you have all the elements you need for an award winning personal resume portfolio website.

17. What does your layout look like?
PFx | YOUR LAYOUT
HOME
ABOUT
RESUME
PROJECT BLOG
PORTFOLIO
CONTACT
What does your layout look like?