Tag Archive for 'notepad++'

Building a portfolio website

For those of you that don’t know (probably everyone!) I’m enrolled on course called Flying Start, which is a training scheme for local artists and workshop delivery. Most of the advice we get is on promoting ourselves and, aside from word of mouth, I think one of the best marketing materials is a regularly updated website. When I mention that my degree revolved somewhat around web design I suddenly get people on the course asking me either a) if I can design their website for them or b) if I can advise them on how to get their work online. Well, instead of listing off the stream of programs and techniques that I use, which occasionally goes over the top of their heads, I shall instead offer my advice here!

My First bit of advice is to just start with a pen and paper. Srsly! Plan out how you want your pages to look, what you want them to do and even get the crayons out and colour stuff in. Also, think about the purpose of your website. There’s no point of having a games section on your website if you just want to display your portfolio. Doing this will really help steer the design of the website in the right direction. It’s a lot more productive than looking at a computer screen and expecting the design ides to jump out at you and build itself.

Once you’ve designed your website on paper, unless you’re going to pay someone to do it, I think doing a bit of background reading on coding and web technology is essential. I don’t expect someone who just wants to display their portfolio, which, in the case of many of my colleagues, consists of images and stills from movies, to learn the ins and outs of PHP, CSS, MySql and HTML. I just think it’ll help to know some of it so that a) you know what you can achieve with the technology and b) editing it yourself will become easier.

Now comes the decider. You know what you want you website to do, but do you build it from scratch yourself or use a CMS? For those that don’t know, a Content Management System (CMS) is, as Wikipedia defines:

…a system used to manage the content of a Web site.

To put it in layman’s terms, all you really have to do is add the text to a blog post, add the image to a gallery or upload a video and the CMS takes care of everything else. On my website I have used two CMS’s. Wordpress and Gallery2 (both free). Wordpress manages the blog and other static pages and Gallery 2 manages my portfolio pages. I didn’t have to do any coding (that is, unless I want to edit the look of it. More on that later)

I recommend using a combination of Wordpress and Gallery2 as:

  • They’re free
  • You can get a lot of support from the support fora on both websites
  • You can customise it easily by either editing yourself or downloading themes (which themselves usually have some level of customisation)

However, they aren’t specifically tailored to portfolio websites. I’ve seen some great things done to Wordpress to get it working as an excellent portfolio website, but if you want something out of the box that’ll give you a simple but effect portfolio website I recommend Indexhibit.

It seems like this is a relatively new CMS, but it’s quickly gaining popularity amongst artists. I like how simple and no nonsense it is, but after taking a look at around ten of the example websites this format layout format soon becomes very repetitive and, well, boring. Still, it is effective in what it does and as it grows in popularity I’m sure it’ll gain more features for customisation.

So, now that you’ve chosen your CMS, uploaded it via FTP (more on that later) and installed it you decide that you don’t like the look of it and only want to tweak the theme slightly. That’s where you need to get your hands dirty and actually do some coding! Don’t worry, it’s not as hard as it sounds. For this part people usually assume you need Dreamweaver. Wrong! Dreamweaver is great at what it does, but I think it’s more for power users and people wanting to become pro web designers. If you have it use it, but if you don’t, you don’t need to use it for this simple task.

For this task I recommend that you download and install Firefox, not just because it’s free, but because it has many tools to aid in web development, such as Firebug. What this handy little thing can do is allow you to inspect every object on screen and edit the Cascading Style Sheet (CSS) (the file that controls the formatting and layout of a page) in real-time. I then usually open the CSS file in a webpage editor, like Notepad++, make the necessary changes et voila! Trust me, it’s easy. Once you have Firebug installed, open up the interface (usually by pressing F12 in Firefox) and then press the inspect button. Hover over any object then try and edit its properties. There you go, you just edited your webpage!

Oh, and one bit I have left until last is hosting. That’s mainly because, to be quite honest, I don’t know who to recommend. A lot of people say a lot of different web hosts are better than the others. Just to remind you, a web host is something that allows you to upload your website from your computer to the internet. Read more on Wikipedia. My completely uneducated advice on this matter (having only ever use two hosts) is that you can expect to pay about £40 upwards a year for a relatively good host. If I’m wrong, then I’m wrong. Do your research! Once you have your host you can upload your files from you computer to your host via FTP. For that I recommend FileZilla. It’s free!

Oh, and on a side note, all the software mentioned here is free, and in most cases open source ;-)

So, hopefully that was of great help to you. If you can recommend anything other than what I have here please do!