Design Matters

Posted: September 14, 2014 in Course 3
Tags: , , , , , , ,
Design Matters Visual Note by Nicki Hambleton

Design Matters Visual Note by Nicki Hambleton

Photo Credit: hugovk via Compfight cc

Photo Credit: hugovk via Compfight cc

Confession Number 1: I have not looked at the actual layout and design of my blog since Course 1.

Confession Number 2: I tried 7 different themes out before I settled on this one.

Confession Number 3: I will never be happy with its design.

 

 

 

This is how a designer thinks. As a perfectionist I am likely to alter, change and tweak a design multiple times and still not be happy.

When I was at school I would worry over a drawing or a painting, always seeing the faults and the mistakes. As a Graphic Designer I worked on multiple designs to please the client – a design based on their idea, one based on my idea and a combination of the two. More often than not the client would pick the combined one. That’s how design works. We are hard to please. WordPress templates are akin to being in a sweetshop to a designer – so many gorgeous themes and designs to choose, but which one? As a homeowner you would think that, with an Art and Design background, my walls would be awash with colour, rich with pattern and texture, right? Yet, online, I love the clean, uncluttered look: simple and elegant and easy to view. The design should complement not distract from the content – that to me is crucial, no sparkly bits or flashing fonts, sans serif all the way.

Front page of thisisallaboutart.blogspot.sg

Front page of thisisallaboutart.blogspot.sg

My class blog I launched last year has taken a back seat since starting COETAIL online, but it was a place I could play with and express my art side and share work and visual information for the students. Even though there is no fish tank, hamster on a ball or virtual dog to pet, it served its purpose well – to share ideas and update students on the arty goings on in my classroom. The theme was bright and cheery (to match my sunny nature!) with swirls to express my creative side. I did not design it but I still like it now. I spent many hours messing with the widgets and embedding my Youtube playlists and recent Pinterest pins – all useful to the students and only a click away. At the time, Google Reader meant that all the students blogs could be added to the side bar for quick access but since that finished, there has been no alternative to embed in a group at the side. This is a shame as it was such a cool feature.

I digress, so back to the COETAIL blog design.

CRAP design

Having trained in Graphic Design, and with a natural eye for layout, I was not surprised to read the original book “The Non Designer’s Design Book: Design and Typographic Principles for the Visual Novice” by Robin Williams first published back in 1995. Our eye understands design even if we are not a designer. We feel comfortable with order and balance, yet thrive on change and variety.

I teach this everyday, whether looking at the beauty in Carravagio’s compositions or in awe at the landscapes of photographer Ansel Adams. We discuss arrangement and choices when planning a still life painting – the point of focus, the lines that draw the viewer into the artwork. Currently I am working through a complex list with Grade 6 so that they can understand the vocabulary and practical application of the Elements and Principles of Art and Design. They are using photography to capture their natural and manmade environment to illustrate examples of the words: Line, Pattern, Emphasis or Balance. These are to be used as posters in the classroom to visually assist them in considering this fundamental backbone in the teaching of Art.

Grade 6 Photography to capture the Elements and Principles of Art and Design

Grade 6 Photography to capture the Elements and Principles of Art and Design

So too are the ideas behind CRAP Design focussing on the 4 Elements of Design: Contrast, Repetition, Alignment and Proximity. Keri-Lee Beasley changed the acronym to CARP to make it more kid-friendly and her Digital Literacy team over on our sister campus have designed some minimalistic posters to help all curricular areas to become better designers and to use these principles when working with text and image.

CARP: Design Principles by Keri-Lee Beasley

CARP: Design Principles by Keri-Lee Beasley

You can download them for free from her website.

She also has a phenomenally intuitive and delicious ibook available entitled Design Secrets Revealed that expands these ideas seamlessly and beautifully.

Design Secrets Revealed by Keri-Lee Beasley

Design Secrets Revealed by Keri-Lee Beasley

Screen Shot 2014-09-12 at 21.17.50

All change

As I look over my blog space with a critical eye, there are several things that I can change, and many that I would like to change but cannot.

The first is the most easiest yet the most difficult – the banner. I know the shapes currently do not express me or my concept and certainly not the fusion of traditional and technology. Early during Course 1, I dabbled with some drawings – an infinity shaped symbol linking the 2 words together or perhaps a double helix interlocking the 2 words Traditional and Digital, spinning off from a drawing I made for Jeff Plaman’s iBook on Coaching and then a more simpler piece of typography. I am still not convinced either will work so I am working on other elements.

pencil drawn image for Coaching ebook

pencil drawn image for Coaching ebook

 

Tradigital logo idea

Tradigital logo idea

It would be cool to add a slideshow of images to the banner, as I have seen on many websites, but I am not sure of that possibility with the limited themes available to us. Keri-lee explains how to makeover google sites in this informative post and there are ideas there that many of us can take note of when redesigning our own spaces online.

