Building a Website with WordPress: The Basics

wordpressimage

WordPress is a powerful (and FREE) blogging tool and content management system. In this introductory post to building a website with WordPress, we’ll show you how expert author Geoff Blake goes about creating a website with WordPress from scratch. This is part one of a three part series, where we’ll be exploring the design process and finalizing the layout in later posts. 

Screen Shot 2014-06-19 at 10.11.36 AM

Why use WordPress?

The main reason why you’d want to use WordPress for building websites is so that your clients can take over the management of the website using the content management system within WordPress. WordPress has the front-end, which customers and visitors will see, but it also has the back-end, where the administrator will be.

The overall process:

In our Building Websites with WordPress training course, Geoff explains the process that he uses to create a WordPress website. He starts in Adobe Illustrator, where he creates the complete wireframe, including main layout blocks. Staying in Illustrator, he moves on to applying design to the wireframe, specifically colors, fonts, imagery, and graphics.

The next step is taking the wireframe you’ve created in Illustrator and moving it into Photoshop to apply photography.

Finally, you’ll take everything you’ve built in Illustrator and Photoshop and start extracting it by building the PHP, CSS, and HTML to incorporate it into WordPress.

Setting up Illustrator for web layout:

As mentioned before, the wire framing process starts in Adobe Illustrator. Before starting the process, you’ll want to first create a new blank document. Inside the new document menu, it’s important to change the dimensions to suit your web layout needs. Geoff changes his to 960×2000 pixels because you want your web layout to fit inside a browser monitor that would run a minimum of 1024×768. You should also change your color mode from CMYK to RGB, because everything in web design is in the red, green, blue color space. Once you’ve got your blank Illustrator document set up, you’re ready to begin the wire framing process!

The wire framing process:

Referring to the design that Geoff previews in the intro video (see image at the top of this post), the idea in this step is to get a skeletal structure together. Geoff starts in the top left corner, grabbing the rectangle tool and dragging out a rectangle. This will serve as the placeholder for his company logo. He then adds a few other rectangles, one for the main menu and one for the slideshow in the centre. Switching to the type tool, Geoff types in the category names that he wants to have in his menu. You don’t need to worry about the font size and style at this stage, just as long as you have a general idea of what you want the final result to look like. Once you go through and add all of the elements to your wireframe, such as additional text, a sidebar, and a footer, you can go ahead and add some finer details, like dummy text (you can just use lorem ipsum for now), just to help you get a feel for what the actual design will look like. Here is what his final wireframe looks like:

Screen Shot 2014-06-19 at 10.25.03 AM

In part two of this building websites with WordPress series, we’ll focus on the design stage, like how to choose and add colors, fonts, and various effects. If you’d like to view free videos or learn more about this process, check out the full Building Websites with WordPress training course on our company website. Additionally, check out the videos below that will further demonstrate the wire framing process.

Wire framing basics:

Wire framing – Part 1:

Wire framing – Part 2:

 

 

Comments

comments

Save $50 when you sign up for an annual Learning Library account Learn More