Headway + professional graphic design equals easy to manage, beautiful websites
Do you ever land on a website that is so clean and professional looking that you presume you could never develop something so high class? If you scan the landscape of the web, it’s clear that most small businesses, churches and people you find online are convinced that they have no option but to settle for cookie-cutter or third rate design. There are a lot of dreadful websites out there!
Headway is the left side of the brain that your right side yearns for.
I’m a graphic designer who is very comfortable functioning out of the right side of my brain. The creative juices flow continually, and thanks to Headway that flow isn’t dammed up on this side of the web. The juice floods right out of Photoshop and into the digital world.
You too can take advantage of the brilliance of Headway, whether you hire a professional graphic designer to supply your site with beauty, or if you are comfortable enough to do it yourself. You can have a custom, one-of-a-kind website online in no time.
Why I refuse to live without Headway
WordPress. The brilliance of WordPress only increases with time. This ubiquitous CMS will be with us for a long time, and it’s only getting better with age. Headway plays perfectly with WordPress and it makes the experience pretty awe inspiring.
- It gives me a blank canvas. As a designer it’s important for me to have a lot of liberty to dream and then put that dream on paper, or in this case, on screen. A well designed website will have a healthy mix of a variety of elements including content, clear navigation and sharp, provoking and compelling graphics. Headway allows me to break out of the confines of a walled, pre-designed theme into most any creative direction I want to go.
- A new site can be up and running overnight. Of course, the installation is a snap, and then all that remains is the fun part! Design takes some time, but if I have all of my slideshow, header and other images ready to go, integrating it into the Visual Editor is so fast and simple it really seems unfair to all of the other developers out there!
- I don’t have to code. Ever. Remember, I function primarily with my right brain. The strange_css_code($is_beyond_my); {level}of ‘expertise’}. I’m a graphic designer that is able to confidently design amazing websites and I have a bunch of clients who couldn’t be happier. Does it help to know how to work with code? To pop it into certain places? Sure, and I can do that. But, with Headway you really don’t have to.
- It’s easy for my clients to work with. After I complete a site for a client, they usually don’t mess with the design for a while—but, with Headway they could easily make updates without the need to re-hire me. The learning curve is near zero.
- Support. The team at Headway is in love with their pet project—and it shows. Not only do they have a blast developing this game changing product, they enjoy interacting with their fans and clients. They have repeatedly been there to answer simple, seemingly unimportant questions—with speed.
Yes, you should consider hiring a graphic designer
A few professionally designed slides and a header along with a smartly laid out and integrated template will go a long way in taking your mediocre site into the expert ranks.
I have seen some amazing, graphically unified sites ruined by a client who chooses to drop a poorly designed image into their slideshow. A pixilated, stretched image (people actually do that in order to get it to fit into a predefined space!) that has an opposing color scheme in relation to the rest of the site brings tears to my eyes. Such beauty should not be violated with poor design elements.
I’m going to design a site in Headway with you in just about an hour!
Now, I am cheating just a little bit since I’m going to duplicate a site I already designed. But, the only difference in the process is that I already have all of my graphic design done. So, I’ll be installing WordPress, the Headway theme and some plugins from scratch. I’ll then work with the layout and add the design elements. Let’s get started!
Starting time: 5:40pm
In the control panel of my host, MediaTemple, I add a new WordPress application to the server.
5:43pm: WordPress is installed
5:44pm: FTP Headway and plugin files
Using Filezilla, I move the files from my laptop to the respective themes and plugins folder. I have a set of regularly used plugins that I use for new client sites, but for the sake of time, I’ll only add a few that I consider to be very important: backupbuddy, Reveal IDs and TinyMCE Advanced.
5:52pm: Activate the Headway theme
5:54pm: Getting started with Headway
There’s several very beneficial fields that you will want to fill including the favicon location, SEO and other options. But, since we are in a hurry, we’ll let that slide for now!
5:55pm: The Visual Editor
Your first time in the editor, you’ll be greeted with a setup wizard. All of the choices you make can be overridden later, so don’t worry too much about what you choose.
5:57pm: The blank canvas
Here’s what you’ll see after the wizard is finished launching your new site (or something very similar depending on what options you chose in the wizard).
5:59pm: Back to WordPress Admin
Since we don’t want the front page of our site to include blog posts, we need to make some changes in the WordPress Admin.
You will need to add two new pages: Home & Blog
Under the Reading settings, you need to change your front page display setting. Choose “a static page” and then choose the appropriate pages.
You will also need to change the Permalinks settings to “Day and name.”
6:04pm: Back to the Visual Editor
Now, when we refresh the page, the blog posts will be gone and that leaf will be replaced by your home page.
6:06pm Changing some layout settings
For this site, I’m going to choose to give it a width of 1200 and a vertical margin of 0.
And I’ll give my leafs the following variables:
6:10pm: Time to change the background.
Here’s the resulting background image:
6:12pm: Adding my header
You’ll want to ignore the recommended image size. We are going to make the header span the width of the wrapper, of the website, which is 1200. I have my header saved and ready to upload, and here’s what happens after I publish the site:
To remove the tagline, click on ‘Options’ under ‘Header’.
6:16pm: Back to WordPress Admin to add my slides
Grab the image URLs so you can paste them in the image rotator in the Visual Editor.
6:21pm: Insert the slideshow
First, you need to delete the leaf that contains the home page. Keep in mind that the home page in the WordPress Admin won’t be visible, so don’t attempt to add anything to it. But, as far as the Visual Editor is concerned… and your website in its completed form… this page is the home page, the first page people see when they enter your address.
Now, add an image rotator from the ‘Leafs and Columns’ section under ‘add’.
You will want to make sure you have your site setup with two columns, plus an extra bottom leaf container.
Also, size your first column to 900, and your second to 260.
Now, click the pencil icon and we will add our slides using the URL’s from your media library.
Note, you can add in a hyperlink too if you’d like so people will go where you’d like when they click a slide. For this tutorial, we’ll leave them blank.
Now, hit ‘Publish Changes’ on the lower right of your screen.
Here’s what we have now!
6:30pm: Lets add some widgets
Now, it added the sidebar above my slideshow, but that’s not where I want it. No worries, we are working in Headway! Just click ‘Actions’ and then ‘Arrange Leafs’.
Now, just drag the sidebar to the right column.
In your WordPress Admin, add some widgets and come back to the visual editor. Publish Changes and this is what we have:
6:38pm: Lets add some images to the bottom (do you notice how clean, professional looking images makes all the difference?)
There’s a number of ways to do this, but I’m going to simply duplicate the process I used with my image rotator above. I’m going to add three more, in the bottom container. Then, I’ll add some new images in the WordPress Admin and enter those URLs into the image rotators. Note, these images won’t actually rotate. Each one will hold only one image.
I’m also going to add an HTML/PHP leaf, and put the embed code for a video in there. Note, you’ll need to resize your leafs to the width you want and then Publish Changes. Here’s what I got:
Oops…I don’t want the title of my video leaf to say HTML/PHP, so I’ll click the pencil icon and remove the checkmark from the ‘show title’ option under the ‘Miscellaneous’ tab.
6:46pm: We are almost done! Let’s change one more thing.
I don’t like the color of my navigation bar, so I’m going to change it using the ‘Element Selector’ under ‘Styles and Designs’. You can click most anywhere in the Visual Editor and change the variables! This is powerful! Change fonts, colors and more.
And here’s the new menu bar (after I changed the color for all of the navigation bar items):
6:50pm: We are done with the design!
Of course, there’s more work to be done on interior pages, but your primary template elements and layout is done and it just took over an hour! Headway is that powerful!
You can compare this test site with the actual site I mirrored here:
- www.burtonsites.com/thelab (test site)
- www.revivallab.com (actual site)
Can it get any better?
Of course! Remember we’re working with both WordPress and Headway. You can add plugins, additional frameworks and more! For example, on the actual site at www.revivallab.com you’ll see a different menu system. I chose to go with mega menus instead of the built in menu system. I also have a calendar plugin on the right sidebar instead of recent posts and a Twitter feed.
Remember, Headway makes it EASY to setup a professional website, and all you have to add is sharp design and compelling content!
John Burton