Archive for the ‘Web Design’ Category

Shattered FX Silicone Mask Website Redesign

Shattered FX Welcome SignI’m interested in web design, and a web developer I know was working on updating a silicone mask website. I don’t know much about silicone masks, but I do know about color and typography–I did earn an A in Visual Communication. Since the web developer, Derick Hess, has a lot of experience programming and is more concerned with functionality, we thought teaming up so I could consult on aesthetics would be a brilliant idea.

I made the banner at the top of this post using Photoshop. That’s the software we used to edit photos to give them transparent backgrounds for the thumbnails on the Silicone Masks and Silicone Half Masks pages. Also in Photoshop, I designed the border (from an existing image of barbed wire) that appears around masks when you mouse over them.

For the colors used throughout the website, I took a sample of colors from the images used for the border of each page using Kuler. We’re still tweaking the fonts, but before we get too fancy, we want to make sure the content is still readable. I found a few appropriate fonts that we’re still testing.

I worked on the web pages themselves in Dreamweaver. While Derick worked on coding and other pages, I worked on keeping the layout of individual mask pages consistent. Together, my partner and I edited over 400 files this weekend.

The owner of Shattered FX is very creative and had a lot of input on what he wanted out of the redesign. He provided us with all the content and original images. We were going for something spooky, industrial, and modern. There’s still more work to do; however, we’re all very pleased with the results so far.

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.

How do I learn HTML?

The answer is not “carefully,” my friend. Research has shown that learning from mistakes works better than playing it safe, as long as you’re not skydiving.

I’ve been meaning to learn HTML for a while–I’ve been blogging since 2006 and learned some basic tags (tags are to HTML as vocabulary is to language) but I never sat down and learned how HTML works. One of my friends wanted me to go through all the details but I quickly tired of that. I have found having a goal in mind (what do I want my website to be able to do?), muddling through on my own, and then talking to someone who knows the language well to be most effective.

My someone who knows HTML also gave me the tip to use Notepad++ rather than Notepad to create HTML files. Notepad++ numbers lines, color-codes elements, automatically indents, . . .; all of which makes code easier to follow. Plus, Notepad++ can still be downloaded for free!

How will I know when I’ve learned enough? Certification would be nice, but probably not necessary. w3schools.com has an HTML Quiz that will suffice.

Resources:
http://www.htmldog.com/guides/htmlbeginner/
HTML Dog is a nice step-by-step tutorial. Unfortunately, as of this writing, none of the articles or examples work.

http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
The World Wide Web Consortium (the authority on HTML) has a bunch of stand-alone examples on specific tags and a place where you can play with bits of code.

http://distancelearn.about.com/od/isitforyou/tp/FreeOnlineHTMLClasses.htm
If that doesn’t work for you and your learning style, you can try one of the links from these resources. About.com offers a free online course on HTML where you get weekly emails and assignments.

Commonly used Keyboard Shortcuts:
Copy=Ctrl+C
Paste=Ctrl+V
Save=Ctrl+S
Undo=Ctrl+Z
Refresh=F5