WordPress for Designers. This is going to be a part of a series of articles where a graphic designer can build a WordPress site, where to start and how to achieve that goal with almost no WordPress experience.
If you are reading this article chances are that you are a designer that wants or needs to have a website and you are trying to learn how to do it in a easy and simple way.
A quick introduction
WordPress is a content management system, is open source and it is free, is not that simple or friendly at the beginning, but is the most easy way to have your own self hosted website today.
There are plenty of solutions out there to get your content online, but if you want to do it on your terms, well… WordPress will let you do it.
You will need some parameters to design your site visually and then “move” or “migrate” that design to WordPress, that means that you will design your site, and then you will develop that design in wordpress. Later in the series of articles will show you where to do that, and that means that you can develop your site, in a local server (your computer) or in a hosting server (the company that will have your site located to public worldwide access), but for now we need to start to design the site, and that needs some rules.
A WordPress site has some “parts” or components to help you display your content, there basically 4 areas:
– A Header
– A Sidebar
– A Main Content area
– And a Footer
Inside those 4 areas you can have divisions, or divide those areas in smaller pieces or even change the sidebar placement (we will look into that in future articles), but basically that will set the most simple way to show your content.
So, how to design for wordpress?
Well, in the Header Section you will certainly place your logo and menu (The links to your content) and that will be kept thru all your pages, as well as the Footer section that can contain other kind of information, most likely that information will be show exactly the same in every page the visitor see, unless you develop the header and footer to change according the page visited, but that will be rare, at least at the beginning.
The good thing about developing in WordPress is that you will be developing the header just once, and WordPress will show the same Header and Footer every time a page of your site is shown to the visitor.
For that reason, and for visual communication reason, try always to keep them simple, and effective, use your logo and a font in your design that is easy and quick to read, and you need to find that font available for web use. Many years ago we use Images for every item in the menu, so we just use any font that the designer wanted, but now the best practice is to use “Web fonts” so they are displayed across all the browsers in the same way and the site loads fast if were all images in the menu.
In the sidebar you will place dynamic information like a list of categories, or maybe small pieces of context that may remain there no matter what is in the Main Area content, like Social Network buttons, or an event information, a calendar with those events, or whatever information you need to show, and that information is a little bit more dynamic than the Header and Footer sections. Lately, a sidebar is not always visible, at some point the sidebar can “disappear” of the design, and you can place nothing in the sidebar. It depends on what do you want to communicate, in the code the Sidebar will exist, but it will have no content.
In the Main Area you will show the most important information you want to show in that particular page, most of the sites will have a different Layout for the Home Main Area and the “Inside” Main Area.
The Home Main Area the first thing you see when enter a site, then you move to every page listed in your menu and that ill show that information in the Main Area, but it will be focused in the primary content that page has, for example if you go to a “Company” or “About Us” page, it will show the company information in the main area, or if you go to “Contact” it will show you contact form, and maybe Street Address and Phone number to be contacted. In the Home Main Area you will likely show what you do, and how you do it, your goal, so in that small piece of screen you need to show your visitor, the reason of your site, keep that in mind when you design the Home.
So for now, I’ve listed a generic structure of WordPress, but you can start designing with this information, in the following months we will be in more detail, and even maybe the workflow to design a WordPress site to be later developed.
Thank you!
Recent Comments