Coming to the end of the topic on Visual Literacy I was struck by several things. Firstly, how I never considered visual literacy before, yet I have been utilizing it for years. I guess it was more the phrase that was new to me, and didn’t think of it in the same way I would consider how to write something to be literacy. Secondly, now I have it in my mind, I see it everywhere. Take an example I have encountered twice in the last week. I was chatting to some people from the International School of Panama the other day, and they were telling me about a problem some of their students were trying to tackle. There is a thing called a Norman doors, and we probably all have them somewhere in our lives
The definition of a Norman door is:
A door where the design tells you the opposite of what you are supposed to do.
[youtube width=”700″ height=”500″]https://www.youtube.com/watch?v=yY96hTb8WgI[/youtube]
Norman doors are an exceptional example of bad design. There are two common solutions to Norman doors:
- Use a text push or pull sign on the door in order to identify what you should do to open the door.
- Don’t put up any signs and irritate those who use the doors regularly.
The second time I encountered the same problem was when I attended a Jobalike session for South East Asia Group 4 (IB) teachers. The school we were at had norman doors for most of their doorways, which even over the course of two days irritated me enormously. Maybe you get used to them, and maybe you learn which way to go… potentially I just get annoyed easily… but it seems like such an easy fix at the design stage. This is what I have learned this topic. When it comes to visual literacy, the design stage is a critical part of the planning- especially in teaching where you often only get one shot at using something per year. The stuff we look at should be designed in a way to help use use it. Apple for example put so much thought into the door handles in their new HQ (dubbed the spaceship) it took over a year to get it perfectly right, although for potentially different reasons.
For me personally, this project had to culminate in something I have had fun with over half of my life. My website. One of the options for this project was an infographic style resume, and thankfully our instructor agreed that a website would also work in this respect. I have designed and redesigned my website three times before now, and I always feel like I have got it right when I build it, but then reconsider a year later and never end up updating it. A question I always get is ‘Why did you not use <insert name of website template here>? It would have been so much quicker!’. Its true I dont remix current themes or code of websites, but its because I want to learn and am interested in the process.
The first things I considered with my website was:
- what will it have as the main graphical pull
- how will that adapt to different screens.
Desktop screens are now generally 21″ or above and mobile screens are as always, small. In the middle is laptop screens at a reasonably steady 13.3 inches. w3schools compile statistics on internet users which suggested about 95% of users now have a resolution of 1024px wide and above. I also checked the browser statistics and tested in chrome to make sure it would look right on the majority of screens (In reality as a web designer you only really worry about internet explorer being different). I have never been great at creating images that have been commented upon kindly by others… but I am a good photographer. As this is a website about me, it made sense to me to have my own work as the background.
My design for ‘Sweeto 4.0’ went through several iterations.
With Website 4.0, the idea was that the menu items would appear randomly upon a grid and had popup boxes to display information. In the end this was technically difficult, but more importantly I struggled to adapt a grid to multiple screen resolutions and ensure it was consistent. The human useability for this site would be tricky, and visually was a bit higgledy-piggledy. So Website 4.0 was scrapped.
Website 4.1 was the second iteration and used an accordion style menu system to hide the topics until clicked upon which revealed sub menus leading to pages about the content. I still like this design as it is so easy to use and build (except the colours which were just for testing purposes) but decided against it for two reasons:
- It felt too safe. Its what I had done before. Boxes and text menus. What is different and memorable about this design? What would I learn making this site?
- The central layout is great, but on bigger screens wastes a lot of space. Using the full width of the screen would be better as I could play with the content structure more.
So Website 4.1 was consigned to the design bin.
I forgot there is a 2 after 1, so Website 4.3 was the next test – and the final design. I wanted an open feel to the site, so it didn’t feel too crowded, particularly when you first land on the home page. I also wanted the graphics and visuals to speak for themselves as much as possible. A blog style front page with images, and then a menu composed entirely of icons worked well. The only images that were not created by me on the site are the icon set on the left hand side. I wanted to ensure they conveyed precisely what that section was about. In this case, given my skill set, getting premade icons was essential. There are a bunch of icon sites out there offering free* icons, but Flat Icon allowed me flexibility with the scope of icons I needed (with citations on the site in the thanks section).
Importantly at this stage (29th Oct 2017), the site is not complete. There is too much to say and not enough time for the scope of this project, so I focused my efforts first upon the profile, and the teaching areas I felt complemented the course (Digital Citizenship, and my own creation Lets Physics That). The profile was where most of my effort went. Drawing on inspiration from a reading assignment from Course 3 Week 4 I tried to generate an interactive resume for myself.
The most important things to put on a resume are qualifications and work experience so naturally these were the first items I tackled. As I am training for my Google Educator Training certificate I thought that Google maps would be a great way to chart my life. Embedding Google maps into your website is not too hard, the tricky part is getting it to behave how you need it to, and integrate with the rest of your website. Using the Google API documentation however I was able to create a map with all my past locations on it, and when you click on the locations you would get information about what I did there. I even managed to modify the maps to have my own icons (which need a redesign).
Next I looked at how I could present my professional development in a way which is graphical but not wordy – whilst saying everything I need it to say.
Clicking on the icons will give more information about what Professional Development I have in this category. The icons for these are all logos taken from Wikipedia or the official websites for the courses. The only downside currently is that not everything I have done is listed, and this part of the page already gets very busy on low resolutions. In the future I intend to create a similar bar below with smaller icons for PD which is smaller or less relevant.
Whilst I need to look at these graphs a little in terms of ease of use, I think they start to give an impression of me and how I teach. The last bit included what I am qualified to teach and what I am passionate about in teaching.
Other parts of the site use similar ideas to communicate different elements so please go and look for yourself. I am very open to comments about it, and particularly I want feedback regarding:
- Where are the Norman doors?
- How does it look on your screen? Anything too big or small? Does anything not work? Let me know.
- Does this portray a positive me?
In the past my website has been a focal point for my creativity and I am hoping this will not change with the new iteration. The job in front of me is getting the rest of the site up, but I do not foresee this being a huge challenge now the technical stuff is in place.
Enjoy learning about me – sweeto.co.uk.
9 Dynamic Digital Resumes That Stand Out From the Crowd. (n.d.). Retrieved October 29, 2017, from http://mashable.com/2011/02/21/dynamic-digital-resumes/#ZF7.RWN7TGqu
Browser Display Statistics. (n.d.). Retrieved October 29, 2017, from https://www.w3schools.com/browsers/browsers_display.asp
Channeling Steve Jobs, Apple seeks design perfection at new “spaceship” campus. (n.d.). Retrieved October 29, 2017, from http://www.reuters.com/article/us-apple-campus/channeling-steve-jobs-apple-seeks-design-perfection-at-new-spaceship-campus-idUSKBN15M0CM
Chart.js | Open source HTML5 Charts for your website. (n.d.). Retrieved October 29, 2017, from http://www.chartjs.org.
Google Maps APIs | Google Developers. (n.d.). Retrieved October 29, 2017, from https://developers.google.com/maps/