I wrote my first JavaScript!! (and got a job…)

Well, well, well. What a three weeks I’ve had. Went on a Web London boat cruise, met some nice people, tweeted one of them and now, 22 days later, I have finished my first web project for The Kaldor Group and am getting stuck into the next.

A fluke meeting and perfect timing have landed me in an amazing position. Part intern, part tester, part developer and part designer, I have the opportunity to be involved in a variety of interesting work, learning and contributing, with the benefit of clever colleagues on hand for when I run into difficulty.

The project I have just finished is a Facebook app, raising money for the famine in East Africa, through an innovative calculator designed by The Social Practice. The project, run by 50/50, is based around the horrible truth that a child dies every 6 minutes in East Africa, and so our handy calculator works out how much you earn in 6 minutes, and you decide how many lots of 6 minutes you would like to donate. A great cause, and a chance to work out how much your tea/fag/Facebook break is costing your boss.

I really enjoyed the task of being given a design and converting it into functional mark up – a challenge my coding has not previously faced. With a few helping hands and a bunch of JavaScript (including the first ever line I wrote and it works and everything!!) the app went live yesterday and at point of writing has raised £326.73.

Find out how much 6 minutes is worth to you and DONATE HERE!

I faced my first real IE issues, a web development rite of passage I suppose, but resolved them to a reasonable standard.

And so now I’m on to my next project… a little more design, a little more intimidating and inevitably a little more exciting.

My first two weeks at Kaldor have flown by, more to learn everyday – CSS, Facebook development, a little JavaScript and the importance of not keeping a Bluetooth keyboard in your drawer. The folks are real nice, and willing to share their precious wisdom with me. What more could I want?

Advertisements

dConstruct 2011

Well, last week I attended my second web design conference, and this week I hope to see my second site go live. Exciting times!

The conference, dConstruct by Clearleft in Brighton, involved a series of talks considering the connections between the physical world and digital design.

I think my favourite talk of the day was Craig Mod talking about the Future Book. I got swept up, up and away in the fantastical story-metaphor about the 5km long book, and although I couldn’t tell you exactly what, I definitely learnt something. And let’s be honest, every talk is improved by the inclusion of an animated information nipple.

The day started with designer-thinker Don Norman – the author of “Design for Everyday Things”, one of the books on my reading list that I actually have got round to reading. Norman explained the way PC  screen scrolling systems were originally designed (that you move the window rather than the contents) and how the widespread introduction of touchscreen has questioned this early decision (you move the contents with gestures), to the extent of Apple gunning for the alternative scrolling option in Lion. Norman also discussed the idea that we should design for memory rather than actual experience, using Disneyland as an example – it’s not the experience of crowds and queues that you remember, but the magical, memorable, moments.

Continuing on the subject of memory, Norman outlined the varying interface formats that PCs have been through – from the initial command line, to graphical interface and now we are in the era of gestures. He remarked on the differences these variables mean for the user – from needing to know the commands to input, to it being the norm to rely on graphics with no prior knowledge. And so we find ourselves in the world of gestures, which Norman argued forces us back to a situation where we must memorise how to effectively use the system. And talking of systems, one of Don’s most interesting points was how important it is to design in systems rather than individual products/services, using the iPod+iTunes and the Kindle+Amazon as his examples. Creating usability in buying, uploading and updating the products and therefore effective connections has guaranteed them success. This point was reflected in Kelly Goto’s ‘Mapping Emotion to Experience’, as she described the importance of considering the space in between things. Kelly went on to point out that when we feel attached to our devices and possessions, it is in fact the connections that they allow us to make with one another that we are attached to.

I enjoyed Frank Chimero’s talk, mainly I think because I have had the same thoughts and not yet found a solution. Talking to a fellow attendee afterwards, who consistently tags and archives his bookmarks, made me think I’m just lazy, but he then informed me that he was a archivist for 5 years. I think it’s a personality thing, and some of us just need more help than others.

My main conclusion of the day was that essentially it’s about connections. We need to design for the space in-between as well as the apps/sites/services/products themselves. In the same way that the great type-designers consider the white space around the glyphs they design, as much as the do the inked area. It is because the white space is considered that the type faces sit so well – they are fully supported by their surroundings.

Things to research further:

  • 3D Printers
  • Kansei Engineering
  • Tom Armitage
  • Marshall McLuhan

Learner.

So I made my first website (clarelisbeth.com) and seeing it go live was as exciting as I thought it was going to be!

Learning about the elements that make up web design is so rewarding because the progress is so obvious. Going from not knowing what HTML stands for to being able to code an entire website that functions and looks alright in a couple of months is really exciting. Not to say that web design is easy – just that with a basic level of knowledge, a relatively large amount can be achieved.

