AW 00: Setting up a reflective journal

The first task of the Graphic design course is to set up a blog, or what is called a “reflective journal”. This will serve as my notebook and sketchpad and a way to demonstrate my design process for each task – to my tutors, but also to myself. It will be a tool to track progress and to reflect on the choices made in order to achieve the final result.

I have been working with WordPress since 2005, and it’s my preferred publishing tool by far. The WP community has expanded immensely over the years, and gone are the days where you had to look up php snippets in order to achieve custom effects and features. Nowadays there’s a plugin to suit every need – in fact, for most needs there will be a number of plugins to chose from! I have a lifetime license with the Elegant Themes developers team, using their Divi framework as a starting point for most of the sites I work on; this journal being no exception.

Journal wireframe

When sketching out a wireframe for the site, I decided that I would take advantage of already built-in WP features. I will use all of the following post templates:

  • Posts: for chronological journal entries where I will write about my plans for the week in regards to each new task, and to announce the completion of those tasks. I suspect I will add the odd meme and links to inspiring people and other nifty sites as well.
  • Pages: for my presentation, and for index pages (journal- and tasks archives) because these will be easier to design and adapt than the default WP index/ category pages. Perhaps there will be some sort of informational pages too, about tools that I find useful etc.
  • Projects: this is where I will document the work I do on each task. This page being an example! I will most probably make a template for the projects pages, but for now I am busy catching up.

My chosen framework, Divi, has clever tools for saving the whole or just pieces of the layout, so that it can be duplicated for new posts and pages. The top section of each of my pages (home, reflective journal, who’s birdie?) – the part with the animated heading – is an example of this.

Profile

I started the course a week and a half later than the others, and kind of “hastily” threw together a colour palette. I might be changing this later, and definitely add some more pizzazz to the design.

I used the online tool “Paletton” to find my colours. I started with one of my favourite colours – teal – tweaked it slightly to a more blue tint, and strectched the colour picker inside the middle of the tool to get a broader spectre of contrasts. Then I chose the triad colour option, which gave me two additional base colours, with nuances, to work with.

From that palette I picked a total of ten colour nuances. When I pick the colours to work with I take into consideration that they must work well in regards to contrast; most importantly that they are either bright or dark enough for a text put on top of them to be legible. With web design – my daytime job – this is a requirement that needs to be met in regards to accessibility validation. I often double check my colour choices with an online Contrastchecker tool.

For the logo, I am using a bird silhouette that has been my “avatar” for nearly 30 years. I am describing this further in the second task; Make a portrait of you that isn’t a photo. The name of the site actually came about back in 2004, when I first started believing that I could actually make a living as a webdesigner. It’s a portmanteau of the words birdie – my alias since youth – and designs. I prefer sans serif and egyptian/ slab serif fonts, and played around with the letters until I found a combination that I liked. A lower case slab serif d was inserted into an all uppercase sans-serif wordmark, the letter shapes were changed ever so slightly so that both the upper and lower parts aligned, and finally I tweaked the kerning a little.

Extras

I enjoy being online, and I love taking pictures! This has resulted in a multitude of flickr and Instagram accounts, each for a specific genre or purpose. I have added links to those in the footer, for my visitors to peruse. I’ve also added the feed to my birdesigns IG account. To the sidebar of my journal entries I’ve added a feed that displays the latest photo from my generic flickr account, along with a small About me-widget.

I suspect the two mentioned site sections will be constantly changing, to reflect my main interests at any given time.

TLDR;

  • Created a WordPress site built on the Divi framework, on my own server
  • Divided sections into posts (short chronologically sorted news articles on my progress), pages (for now, just my bio), and projects (task documentation)
  • Styled it using a favourite colour matched with two triad contrast colours.
  • Made sure text is legible in regards to size and contrast.

What did I learn from this task?

Webdesign/ frontend dev. has been my daytime job for more than a decade, and as such this was a routine task. The challenge was building a logical wireframe.

Click images to view full:

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.