Archive for the ‘web design’ Tag

Online Teaching Portfolio Design

teaching portfolio thumbnail

After reading Road to Teaching, I got the idea to get my teaching portfolio together. In the book, Hougan suggests aspiring teachers include: cover letter, belief and philosophy statement, observation reflections, resume, professional reflections, and an annotated reading list. I already had most of the content from a year of teaching and two years of taking teaching classes online. Over the past week, I’ve been compiling, rewriting, and working on formatting.

Design restraints include limiting myself to free WordPress themes, but even though there’s not much you can customize, there’s a lot you can do with widgets and knowledge of HTML. I looked for examples of what to include in online teaching portfolios and clean designs. The theme I chose was Skeptical by WooThemes. I liked the simple design and default color scheme, the space in the sidebar and four footers for widgets was a bonus. My only criticism of the theme is that the difference between regular text (gray) and links (black) was too subtle, but I made the difference more apparent with underlining.

One widget that I discovered but didn’t use was the one that lets you include an image, I ended up only including a personal photo in my about page, as you can see above.  I also included a search and pages widget in the sidebar. I played around with how to include an image gallery to showcase my classroom photos. Since they’re not all square and the same size, columns of thumbnails didn’t work for me, so I chose the slide show. I also figured out how to embed PDFs using Scribd. Some of the formatting from Word didn’t transfer to these pages well; consequently, I wanted to embed PDFs so the formatting would be intact.

My First Attempt at Creating a Website Mockup

home page mockup

click image to enlarge

contact page mockup

click image to enlarge

Here are the two pages I completed. We discussed our concept as a group, made a rough sketch of the layout in Paint, and then I made master templates at www.mockflow.com. Consistency issues came up switching between the online tool, PowerPoint, GIMP, and Paint. Also, I had to use kuler.adobe.com to get the hex code for the beige we used so it would match other documents we created, but that color didn’t look very good in print. If we had more time, I would alter the navigation to be less redundant and more specific.