• Home
  • Research Interests
  • Publications
  • Presentations
  • Consulting
  • Bookmarks
  • Resource Wiki
  • Contact
Blue Orange Green Pink Purple

Posts Tagged ‘web design’

You can use the search form below to go through the content and find a specific post or page:

Mar 02

Get more from your multimedia in elearning

Guest Blogger PostWhen designing and developing an elearning course you will always be incorporating some combination of text, images, audio, and video. There are several important things you need to keep in mind when working with various types of media.

Text

When designing a course, the wording of the text is not the only thing you should consider. The font you choose can have a huge impact on your elearning course. In one of his blog posts, Tom Kuhlmann points out how the typeface you choose sets the tone or mood for a course. It is important to choose a typeface that matches the tone you want your course to have. For example, you wouldn’t use Comic Sans in a course for business professionals. You would probably be better off using something more traditional like Times New Roman.

While you are deciding on which typefaces are just right for your course, also keep Jennifer Farley’s advice in mind and don’t use more than two fonts per design. She recommends choosing two contrasting fonts such as using an elaborate or decorative font for your headings and contrast them with a sans-serif font for the main text.

Also consider the size of the font in your design. Depending on the age of your learners, a font size of 10 might be too small for them to read comfortably. On the other hand if the font is too large it could distract the learner and make the visual design less appealing.

Finally, if you are creating elearning that will be displayed directly in a browser you should only use web safe fonts. In an article about web safe fonts, Chet Garrison says that if you use an exotic font, only the limited users who have the font installed on their computer will actually see the design as you intended. The thirteen fonts that are considered to be web safe are: Georgia, Palatino Linotype, Times New Roman, Arial, Arial Black, Impact, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana, Comic Sans MS, Courier New, and Lucida Console.

Images

When using images in your elearning course an important thing to remember is that you shouldn’t use images just for decoration. Although, like text, images can be used to set the tone of a course, they should also contribute to the content and learning.

In another blog post, Tom Kuhlman stresses the importance of using images that belong together. You shouldn’t mix photos and clipart or even different styles of photos and clipart within the same course. The images in your course should have a consistent look and feel.

You also need to consider the direction an image flows when you are deciding where to place an image in your course. You can use images to shift a learner’s focus as long as you place the image in the correct place. For example if you have an image of person pointing next to a body of text, make sure that the image is pointing towards the body of text. Chet Garrison has written a great blog post that goes into more details about this concept.

Audio

Just like images, don’t use audio in your course just because you can. You should only use audio if it helps with learning. Tom Kuhlmann talks about how background audio should only be used if it “contributes to an immersive experience” or “creates emotional cues”. Be careful not to use audio that is distracting to the learner.

Another time audio is often used in elearning is for narration. Al Lemieux offers several tips for recording good narration. The tip that I found to be the best, and that most people overlook, is the importance of using a high quality microphone. Using a good external mic instead of the one built into your computer can make your audio sound much more professional.

Video

Video can be a great way to add content to your elearning course, but it can also be really bad if it is not done correctly. One major problem is having a video clip that is too long. Learners can quickly become bored if all they are doing is watching a video. In an article for Learning Solutions Magazine, Jeremy Vest says that the optimal length for a video segment is two to seven minutes long.

In the same article, Vest says another common mistake, especially with screencasts, is not showing the instructor in the video. The learner can quickly become disengaged if they never see anyone on the screen. So, try to add in some shots of the instructor talking when it is appropriate.

I hope these tips will help you as you are designing your own elearning courses. Please feel free to share some of your on tips in the comments.

Guest blogger: Joey Weaver teaches Computer Technology to high school students at Kansas Career & Technology Center in Memphis, TN. He is currently working on a Master’s degree in Instructional Design & Technology at the University of Memphis.

Related articles
  • Revised Font Stack (awayback.com)
  • Arial, Verdana, Trebuched, Lucida. Which is your favorite font for the web? (woorkup.com)
  • Stop Using Lame Fonts (dtelepathy.com)

Images courtesy of Daehyun Park, D’Arcy Norman, & Valeriana Solaris at Flikr Creative Commons.

Feb 09

Bookmarks for January 31st through February 9th

These are my Jumptags for January 31st through February 9th:

  • Project Cartoon: How Projects Really Work (version 1.5) – How Projects Really Work (version 1.5) How Projects Really Work (version 1.5)
  • Malcontent Blogger | bLaugh – Source: ReviewMe Domain: MalcontentBlogger.com
    <img class="comic" title="Malcontent Blogger" alt="Malcontent Blogger" …
  • The Whole Internet Truth | bLaugh – Source: Wikipedia Domain: WikisGoneWild.com
    <img class="comic" title="Where is the Secret of Life?" alt="Where is…
  • Applying Mathematics To Web Design – Smashing Magazine – “Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe…
  • Here’s How to Add Personality to Your E-Learning Courses » The Rapid eLearning Blog – Tom Kuhlmann offers up advice on how to integrate script fonts into your elearning courses for personality.
  • Intel Teach Elements: Project-Based Approaches – Free, online teacher professional development on 21st century learning concepts: Project-Based Approaches from Intel Teach.
  • The Principle of Proximity in Web Design – Recently I picked up an old design book that I hadn't touched in a while, and it reminded me of a design principle that many of us put into practice probably
  • 10 Tips for Better Print Style Sheets – Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they
  • 50 Free UI and Web Design Wireframing Kits, Resources and Source Files – Smashing Magazine – Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers:
  • Why E-Learning is So Effective » The Rapid eLearning Blog – Tom Kuhlmann offers up reasons why elearning is popular and effective.
  • Technological Pedagogical Content Knowledge – A lecture on Technological Pedagogical Content Knowledge for students in EDUC6751.