So I am working just on the banner image currently, to capture the fusion of traditional and digital. Recently, I found a clean looking theme available with a birds-eye view of a desk and started to experiment with similar photos of my own. There was a similar image on wix.com looking down at hands working on a laptop that could also work to show my “hands on” approach and use of digital and traditional media side by side.

Navigating the blog is important to me for my readers so there are several things I would like to work on: clearer and easy search, and viewing previous posts. If you compare Joe’s or Melissa’s designs, the posts and categories are easily viewed down the right hand side. I would ideally like them viewable on the side bar, with a thumbnail of the accompanying visual note to attract interest and for easy understanding, clarification and choice. I would like a tag list or popular subjects and for it to be generally more visual but not cluttered. Melissa uses the Graphene theme but on inspection in the appearance tab it doesn’t seem to be available, nor one called Inkhive that Pana uses. In fact several that others are using do not seem to be listed within the 16 themes I see when clicking Appearance. My frustration is mounting so I eventually resort to designing a fake front page on Pages so that at least I can show what I mean.

Makeover

Here is the blog as it currently looks:

current blog page

current blog page

and how it could look with a new banner, thumbnails in side bar and easily clickable tag list:

Blog Design makeover

Blog Design makeover

I would love your advice and suggestions if you are able to take the time to add a comment.

Wish List

What if you could roll over the banner image and it took you to other relevant places, eg, the iPad took you to my visual notes on Flickr, the eye drawing to my Twitter feed, the books to my Goodreads etc? I saw a fun app Thinglink that makes images interactive that could do a similar effect, so maybe it is not that impossible, but currently with the COETAIL templates it is, which is a shame.

On my wish list would be a subtle transparent backdrop but still leaving enough white space around the body of the text. White space is important.

And the heading, sub headings? Don’t get me started on fonts……….

 

