Transcript Keep it clean and clutter-free - Home | Dustin M Price

ONLINE TEACHING PORTFOLIOS FOR TEACHING,
LEARNING & PROFESSIONAL DEVELOPMENT: A Mott Community
College Center for Teaching and Learning Workshop, presented by Dustin M. Price
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Keep it clean and clutter-free
 Try to keep everything simplistic or even minimal
with only your most important content
spotlighted. Sometimes less really is more.
Do some web design recon
 Make some mental or actual notes on what you
would like to emulate on your own site.
Put visual hierarchy to use
 It’s a term that basically means our eyes pay
attention to web space in a certain pattern – a
pattern that can help you optimize important
content on your site.
Make your text easy to read
 Make sure your colors work together. Don’t use
uber-tiny font size. Stand by your fonts. Make
sure your fonts all the same across your design.
Consider your sites look on Mobile Devices
•
Images and text from: http://www.wix.com/blog/2014/03/5-web-design-tips-for-a-professional-site/
Does your provider have CSS? How will your
website look on a smart phone?
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Mobile Devices
 With nearly two-thirds of American cell phone
owners browsing from smart devices, creating an
optimized mobile presence is not a nice extra but
an absolute necessity.
 The numbers don’t lie: mobile browsing has
doubled itself since 2009, and the numbers just
keep going up.
A large number of website providing
companies now have an automatic mobile
viewing feature (which is awesome)
 Many of these companies even offer tools to
manipulate the way your cite appears on smart
phones, tablets, etc.
Images and text from: http://www.wix.com/blog/2014/03/5-web-design-tips-for-a-professional-site/
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Only use sharp images in focus, not
pixelated
 This is one of the most common mistakes of
beginning web design. If possible use photo
editing software to crop and downsize images,
save for web, with resolution of 76 PPI (pixels
per inch).
 Use open source imagery if you cannot create
your own.
Easy, clean navigation is a must
 This is why using the a template is the best
choice for beginning designers. The navigation
stays the same on each page only the content
changes.
 Most online website developers work from the
template format. You choose a template then edit
the images and content.
 Make sure your buttons (navigation) work.
 Make your buttons count, consider 4 to 5
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Minimal is often elegant. Choose your
colors (text, buttons, backgrounds) wisely
 Tiling backgrounds, poor color schemes or
added textures can kill the professional quality of
a site immediately.
 Flashing Gifs are better left in the mid 90’s. Any
blinking or flashing elements can become a
distraction. Flash is dead.
 No Ads
 No music
 Watch for typos
Familiarize yourself with the “how to
videos” provided by your website company
 These companies are used to dealing with
people with little to no web design backgrounds
and are rather user friendly!
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Minimal is often elegant. Choose your
colors (text, buttons, backgrounds) wisely
 Consider companies that have domain names
included in their basic package.
 Website costs anywhere from $5.00 to $25.00
dollars a month are great deals but many of
these companies also have “free versions”.
Often, in these cases you are allowed a window
of time, or you must have their company logo on
the site.
 I write my website costs off on my taxes. It’s a
teaching expense.
Analytics, Reports, Data
 Very often your website company will have an
area to monitor traffic (consider SEO search
engine optimization).
 This data could be used in a number of ways.
First and foremost you can see what areas people
are viewing, how often, from what type of device,
where they live, how long they were on your site etc.
Example from my website, www.dustinmprice.com
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Let us explore some actual websites
demonstrating professional design and
some that do not
http://www.angelfire.com/super/badwebs/
http://www.dustinmprice.com/
http://www.miriamposner.com/index.html
http://www.kenrogoff.com/
http://www.jenniferlundstrem.com/
http://www.prosintraining.com/
http://blogs.darden.virginia.edu/deansblog/
http://www.gautammukunda.com/
http://www.cwanderson.org/
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Let us explore some actual websites
demonstrating professional design and
some that do not (I apologize, but truly these sites have
issues)
http://iws.collin.edu/jbeck/
http://iws.collin.edu/ebock/
http://iws.collin.edu/dgarrison/
http://iws.collin.edu/kennedy/
http://www.tammyengert.com/
http://brightwoman.com/
http://blog.benmcmurry.com/p/online-teachingportfolios.html
https://sites.google.com/site/meganmonahanportfoli
o/
http://www.laurengalster.com/
http://amyburghardt.wordpress.com/
http://www.cgreenhow.org/
http://www.kerrygorgone.com/
http://lawprofessors.typepad.com/trusts_estates_pro
f/technology/
http://www.ericgoldman.org/
Nearly every faculty site at http://iws.collin.edu/
ONLINE TEACHING PORTFOLIOS DESIGN
BASICS
Now let us take a look at some of the
companies mentioned in your handouts.
Wix –free
Weebly –free
Squarespace –free
Portfoliobox
Homestead
WordPress –free
Google Sites –free
Edublogs –free
Portfoliogen -free