Feb 04

Plug-in to Dreamweaver: Adobe BrowserLab

Adobe BrowserLabToday, from the Adobe Education Technologies blog, Brian Chau mentioned how much he liked trying Adobe BrowserLab:

I like the idea of being able to test how the CSS will render on different browsers/platforms without having to have all these browsers and versions be installed on my machine. One feature I particularly like is the ability to display not just a side-by-side comparison of the page render on 2 different browsers, but to display the 2 renders on top of each other as onion skins. It is amazing that sometimes 2 CSS renderings may seem to look identical on different browsers. Yet when put on top of each other, the pixel shift becomes apparent.

I’ve heard of BrowserLab in the last couple of months or so and gave it a try.  At the site, however, I didn’t catch on that you could download the plug-in to make it work inside of Dreamweaver.  That’s pretty cool.  At the site, Adobe says that free preview is for a limited number of users.  So, I encourage you to give it a try and get in on the freebie version while you can.

It works similar to the way that BrowserShots works (which was having some time-out difficulties when I tried them today). Not to worry, though, designm.ag offers up a little of 10 resources to help you preview browser renderings (including BrowserShots).

Have you tried any of these guys out or downloaded the BrowserLab plug-in?

Jan 24

Bookmarks for January 21st through January 22nd

These are my Jumptags for January 21st through January 22nd:

  • Lesson planning tool: Learning Score – Learning Score is an amazing multimedia lesson-planning and delivery tool that uses a music score metaphor to show the range of planned activities for a lesson as a graphical time line.
  • Mockingbird | Wireframes on the fly – Mockingbird is a free-for-now app for creating wireframes.
  • Mocking Up with Mockingbird – Mockingbird is a free-for-now app for creating wireframes. This article discusses its strengths and weaknesses.
  • 17+ Free Online File Conversion Services – Here is a collection of online conversion tools for you to keep handy for all of your file conversion needs.
Jan 12

Bookmarks for January 11th through January 12th

These are my Jumptags for January 11th through January 12th:

  • Browsershots – Check browser compatibility, cross platform browser test
  • Notable | Easiest way for teams to provide feedback on websites. – Notable allows you to quickly and easily give feedback on design, content, and code on any page of a website or application without leaving your browser.
  • fivesecondtest – Have users provide quick feedback on your design.
  • Apollo – easy online image proofing – documents, graphic designs, web designs, maps, photographs, and more… – 27stars – Get feedback and annotations on documents, graphics, and websites.
  • Project Bubble | Simple, Free Project Management and Invoicing Tool – Project Bubble is an easy-to-use project management tool. Easily organise, manage, invoice and share personal or freelance projects.
  • How Fonts Take a Starring Role in Your E-Learning Courses » The Rapid eLearning Blog – Tom Kuhlmann offers some insight and suggestions for selecting typefaces.
  • Usabilla – Transparent Usability: Lean and mean testing – Remote usability testing to collect feedback on a webpage,mockup,sketch or image.
Jan 08

Bookmarks for January 8th

These are my Jumptags for January 8th

  • Here’s How to Be an E-Learning Superstar in 2010 » The Rapid eLearning Blog – Tom Kuhlmann at Articulate prompts a list of avenues for becoming an elearning professional.
  • Ask the Expert – Typography Talk with Brian Hoff | Design Informer – An interview with designer Brain Hoff about typography.
  • Choosing a typeface timelapse video – Brian Hoff, a graphic design, speeds up time to show us how he selected the typeface for a company logo.
  • Example slide effects with instructions – A series of template presentations for Powerpoint using animations and builds. Inside the slide notes give step-by-step instructions on how to create the effects.
Jan 06

Bookmarks for January 4th through January 6th

These are my Jumptags for January 4th through January 6th:

  • Teaching College Math » Blog Archive » How to Grade a Student Blog – A college math teacher shares her rubric and methods for grading student blogs.
  • Navigation Menus: Trends and Examples – Smashing Magazine – This article presents recent trends, examples and innovative solutions for design of modern navigation menus.
  • Showcase Of Modern Navigation Design Trends – A gallery of contemporary navigation on web sites.
Jan 04

Bookmarks for December 17th through January 4th

