Design & Personalization
Teacher Lesson Guide
This presentation has been enabled with Pear Deck for Google Slides.
An ePortfolio helps you show off your unique set of strengths, skills, and certifications.
peardeck.com/dash
Joinpd.com
peardeck.com/projector
Design & Personalization
Check out the following
restaurant’s home pages.
Which website is
more appealing?
Which site is more appealing?
BBQ
Which site is more appealing?
THAI
Which site is more appealing?
CHINESE
More appealing attributes:
Less appealing attributes:
People make snap judgments. It takes only 1/10th of a second to form a first impression about a person. Websites are no different.
It takes about 50 milliseconds (ms) (that’s 0.05 seconds) for users to form an opinion about your website that determines whether they’ll stay or leave.
These same design principles apply to designing your ePortfolio.
Consider these appealing attributes when designing your ePortfolio.
PLAIN
design theme
(from the provided images in
Google Sites)
EYE-CATCHING
design theme
(unique design; not a stock photo)
Consider these appealing attributes when designing your ePortfolio.
CUSTOM
fonts
STANDARD
fonts
(ex. Arial, Times New Roman)
Consider these appealing attributes when designing your ePortfolio.
BALANCED
white space
(intentional blank areas to call attention to existing content)
EXCESS
white space
(blank areas without content)
“...but, I’m okay with a more basic look.
I don’t want mine to be ‘pretty.’”
You don’t need an abundance of color and cursive fonts to create an appealing, custom look.
Self-Assessment:
Use the following
comparison slides to determine
your progress & next steps.
Default
Does your ePortfolio have
CUSTOM page headers?
Custom
Custom elements include a unique photo and purposeful font choice.
Does your ePortfolio have
CUSTOM buttons?
Custom
Standard
Custom buttons add visual appeal by continuing your design colors, fonts, and theming on various areas within your site. These images become clickable buttons once hyperlinked to the desired page.
Does your ePortfolio have
CUSTOM section backgrounds?
Custom
No section backgrounds
Custom section backgrounds reduce the excess white space, continue the site personalization beyond just the header, and add color, texture, and/or pattern to an otherwise ‘flat’ design space.
Use these in addition to the default standard
section backgrounds (gray and black) as needed.
Default section backgrounds
Work Time
Turn On Student-Paced Mode in Pear Deck
Click the task below to take you to the instructions for completing each part.
Page Headers
Buttons
Section Backgrounds
Reminder: Use your portfolio folder!
Save your custom buttons & headers in your “Portfolio: First Last” folder.
Creating Personalized PAGE HEADERS
Choose which site you’d prefer to use to create your page headers.
Click the icon below to be taken to a tutorial video for using that site to complete this task.
Tutorial: Using Canva to create
personalized Page Headers
Click here to return back to all work time options
Tutorial: Using Adobe Spark to create personalized Page Headers
Click here to return back to all work time options
Creating Personalized BUTTONS
Choose which site you’d prefer to use to create your buttons.
Click the icon below to be taken to a tutorial video for using that site to complete this task.
Tutorial: Using Canva to create
personalized Buttons
Step 1:
Create the image you will use for your button
Step 2:
Hyperlink the image to the corresponding page
Click here to return back to all work time options
Tutorial: Using Adobe Spark to create personalized Buttons
Step 1:
Create the image you will use for your button
Step 2:
Hyperlink the image to the corresponding page
Click here to return back to all work time options
Creating Personalized SECTION BACKGROUNDS
Click here to return back to all work time options
Additional Tips:
Minimizing the White Space on the
Content Portion of Each Page
If the background color doesn’t match your site colors, or if you want to change Emphasis 2 to be a color (instead of dark gray)--
Do so under the THEMES tab.
Additional Tips:
Find the exact color you need by clicking on the paint can under the last color bubble.
Doing so will open an adjustable gradient bar.
You may also use an exact Hex code (#00ff97) to perfectly match a color.
How custom/personalized is your current ePortfolio?
Have feedback for us?
TEACHERS click here to help us improve this lesson by providing feedback on your experiences.
STUDENTS click here for a document designed to help you get feedback on your ePortfolio.
VISIT ePortfolio.nisdtx.org for how-to videos, samples, and more.