Iv been wanting to do a personal project, that I could craft from home for a while now. As I’m very much into the whole keeping fish hobby, I built a site that explains in simple detail how to set up a fish tank, correctly. Designing a website without having to worry about content, is a joy. I knew I could fill the site content without a problem, as it’s mostly my own knowledge. This allowed me to design the website around the content.
The site is live at: fishtank.guide
My aim was to create a very informative site (text heavy), that doesn’t sting the eyes, and is easy to read. A site people could go back to reference when they needed to. The site had to be friendly to the user, and apply to beginners as well as the more experienced.
I drew a series of flat icons in Illustrator. These breaks up the blocks of text. The site is based around its text content and the use of large images wouldn’t be that important. A collage of images would detract the importance of the information, becoming more of a hindrance. However a few simple, small icons would compliment the different sections.
At first this was going to be a one page website, and the separate guide sections weren’t going to link to anywhere. However on mobile this proved difficult as the vertical scrolling was endless, scrolling down the page. I did however find a workaround, by adding a menu which jumped up and down the page to the separate sections. Even though this worked really well, I felt I wasn’t able to input as much content as I liked, without the page going on forever. I didn’t want the simple design to restrict the amount of useful information I could input. So I sat down and made each guide, link into it’s own page, revealing further content. I wasn’t going to limit the content for the site to look better. As I stated, the site is all about it’s useful information.
Even though the site was only going to be managed by myself, I wanted it to be easy to edit. Whenever I think of something important that could be added or changed, I want the ability to quickly log in and apply the change. This is what a CMS (Content Management System) is useful for. So I built the site around WordPress, created my own theme, and built it specifically for this site. The separate guide sections have their own content blocks in the admin, with an image upload feature for each icon.
A website needs to function just as well (if not better) than it looks.
A big factor for the site to work is that it’s visible on the web. People need to be able to see it when they search for relevant terms. As this site is more of a personal project and wont generate any income, I don’t want to spend a fortune advertising. So SEO plugins like YOAST SEO and correct code markup are essential. Placing the correct h1 tags in the right places and ensuring the content is inside article tags. The site contains a lot of useful relevant information so it should rank fairly high without the need of any paid advertising, and good quality content alone.
I have to admit my first ideas I had planned out in my head were a lot more ambitious. But practically I had to keep the site simple, otherwise I would have never of finished it. I didn’t want the design aspect to overtake the quality of content. Keeping the site simple, and relevant was my main priority. I’m really pleased with the end result, I think the site will become very useful. I just have to hope it climbs the Google ladder in the search results.
Below are the vector icons I did in Illustrator. Then the header of the site, and the next image is the top half of the home page.