These are my Jumptags for December 17th through January 4th:

  • The Ultimate Guide to Creating a Design and Converting it to HTML and CSS – A full-featured how to for creating a design and then converting it to HTML and CSS.
  • Kineo – Custom E-Learning Training & LMS Solutions – Tip 33: A Shot of Theory – Keller’s ARCS Model – An overview and application of Keller's ARCS model.
  • Download of the Day: iRed Lite (Mac) – Downloads – Lifehacker – Mac OS X only: Freeware app iRed Lite lets you control almost any application using your Apple Remote, such as with Powerpoint (built in).
Dec 15

Bookmarks for December 14th through December 15th

These are my Jumptags for December 14th through December 15th:

  • http://www.GoogleLitTrips.com – This is the tips and how to page for Google Lit Trips.
  • ICTAC MEMO iPhone Apps for Education – A list of iPod touch and iPhone applications for use with learning. Organized by different content areas, too.
  • The myth of the page fold: evidence from user testing | cxpartners – Joe Leech and Fiz Yazdi discuss the myth of the page fold using evidence from user testing.
Dec 12

Bookmarks for December 9th through December 10th

These are my Jumptags for December 9th through December 10th:

  • How To Explain To Clients That They Are Wrong – Smashing Magazine – GIFs of spinning s on the Contact us page. Common usability mistakes for the sake of visual appeal. Splash pages. Fancy search box. No whitespace. Music on page load….
  • How to Deal with Feature Creep | Webdesigner Depot – If any assumption is safe, it’s that six months after launching a website (or sooner?), its owners will have a list of things they want to change, from minor
  • Project Timeline (Marine Theme) – Google Docs Templates – This is a template for Google Docs for project schedule tracking.
  • Cover it Live – TBR08 – Michael Grant – Barry Dahl covered my keynote live and I didn't even know it.
  • 6 Hilarious Social Media Motivational Posters – These posters are not the usual motivational posters you see hanging around offices. In fact, the little quotes we see on them aren’t exactly motivating and might even be insulting to social media users. Any offense is obviously intentional, but it’s…
  • Sketchy Web Icons: 30 Hand Drawn Icon Pack | Tutorial9 – This Icon Pack includes 30 Hand-Drawn Web Design Icons. This is the perfect set for adding that handmade feel to your own creations online.
  • Secrets to a Faster and Attractive Web Site Design Revealed | Web Design | instantShift – A web designer has many challenges to tackle. The creation of an attractive web site is as important as sending the message across effectively. After all, a web , Daily Resource for Web Designers and Developers.
  • Evaluation Wiki – Mlawiki – This wiki is an ongoing project initiated by the MLA Committee on Information Technology (CIT) as a way for the academic community to develop, gather, and share materials about the evaluation of work in digital media for purposes of tenure and promot…
  • How Getting An F On Your School Paper Makes You A Better Blogger – This guest post was written by Rob Sutton from Ramped Reviews. Image by kharied. This comes to be a surprise …
  • HOW TO: Manage Successful Social Media Promotions – Retailers are getting more traffic and sales from social media sites. Here are some great tips for turning social media buzz into social shopping buy.
  • Easy front-end framework – Easy front-end framework is all in one front-end solution. It includes CSS, HTML and JavaScript predefined code that you can easily use and reuse on your projects.
  • 50 High-Quality Free Fonts for Professional Design – Designers love to have a lot of quality fonts available to them, and fortunately there are some very good free fonts out there. In this post we'll feature some of the best free fonts that can be used in your commercial designs. If you're looking for …
  • 22 Latest Exceptional WordPress Hacks | Tutorials | instantShift – WordPress needs no introduction among designers and writers. It’s usually known as a synonym for blogging. Now days every other WordPress blogs look more or , Daily Resource for Web Designers and Developers.
  • From Blank Screen To Web Design In 5 Easy Steps – Learn a simple, five-step web design process to make sure you include the basic elements every website needs while freeing your mind to be more creative.
  • New Branding Revealed For Winter Olympics 2014 – The official logo for the Sochi 2014 Winter Olympics was revealed last week. This is the first winter games to be held in Russia and it is the first Olympic logo to include an internet URL.
Older Posts »

Viral-Notebook

  • Jots. Jabs. Jokes. Gems.
    This is the homepage for Michael M. Grant, an Associate Professor at the University of Memphis. Inside you can locate a collection of infectious conversations and musings about design, development and learning technologies. In addition, you can find resources and directories of my teaching and research.
  • Subscribe . . . Connect
    Subscribe with your email address:

    Delivered by FeedBurner



    Technorati Profile | LinkedIn Profile
    View Michael M. Grant's profile on slideshare
    • Popular Posts
    • What I learned from teaching children and how it changed my instruction
    • 5 things Facebook can teach us about elearning
    • A letter to my students ...
    • ADDIE—Love it or leave it?
    • The landscape of Powerpoint for elearning
    • Clipart objects. Cool and free. Just the way I like it.
    • The Perfect SCORM: Is there an impact to elearning or not?
  • Search






  • Home
  • Research Interests
  • Publications
  • Presentations
  • Consulting
  • Bookmarks
  • Resource Wiki
  • Contact

Creative Commons License
This work by Michael M. Grant is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Designed by FTL Wordpress Themes brought to you by Smashing Magazine