I have found learning how to learn about web design really interesting. Finding the great sites that I can spend hours reading and also those that I close after not having instantly found the information I need. I also discovered, maybe not surprisingly, that I learn about new topics most effectively through video. A video with clear instructions and live examples allows me to understand a new topic within minutes, whereas an article about can take a while to get through, and not be as informative. Then, when I have a base of understanding I go on to read various other sources of information.

And talking of learning I just read an interesting post on the UX of Learning on A List Apart:

http://www.alistapart.com/articles/the-ux-of-learning/

Tyler Tate considers how we learn and how that learning process should impact our designs. An apt article to read after a conversation I had yesterday about a website I’m designing for a puppeteer who’s not a huge web-user. I feel like the website needs to be very owner-friendly as well as user-friendly.

So now I’m at a point in my learning where my lists of things to read and watch are literally endless. It’s clear that the learning process is an unending where web design is concerned, so I guess I need to get used to it, huh?

Some of the things I like to read:

http://www.alistapart.com/

http://boxesandarrows.com/

http://mashable.com/

http://meyerweb.com/

http://scrunchup.com/

http://www.smashingmagazine.com/

http://thinkvitamin.com/

You gotta love progress.

It’s been an exciting week in my little web design world. I’ve built my first functional website that I think is also quite beautiful (but not yet live), encountered some of the IE issues that I’ve heard so much about, started learning PHP, got stuck in to ‘Hardboiled Web Design’ and finished ‘Don’t Make Me Think!’ from my reading list.

I have been making regular use of my favourite source of web information, that has also provided a structure for my studies – Think Vitamin (.com). Concise, clear and super-understandable videos, divided into logical chapters that have evolved from being a reference point when I had a question, to a full blown syllabus. It is with these videos that I hope to gain a solid grounding in all things code, to then build on by designing and constructing sites. The more I learn about the tools and techniques, the more excited I get about the possibilities, and considering the relatively small amount I currently know, they seem pretty endless.

So alongside the reading, video watching and note-taking, is the most important part: giving it a go.

I have continued with the cake business site discussed previously. Having been relatively happy with the wireframing, and with a whole bunch of actual content to use I started building the site. Using HTML and CSS I eventually got something that resembled a webpage…

Cake Company Webpage

It’s a start.

I also built myself a little portfolio site which will hopefully be up in a few days. But now it’s time to learn about browser testing, which I’ve heard can be testing. But I guess it’s really rather important.

So with a couple of sites on the go, and another couple in the pipeline, it looks like I may have the beginnings of an actual web design portfolio. Yay! Also I booked a ticket to dConstruct Conference in September, which looks like it’ll be another day full of new design aspirations and plenty of inspiration.

See you there?

Why Wireframe? Well…

A while ago my brother advised me to give wireframing a go, he suggested Mockingbird as a free and simple tool and I was keen to try it out. Many layout ideas and the realisation that there actually are endless possibilities later, I decided I needed more information.

A Smashing Magazine article on this subject (http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/) seemed a good place to start and with an abundance of links providing varied advice, it resembled a wireframing gold-mine.

The article is almost two years old, but I’m guessing that the basics remain relevant, and as always when reading articles and blogs, the links lead you on an unplanned path in to a world of information. At one point I found myself on Jason Santa Maria’s old site reading about his Grey Box method (http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php) which has some interesting comments both in the article and from readers. My favourite article however explained one company’s use of paper wireframing – http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php. I guess this is unsurprising considering my passion for paper cutting (see previous blog posts).

From what I have read the wireframing stage serves to ensure no time is wasted on visual designs that are then scrapped, and to allow the client/designer to ensure that the UX is appropriate and optimised. So theoretically no time is wasted – sounds good to me!

My design experiments are carried out on a new site for my Mother’s cake business, and as she has never been a client before and I have never designed a website before, it should be a pretty interesting process. The site will have two main purposes, to allow potential customers to view my Ma’s cakes and to find her contact details. I began by paper wireframing the home page.

Paper Wireframes

I really found myself thinking through how people will use the site and although I hadn’t labelled the buttons and images on the paper I actually have a clear idea of which is which. And once I had paper wireframed and thought through the designs a little more I had a go at wireframing in Photoshop.

Photoshop Wireframe

Now I guess it’s time to see what the client thinks…

Further Reading.


  • ‘Designing With Web Standards’ by Jeffrey Zeldman
  • ‘Beautiful Evidence’ by Edward Tufte
  • ‘Envisioning Information’ by Edward Tufte
  • ‘The Visual Display of Quantitative Information’ by Edward Tuft
Courtesy of http://markboultondesign.com/blog/alan-who-this-is-the-real-apprentice

It really was a school day. Ampersand Conference.

