The Basics of Web Design: Part 3

TGIF and welcome to The Creative Cabana for the third installment of our Web Design series! The weekend is just around the corner my friends and if you find yourself not having anything to do this weekend, try this fun portion of our web design project.

Today the focus is on design templates. For those of you who are new to this experience, a template is basically like a model which gives you a visual design of how your page could be set up. Templates are extremely useful in planning how you want your page to look. It gives you a map or guideline as to how you could layout your page. There really is no universal design as to how webpages are setup, but there are some universal pieces that you'll want to include on your site: name, logo (if applicable), images, tabs for other pages, and contact information. You may only have one page for your site, or you might have a few pages, but either way you'll want to maintain consistency throughout your site. This includes things font, logo images, names, etc. The last thing you want is for your visitors to become confused and disoriented when reading your information. A template can help you keep track of those details so that you won't be lost in web limbo.

To help walk you through this process, I'm going to demonstrate the effectiveness of templates using my own online portfolio. To view my online portfolio live click here and a new window will open. I've also provided screen shots in this post to help with this tutorial as well. As mentionned in part 2 when I discussed domain and hosting sites, I talked a little bit about my portfolio site being available through Wix.com. Below is a comparison of the template I selected when I first created the site. On the left is the original template example, and on the right is my finished site (up to this point).

So as you can see I stuck with the basic layout, but did make changes to some features like the background image and font. I chose this particular template because at the time I wanted something bold, but yet simple. I wanted my site to reflect the concept of me being a media professional, so I wanted a sleek but technical look. The graphic next to my picture is an image I designed with the intent of being a logo, however it isn't simplified. Still though I really liked the image and decided to leave it on the site anyway because it illustrates the areas I'm most experienced in: video, audio, computers, and photography. What I want to do now is give my portfolio a fresh new look that makes a statement. I'm still keeping my site on Wix so the templates I'll be show are coming from Wix. Don't let me scare you away from places like WordPress, Blogger, or any other domain hosting site. This is simply my choice for my portfolio; other sites offer great tools and templates that may be more aligned with what you want. So don't think I'm pulling you in a certain direction.

After doing some browsing there's four different template designs that I'm leaning towards, but I wanted to share these with you so you can see the differences in design. You can click on each of the titles of these templates to see a full view as well. Who knows, maybe you'll find one that speaks to you and would be a perfect fit for your professional needs!

1. Media Marketing Website Template

First off, I have to admit that my favorite color is pink. I was instantly attracted to the dramatic pink in this template and how it makes a statement against the sleek black background. I also like this template because it's very similar to my current site right now being simple. There's isn't a lot of fancy graphics or special images placed into the template (unless you individually add those yourself). This would be a great template to follow if you're wanting to stick with something innovative, but simple. Don't worry if pink isn't your color either, you can change that as well.

2. Curriculum Vitae Website Template

What strikes me about this template is how reminds of a profile. If you have a Facebook account think about it for a moment. You go to your profile page and see your picture, photos, about me, and other related tabs of interest. That's sort of what this template feels like to me and it might be the most familiar format to everyday users. Rather than search around on your site for information, they can read this as a profile view and gather organized information. The structure of this template is perfect for online resumes or simply creating a small private service site. If you want to market yourself as a DJ, Babysitter, Tutor, or another private service provider then I think this site would be a great template for you.

3. Creative Events Website Template

With this template there's immediately a lot of attraction and opportunity for action words right on the homepage. I'm going to call this concept the "attention grabber". Think back to when you first learned about writing resumes and cover letters. Something you probably heard was how you want to grab your readers attention and draw them into your work using strong, action words. This particular design gives you that ability through the use of text, symbols, and pictures. I think it also has a more modern and professional look to it, in comparison to the other templates. It's still a simple concept, but you do have more material and options to give it some life. With the Creative Events template, I can easily picture smaller businesses using this format to help promote products and services. There's a lot of great customization options with this template that can appeal to anyone.

4. PR Blog Website Template

Not going to lie on this one, this template is really cool! I love how it's setup in the format of a blog/website. This is great for people who want to combine their blogging lifestyle into their website. It has a great front page where visitors can read your posts, and there's sections devoted to other aspects you want to share on your site such as a bio, your resume, or other samples of your work. One thing I've noticed since my graduation, is that I'm seeing more of professionals blogging in relation with their careers. Some of my college friends blog about their teaching experiences and that's a great way for people (or potential employers) to see first-hand how their real-world experiences are influencing their professional careers. Collaboration between blogs and online portfolios go hand in hand sometimes because the blog is evidence of how you are using those skills to develop your career. I'm a creative/media professional, hence why I started The Creative Cabana. This template is great for business professionals as well because it gives visitors a different perspective of shopping and products. Rather than jumping right into shopping, you can have people read about a specific product in a blog post and then redirect to the sales page. A little out of the ordinary? Perhaps, but again it's a different perspective.

Alright my friends, here is your weekend assignment: visit the different host domain sites, research and experiment with templates you like, and start setting up your first webpage (generally the home page). Many of the hosting sites give you step-by-step instructions on customization options and tips on ways to make your site look incredible. I know I'm going to have fun re-imagining my portfolio site and I hope you have fun with your site too. If you ever have any questions, concerns, or suggestions please share them by commenting on these posts. DON'T FORGET! Make sure you are following The Creative Cabana on Facebook, Twitter, and Pinterest for more creative fun. Have a great weekend and I'll see you all on Monday for our next Creative Mastermind reveal!

*Image used for the Template outline layout at the beginning of this post was found on Google Images as a search result. This image is being used for educational purposes only. Other images shown in this post are screenshots taken by myself of template examples and my own portfolio, all which are from Wix.com. I do not own Wix.com or have any affliation to its owners. No Copyright Infringement Intended.