STUDENT PORTFOLIO WIREFRAMING KEY PRINCIPLES PFx Introduction A

STUDENT PORTFOLIO WIREFRAMING & KEY PRINCIPLES

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.

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. Red mask = computer screen Good Not Good

PFx | The Layout Grid 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. 12 Point Grid Scrolling Sections 1 – Most Important 2 3 4 5 – Less important

PFx | Color Basics Color Schemes 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 Premade palettes https: //wpamelia. com/website-color-schemes/ Hints-n-Tips. Choose a color palette from a favorite nature photo. http: //www. colr. org/ https: //coolors. co/ Hue Keep in mind Value Chroma Colors are already chosen for you in each template! Keep them or select new ones to suit your needs. While these colors are clearly different hues, do they have the same value? People who view your site will have a perception of based on the color palette you select. Keep it professional looking! Click again for the answer! 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-colorschemes/ 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.

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.

PFx | PUTTING IT ALL TOGETHER HOME ABOUT RESUME PROJECT BLOG PORTFOLIO 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. CONTACT

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