Friday felt like my first real step into web design. I’ve read more than once that text and typography are over 90% of the web, so a conference on the subject ‘Typography for the Web’ seemed a good place to start. Also the fact that I recognised the names of some of the speakers was a good sign.

The talks themselves were engaging, informative and, maybe most importantly, inspiring. It’s always a joy to hear somebody talk about something they are passionate about, particularly when it’s something you’re passionate about too.

My particular favourites were Jonathan Hoefler of Hoefler & Frere-Jones and Mark Boulton of Mark Boulton Designs.

Jonathon spoke primarily about the development of webfonts. I was particularly interested to hear about the process of designing fonts that need to be used in very small font sizes, both on paper and on screen, and the techniques used to make them more readable.

Mark’s talk was a little more philosophical, including references from ‘monk factories’ to container ships. The talk referred to the process of designing and how a ‘content out’ strategy is a good way to create effective, responsive design. From reading responses to the talk and the idea, it appears that this is a controversial concept, I suspect due to the difficulties of actually gaining access to the content whilst designing.

As well as the content packed talks, there were also many content packed conversations to be had. A brief hello to Mark Boulton, and longer chitchat with good folks over food, drinks and pool. I now have a list of books to read:

Just My Type – Simon Garfield

Design for Everyday Things – Don Norman

Adaptive Web Design – Aaron Gustafson

Don’t Make Me Think! – Steve Krug

5 Simple Steps – All

A Book Apart – All

(And always welcome more suggestions…)

My glimpse into a world of self-taught, independent thinkers who are keen to push their industry into the future head-first was exciting. I learnt and I gathered and now I’ll use that information to continue on my path – hopefully in the right direction.

Ampersand – The beginning of a beautiful friendship

What a day.

Not only my first conference (of any kind) but also the first UK conference about web typography… ever!

So much to take in, so much information I want to ensure I retain, but most importantly I think the overall feel of the day – the ‘content-out’, ‘font-first’ ideology was clear. Web design is not about designing for a ‘page’, it’s about knowing the content and using that knowledge to find the best visual solution for various viewers using various screens.

I had very interesting conversations with designers and developers about processes, techniques etc. TBC

New kid on the web-block.

I want to be a web designer. I came to this conclusion earlier this year, in the midst of endless and circular thoughts and about exactly what I want to do with my life. This question had been plaguing me on and off for about 3 years… since graduating university with a degree in Fashion Design (a career path I chose at 15 and gave up on aged 20). It was no surprise to my friends and family that I had a new idea, and that this one would really stick, you know, this one would work out… just like the other 15 in the last 6 months.

But this one is different. This one is sticking. And that’s why I’m writing this blog. As a relatively traditional English girl I am not used to publicising my thoughts, and as a relatively flakey creative type I am certainly not used to publishing my plans for the future, for fear of loss of interest/failure. However, here I am, putting it in type, that this is my plan. And this is going to happen.

So this blog has a few purposes;

– For me to track my progress and  growth (and ensure it continues).

– A location to collect resources I use – sites, articles, books etc, so that they are easily accessible for me and you.

– Space for other learners and professionals to contribute more information.

– If all goes well maybe this will be some help to other people aiming for the same target!

So I guess I start by explaining what I have done so far…

I have had a long term interest in graphic design, and this combined with my brother’s passion for all thing web triggered a curiosity in web design. He gave me a few names to research and some sites to look at as good examples of design. During this eye-opening stage I came across an advert which would lead to the solidifying of my plans. Mark Boulton Design (http://www.markboultondesign.com/) were looking for an apprentice. I read the advert and immediately knew this was the perfect style job for me. I learn fast, especially in an environment that encourages independent thought, and the chance to learn about the different areas of design within one company was a unique opportunity (at least from what I have seen). I didn’t get the apprenticeship, but the process of producing a handmade application, being shortlisted for interview with two others and having a conversation with Mark, have only encouraged me to pursue this harder.

My application is featured on the Mark Boulton Design site – http://markboultondesign.com/blog/our-top-10-apprentice-applications

and in an article written by Emma Boulton on .net magazine – http://www.netmagazine.com/features/reinventing-web-design-training

So now I am continuing to educate myself in good web design. I’m on my third read of Designing for the Web (Mark Boulton), I have just begun to read Ethan Marcotte’s ‘Responsive Web Design’ (http://www.abookapart.com/products/responsive-web-design), whilst being constantly referred to new articles and peices by the friendly folk of Twitter (@clare_lisbeth).

I have learnt the basics of HTML and CSS and hope to put these skills to use soon when making a couple of websites which I am in the process of designing.

I’m off to the Amp&rsand Conference (http://www.ampersandconf.com/) on Friday in Brighton, hoping to learn a whole lot and maybe meet some people too.