Student portfolio wireframing & key principles

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.

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

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

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. https://wpamelia.com/website-color-schemes/ https://coolors.co/ http://www.colr.org/ 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. https://www.quicksprout.com/trending-website-color-schemes/

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.

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.

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.

PFx | Contact Forms Choose one you like

PFx | HOME Choose one you like OR

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

PFx | RESUME Choose one you like OR

PFx | PROJECT BLOG Choose one you like OR

PFx | PORTFOLIO Choose one you like

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

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.

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