Before you can begin any work on your website or blog, you need to understand what you would like to accomplish. As a part of the WordPress Series, we will walk quickly through the process of designing your website.
Know Your Audience
As you begin the journey of creating your website, you need to know that site’s purpose. Are you writing a technical blog aimed at other like-minded geeks? (Like me!) Are you blogging great household, child-rearing, and craft tips to stay-at-home moms? Are you designing a small business website with specific customers in mind? Are you developing a website with cool experiments and learning tools for kids?
You wouldn’t want to use a professional business template for a kids site. And you wouldn’t want a dated or childish design for a portfolio website. While working on your design, always keep your audience in mind.
Get Inspired
One of the best tools for planning your website is to look around and be inspired by other great design. I encourage you to:
Look at your competitors. If you’re working on a business website, find out what your direct local competition webpage looks like. Discover the best websites in your business. Do lots and lots of Google searching.
See what’s happening in Design. I particularly enjoy pages like Web Design Ledger. They gather information on what the best websites look like, what technologies are hot, and what functionality is necessary or cool.
Look at WordPress Themes. When your goal is to develop your site in WordPress, look around at the top free and paid themes. My favorite themes usually come from Elegant Themes. For $39 a year you can access dozens and dozens of themes and plugins. They are constantly adding new themes and updating the older ones. Another source I use regularly is WP Explorer. They keep a huge database of themes from different developers.
Think Mobile. When you’re deciding on a design, don’t forget to see how pages look on smartphones, tablets, and resized computer browser windows. You may get some great ideas.
Pay attention to Logos and Color Schemes. If something catches your eye, save it or make a note. (I recommend using Pinterest like this!)
Remember, if you like elements from different sites, you can sometimes work those elements into your design.
Design Your Logos, Fonts, and Color Scheme
Logos
Your logo is important. It will be used on your website and will be identified with your “brand”. You’ll use it on your business cards, emails, and flyers. You can pay a professional to design a complex and personalized logo, or you can find something you like and create it yourself in the photo editor of your choice. Or, your logo can be as simple as your domain name or business name in an interesting font. Do a Google logo search. Or search for “logo” articles in Web Design Ledger.
Don’t forget to make a coordinating Favicon! For more information on favicons, my Favicon Tutorial.
Fonts
You may be wondering why you should worry about fonts. I encourage you to look at articles such as 30 Examples of Effective Font Replacement in Web Design. You should definitely look at Google Fonts. You can download them to your computer, or use them in your website. I also recommend that you have a look at an article on Mastering Font Combinations. It’s important to understand what fonts work well together. Other resources include font pages such as DaFont and Urban Fonts. You can find tons of free fonts, or even pay for a particular font.
Color Schemes
When planning your color scheme, try not to be too trendy. Your site will look dated quickly and you’ll need to update it. Also, be aware of general color rules. Color Combos is a great website for deciding on coordinating or dramatic color sets for your site. If you’d like to educate yourself, here’s a great article on The Color Wheel and Color Theory.
Plan Your Menu Structure
Your menu structure will depend heavily on what type of webpage you’re designing. For a small business page like skyviewdev.com, there is a one-page blog while the bulk of the content is static. The menu structure is:
Services > (Tech, Admin, Travel)
Pricing > (Rates, Policies)
Portfolio
Shop > (Gifts, Redeem)
About > (Hours, About Us, Contact Us, FAQ)
Tips & Tricks (this is the small business blog)
This webpage (Epiphenie.com) is predominately a blog, made up of many articles on many different topics. If you notice the top of the page, it has two menus. The top one is for the static pages (Home, About, Articles, Links, Sitemap, Websites and all of their sub-pages). The lower menu contains the blog categories (Computer, Life, Mobile, Tutorials, and Web and all of their sub-categories).
Decide on your page structure, making sure it is logical. While your main pages may never grow, leave room for your blog categories to grow and change.
Write Your Static Content
Before beginning your website, you need to have a good amount of content ready. Things you should have prepared are:
- Photographs of you and/or your business
- Great images of your products
- About Me / About Us content
- Short paragraphs to describe you, your page, or your business – these are great to put on the home page
- Some beginning blogs if you are starting a blog page. Include images. (We will cover images and copyright laws later. Do NOT steal images from another page!)
- Header and Footer information
- Any other information for your pages, like Location, your Portfolio, an FAQ, or anything else you want to add.
And stick around to see what’s coming next week in the WordPress Series!