Advertisements
Comments
  1. Clint Hamada says:

    Nicki, sometimes I think WordPress (and blog platforms in general) are more of a curse than a blessing for those that are blessed with an artistic/creative/designer’s eye. While they make it so easy for laypeople to publish directly to the world, that ease comes with a price. I love the ideas you have for your blog but you may need to look to a web developer to help you realize them.

    I love the links that you have shared here for everybody to access. I also look forward to hearing what else you have to say and share in Course 3 at it is going to be right up your alley!

    Welcome back Nicki!

    • Nicki Hambleton says:

      Hi Clint!
      Thanks for the welcome back and the comments – it was a stressful post I must say. I have changed it again since last night onto another much more customisable theme but I am still tweaking it! Bear with me will you?! I have had a look at all the resources and assignments over the coming weeks in this Course to see what lies ahead. I was contemplating using my Learning 2 Talk as a potential final assignment – does that seem appropriate at all? It is on The Power of the Visual, using animation, visual notes and Haiku Deck as its base.
      Let me know what you think and I can give you a sneak peek!

      Nicki

      • Clint Hamada says:

        I come back a few hours later and the whole place has changed… 🙂

        I think your L2Talk topic sounds great as a final project for this course. I know others can and will learn a lot from you on how visual literacy impacts learning and engagement. Since we can’t bring COETAIL to Learning 2.0, let’s bring Learning 2.0 to COETAIL!

        And I was thinking about your font lament at the end of this post. If/when you self-host your own site, you will have much more control over the fonts included in your theme, assuming you know a bit about how the WP themes are created/edited. Or you can pay a developer to make exactly what you want. This might be something for you to consider once your COETAIL journey has ended…

  2. Pana Asavavatana says:

    Your idea for rolling over different parts ofthe banner and having it be a link has intrigued me. I have played with ThingLink with my Kindergarteners last year and I love the idea of creating an interactive image! Now how to apply that to your site…I have an idea that might work. Not perfectly, since as you said we have limitations on our COETAIL wordpress sites, but maybe…

    1. Create a static front page like mine (not having your blog posts be the front page)

    2. Cut up your banner evenly into 9 parts

    3. Set up columns the way I did and piece your banner back together like a puzzle.

    4. THEN each image can be a link in itself to different parts of the site and your online footprint!

    What do you think???? 🙂

    • Nicki Hambleton says:

      Hi Pana,

      That does sound genius! I will have to try it out, but currently I am all blogged out having spent far too much time fussing over it! It seems that I would have to change the blog roll on the front which I am reluctant to do as that is one of the key things i was looking for – a visual way to connect to the posts. There may be another way though and I am definitely going to try it, even if it appears as a post at this stage.
      Thanks so much for taking the time to read it and help out.

      Nicki

  3. Josh Sadek says:

    I too had some confessions about the updating of my blog. Like you, I hadn’t updated my blog since I made it. I looked through all the themes available on WordPress and didn’t really love any of them so I picked one quite similar to the one I had. I even went a step further to admit that I probably wouldn’t be making a lot of upgrades to the blog again until our MS Site that we just launched is way further along than it is. (On that note, thanks for the link to Keri-Lee’s site tips.)

    It is apparent that you have a background in graphic design. The images you choose are eye-catching and the ones that I can only assume that you created, are really pretty cool! Let’s just say I don’t think I’ll have Clint posting about me being cursed because my artistic skills are being hindered by my blog =)

    I’ll be interested in following your posts in this course.

    • Nicki Hambleton says:

      Hi Josh,

      It is always a pleasure to help others out by sharing from those who do the same. Keri-lee is an advocate for sharing so I knwo she will be happy to hear it has been of use. I would love to see the MS site. I only have a class based one, which, as you read has taken a back seat since the onslaught of COETAIL. I am thinking of dipping into the realms of google sites so I am intrigued to see what others do. We are currently piloting a new Learning Platform across both sites based on Teamie so google sites may well be underused once that kicks in.Having said that Teamie doesn’t look all that customisable so I may be back in the frustration zone!
      Thanks so much for your positive words and for taking the time to comment. It is always lovely to hear what others think and to connect.

      Nicki

  4. Anne Dirilgen says:

    Nikki,
    I have been stalking you to see what you would write for this course. I have yet to write my blog post. I am excited about visual literacy and scarred at the same time. I feel like the bar is set high for us art teachers. Or maybe that is just my bar that is set high. I am currently in Shanghai for a DP Art course. They have changed the criteria/assessment AGAIN. So much visual learning going on here though. Hopefully I will get a post up soon. Thanks for this one. I read every word and I do like the new look. I know you will never be 100% happy with it. Love the photograph with your computer. And btw, super excited for some visual notetaking information in October.

    • Nicki Hambleton says:

      Hi Anne,
      How is Shanghai? It must be so frustrating to have the changed goalposts again!
      You did made me laugh about stalking me as I was on the look out too for what you and Matt posted. In the end I just had to bite the bullet and go for it. But first I made sure I checked forward in the course to make sure that I didn’t write everything that was coming up over the next 5 weeks though in one post! Since posting last night, I rechecked the theme this morning and hated it: there were (and still are) some issues, so I literally went through each of the 16 themes (apart from Tumbler and one other I cannot now remember) to test the designs out. I wanted to see my visual notes and yet keep a clutter free design. Each one had its faults and positives. It took 3 hours! Eventually, ready to give up, i clicked one last one, which seemed to be ok. On further investigation it is like all the others but on steroids! So many tricks and bits within it that the others just don’t have. I cannot get the banner right though no matter what. I think I will have to retake the photo again so that I can crop an appropriately wide section from it that encompasses iPad, sketching, books, environment, laptop and more! What a silly billy I am! I am sure a simple image would suffice! Good luck with yours and let me know when you are published! Safe travels home and looking forward to seeing you in October.

  5. Andrea Khambalia says:

    Nicki,

    You mentioned Pinterest and it seems to present so many possibilities in the classroom! At the beginning of the year, I was discussing it with a colleague of mine and she had her high school graphic design students sign up and she’s loving its use in the classroom to teach curation, critique and showcase student work.

    My sixth grade teaching partner and I are really interested in Pinterest and Flipboard in the classroom but unfortunately, we seem to be restricted by age. I wrote to Flipboard last weekend in fact asking if they would consider a Flipboard for kids for educational purposes. They were intrigued by the idea and will perhaps look into it, but until then, Linda and I are searching for a similar curation tool.

  6. Joe Teft says:

    Hey Nicki,

    For your website I was hoping for something like this http://www.littlebigfilms.asia

    It’s my friends website. He makes films and is big on visuals, and I think your story could do something similar. Like @pana wrote you could use something like this front page to show off your work, and then embed the blog on a different page. Sadly this doesn’t seem to be available on wordpress. But could be something to think about.

    I know a little code and like Jeff says it is pretty important to know how to use code to actually create change. More things to think about for sure.

    Like the new layout though.

  7. Elizabeth Kangas says:

    Really quite impressed by your blog post. I’m going to come back and read it more in depth later! Very interesting and helpful!

  8. Chrissy says:

    I too will be stalking you at Learning2.014 in Bangkok! Watch out!

    I had to laugh and nod my head at the same time with your confession 3. I’ve yet to find a blog design that “ticks all my boxes”!

  9. Dianne McKenzie says:

    I love the new look of your blog. Trying to figure out how to customise something like this takes time, and a bit of thought. You have managed to really bring reflect your personality through what you have done. 😉

  10. Paul Carpenter says:

    Nicki,

    The new look is ent(eye)cing! I have learned quite a lot from this post. Particularly, I want to thank you for the CARP links. I have also wanted a better acronym than CRAP when referring to design, and the fact that I am known by some as Mr. Carp is a happy coincidence. I think I will get Keri-Lee Beasley’s book. The posters for classroom/school use are excellent. Since I am more of a writer and musician, I sometimes struggle with visual presentation. You have helped me.

    • Nicki Hambleton says:

      Thank you so much Paul, I am always happy to help and it is great to hear that the post has given you some direction!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s