Posts Tagged ‘one.com’

How to create a professional website using WordPress as a non-digital Graphic Designer

Posted on: March 27th, 2012 by Fransgaard 3 Comments

On Twitter, a talented graphic designer I know recently asked how he could learn HTML code so he could become a digital designer (as in digital art director/UX designer rather than a digital artworker/template designer/frontend developer).

While knowing HTML has its benefits, I don’t think it is a requirement as a digital user experience designer to be able to code HTML to a professional standard. Rather than getting bogged down learning HTML from the ground up, I believe it is much better understanding what can be done with HTML without being able to do it yourself. It gives a much broader foundation faster.

However, the question is a part of a broader series of questions I am regularly asked which can be summarised into a single question:

“How do I become self-sufficient in producing a professional digital presence?”

The quick options are setting up a blog, A facebook page, a flavours.me profile etc, but at the end of the day nothing beats having your own domain with your own website under your own control.

Instead of learning how to hand-code a website I recommend downloading and installing a self-hosted WordPress CMS system… Now now, don’t run away yet. Let me take you through the steps…

0: Secure support

Best option is find a friend who understands the web, not necessarily a professional, just somebody who “gets it”. You may not need that person, but it is nice to have somebody just in case.

Linkedin is full of helpful groups dedicated to WordPress.

1: Sort out server space to host your website

WordPress a server-side scripting language called PHP using MySQL database. Don’t worry about what it means, just remember the words “PHP” and “MySQL”. You need to find a host that has those words in its sales material.

I use www.one.com because:

  • They do domain and hosting in one go
  • Their setup process is fast and simple
  • Their welcome emails are simple and complete
  • Their support is amazing

There may be other equally good hosts, but since I have never had any problems with one.com I have never shopped around for other providers.

2: Learn to transfer files to your server space

Get an FTP program. I use FileZilla; Simple to use, does what it says on the tin.

Login to your new domain using the details you got from above and upload a file to your server space. A jpg picture is good, a simple HTML file is better. Here’s a simple test HTML file.

It is like moving files between two folder. Just one of the folders happens to be on a different computer than your own.

TIP: You can open the sample HTML file in a text editing program such as TextEdit (mac) or Notepad (PC). Try and modify the file and upload it again to see changes happening.

3: Install WordPress

Download the latest WordPress from WordPress.org and follow the instructions that comes with the Zipped file. More detailed instructions can be found here, but the attached instructions should be enough to get you up and running.

4: Understand WordPress basics

Don’t start any design work yet. Instead play around with the basics of WordPress by adding new pages and posts. Posts are blog-like posts with categories, tags and date stamps. Pages are less time-sensitive content such as About me etc.

Remember you can always delete any content later on.

5: Understand the power of plugins

Find plugin

Imagine functions you would like on your site. For example a tag cloud, a twitter stream a gallery light box etc. Go to the plugins section and use the add new section to search and find relevant plugins. Install a couple to familiarise yourself with how to make use of plugins.

Make sure to explore the widgets options as well. Some plugins have widget options giving you some control over where the actual plugin will appear on your site.

As with content you can always delete the plugin later on, but this exercise is designed to show you how big an arsenal of functions the wordpress community can offer.

6: First baby-design step.

ThemesOnce you feel confident using plugins the first step of designing your site is to find a WordPress theme that roughly does what you are looking for.

Start with a free theme. There are loads out there to download from here.

Note, some free themes add credits to the footer which I think is fine, but some also adds ads you do not have control over, which I find a bit more problematic. A few plugins do the same. keep eyes out for potentially unwanted content appearing on your site.

Also note some themes may have problem displaying some of your plugins. It’s all trial and error. More often than not though you won’t find any conflict.

Step 7,8,9….etc

Themes often offer the ability to change headers and colours. Make use of those to modify the design.

In time you might want to change something very specifically by editing the HTML or even the PHP code. I won’t go into details with that. All I’d say is make a copy of the Wordpress theme you want to modify so you can quickly switch themes if something goes wrong.

the good thing about WordPress is the ability to quickly turn things on and off.

Let me know how it goes.