Build Conference
Coffee, Frank Chimero, Beer, Pick & Mix, Owls, Drop Caps, Jurassic Park, Jessica Hische, Open Book Exam, Gowalla, Keegan Jones, Typekit Cupcakes, Hand crafted, Threadless, Beers, Tim Van Damme, Golden Spiral, Tim Brown, Beers, Meagan Fisher, Pause, Liz Danzico, Bulletproof, Dan Cederholm.
Build Conference is in it’s second year, I’ve been extremely lucky to attend both years. With a myriad of fringe events as well as some of the top names in the design industry at the conference, Build 2010 was the best yet.
Monday
Monday night started out at the Art College with Jessica Hische’s ‘Daily Drop Cap’ exhibition. Here she had assembled a selection of beautifully hand-printed drop-caps from her ongoing side project.
The Standardista’s were also at hand with their “Inspired Interfaces” Exhibition. Chris and Nik had interpreted the work of renowned Product Designer, Dieter Rams, using HTML5 and CSS3. Their work really highlighted the power of CSS3, not just for layout, but creating complex shapes from scratch.
Tuesday
‘An Evening with Jessica Hische’ turned out to be one of the most inspiring talks I’ve ever been to. Jessica shared with us her journey in building a career in design. Her passion for lettering and illustration really showed. Her enthusiasm is contagious and has led to a more productive me, post Build.
It was then time for the Standardista’s ‘Open Book Exam, which saw an evening of some really geeky questions and lots of Beer guzzling.
Wednesday
I start the day of the conference a little hungover. It soon disappears and turns into a caffeine and sugar high, thanks to copious amounts of coffee and pick & mix for breakfast. Our coffee drinking habits were closely monitored by volunteers wielding remotes, who added noted each cup drank that day. The results were displayed in real time on a beautiful ‘Caffeine Monitor’ Infographic.
Keegan Jones and Tim Van Damme were first up. They explained the process of taking the successful Gowalla web app and designing it for a range of mobile devices. They highlighted the fact that only core content should be shown, on a mobile app, giving flickr as an example.
Next up was Tim Brown from Typekit with his talk on ‘Perfect Typography’. He gave a brief history of type and how Typography plays a very important role on the web. He also unveiled his Modular Scale Web tool which uses divine proportion to calculates a series of numbers to use to construct your website, based on the initial font size. I’m very excited about using this in an upcoming project.
Frank Chimero gave a very insightful talk about how we should not only strive to give a client the solution they need but something they love.
The start of Liz Danzico’s talk, ‘Power of the Pause’ left me a little unnerved as she proceeded to play the theme from Jaws. Her talk however had a big impact on me. She talked of how we should embrace pauses. You don’t always have to fill up time. I was particularly enamored with her idea of a reading holiday. It’s something I’m planning for the end of semester two.
Owl Enthusiast, Meagan Fisher took us through her workflow from start to finish when designing a website for a client. I love her idea of writing a brief for the project straight away even if it’s your own project.
Finally, it was the main event, Dan Cederholm. His talk was on ‘Hand crafted CSS’, promoting his fourth coming book, published by A Book Apart. As I expected from Dan his talk was choc full of useful practical tips, it was a frenzy of note taking.
A big thank you to all the speakers and to Andy McMillan for organising another great conference.
Refresh – Lessons on how not to develop a Web App
At this months Refresh a talk was given by Rumble Labs on the trails and tribulations of developing their fourth coming web app, ‘Onotate’.
Developing a Web App from scratch is a difficult and time intensive thing to do. For my final year Major Project I will be developing my first ever Web App. When I heard Rumble Labs were taking this months Refresh. I took the opportunity to learn from the pros.
Onotate is a web app devoted to presenting design concepts to a client, allowing them to annotate and approve them. While there are various web apps that take in the same ground as Onotate, Rumble Labs felt they all had substantial shortcomings and decided to design their own. What started off as a side-project quickly turned into a full time occupation.
Onotate is Rumble Labs first web app. Previously their bread and butter came from client led web design. They now have got a taste for Web App development and plan to pursue it further in future.
Their problems began when they decided to use Drupal as basis for the backend of the app, presuming that it would cut development time. This turned out not to be the case. To get Drupal to do what they wanted a lot of hacking had to take place. This led to poorly optimised code which was fraught with bugs.
The inadequacies of Drupal they were forced Rumble Labs to start from scratch. Once they utilised the Yii fremework, development sped up. The problem was they had to take on more client work to help sustain development of their web app. The result is it has taken them seven months longer than they had previously anticipated.
Onotate is currently in invite only Beta stage. They hope to properly launch some point next month.
My Blog: The Making of
Here’s a quick run down of how I went about designing the blog you see before you (assuming your not reading this through the feed.)
Constructing the Grid
In the early stages my time was focused on finding the perfect typeface, font-size, leading and column width for the job. I began using Helvetica/Arial with the intention of finding something similar but more typographically interesting at a later stage.
I started with the main body text, the font-size and leading were set at 14/21px respectively as I’ve find this to be the most readable. The column width was constructed to house 10-12 words per line at this size. The rest of the page was built up around the body content using a strict 21px baseline.
On some blogs I find my attention drawn towards clutter in sidebars. It’s one of my pet hates. When you commit to reading an article you should not be expected to fight unrelated visual distractions around it. In order to fix the readers attention on the article I faded the colour and lowered the text-size of all areas surrounding it including the header, navigation and sidebar.
I was aware that in stripping down my design I ran the risk of it looking quite dull. To combat this I had to find a typeface with greater variations in weight and with more character than Helvetica. Typekit to the rescue.
My Experiences with Typekit
This was my first time using TypeKit and to say I was taken back by the volume of typefaces offered would be a vast understatement. Four hours later I still hadn’t come up with anything concrete. This is nothing new for me. In print I’ve spent hours swapping typefaces about, experimenting with how each affects the character of the page. I think the problem is compounded on the web, not only do we have a vast selection of typefaces to choose from thanks to @font-face, but many of these fonts weren’t designed for the screen and thus unsuitable for body copy situations. It takes quite a bit of trail and error to sort the wheat from the chaff.
Thanks to Ministry of Type
A couple of days later I visited Ministry of Type, and there it was, FF Dagny Web Pro. You could say my blog is heavily inspired by Aegir Hallmundur’s font choice. It was a bit of a revelation when I refreshed the page after adding Dagny to the front of the font-stack replacing Helvetica. The composition suddenly felt lighter probably thanks to Dagny’s smaller x-height.
Dagny comes in four different weights: extra-light, regular, bold and black, this gave me an opportunity to increase the amount of typograhic colour on the page. In the end I used three weights, opting to leave out ‘extra-light’ which didn’t render very well at font-sizes below 16px.
For the main article header I used Dagny Black. By bumping up the font-size and transforming all letters to uppercase it added a editorial flavour to the design.
Powered by WordPress
The design of the blog had taken longer than I’d anticipated so by the time it came to considering which CMS to use I was really up against it. I had hoped to roll my own simple CMS, but this would take a week or more to develop, a week I didn’t have. In the end I settled on WordPress. Having used WordPress on a few other projects, the theming of the blog was quite rapid.
A Work In Progress
So that’s my blog. It’s quite simple, but deliberately so. I have a fixation with tweaking and redecorating so the design needed to be flexible. I want the blog’s look to evolve over time, so it stays fresh.
Responsive Enhancement
Why we should design mobile first and how Responsive Web Design may spell the end of the grid as we know it.
Over the last couple of years the grid has made a comeback. Thanks to advocates such as Mark Boulton the grid is the accepted way to design for layout just as it’s been in print for decades. However it’s becoming more apparent that many designers are taking the grid for granted and in the process missing the point of using a grid for layout in the first place. For convenience many websites now are born using an off the shelf grid system such as 960 without any thought or regard for whether the website content is appropriate for the grid system.
This is a dangerous habit to fall into especially with the surge of users now surfing the web on mobile devices. 960 pixels maybe the optimum width for the majority of today’s desktop monitors, but 960px fixed layout is next to useless for the user of a smart phone.
Many have been hailing @media queries as the answer to adaptive design, but as the guys at Yiibu point out in their Rethinking the mobile web presentation this can be very unreliable. They point out that by relying on @media we may as well slap a, “best viewed with Webkit” sticker on our website. We made that mistake of designing for one browser ten years ago, we should be careful not to replicate this disaster when designing with mobile devices in mind.
The Answer – Design Mobile first
Coined by Luke Wroblewski, Mobile first is the answer to our responsive design woes. The idea is simple, build a mobile version first. This can be seen as a form of Progressive Enhancemnet with which we have started with our oldest browser and then added the bells and whistles of CSS3 for those newer browsers that support it. Start with designing for a 320 by 480 pixel screen for those devices that don’t support @media queries, then add media queries to style mobile and desktop devices that support it.
Interestingly Wroblewski takes this idea further by encouraging us to design Mobile first even if you’ve no plans on releasing it. When moving from desktop to mobile we loose up to 80% of canvas space. This means that content has to be focused,
when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites. That’s good user experience and good for business.
In a recent post entitled “Responsive Enhancement“, Jeremy Keith responds to the problem of how the grid fits in to this new way of working by saying, “Instead of thinking in terms of pixel perfection, we should be thinking of proportion perfection.”
Responsive Enhancement has pretty much turns the traditional approach on it’s head. I’m looking forward to seeing how other designers change their workflow to incorporate it over the the coming months.
Lamenting the passing of childhood at PK Night
I attended Pecha Kucha night at the Black Box on Monday evening. If you don’t know the drill it’s, ten speakers showing twenty slides for twenty seconds. The theme was Curiosity. From anti-paramilitary graffiti to exploding cows, it had it all.
All the speakers had an interesting twist on the theme of curiosity, but three speakers in particular stood out for me.
Alli Magee aka Steen Ink
A local creative specialising in crafts, talked of how curiosity informs her own predominately textile based work, which by the way is stunning, be sure to take a look.
One thing she spoke of really resonated with me, how as children our curiosity is at a peak. I sat nodding as I related to her story of childhood – hanging upside down off the side of the bed, just because everything looked so new and different. It prompted an influx of my own early memories, days after I’m still thinking about it.
Unfortunately as an adult my perspective on life is firmly fixed. Between the age of four and twenty-four I feel my imagination has steadily declined. How great it would be to capture and use the innocent curiosity we once had as children.
Paul Kelly
Paul Kelly a local graphic designer, left me with a frog in my throat with his last two slides. The first showed a piece of bigoted paramilitary graffiti sprayed to a parish wall, an all too familiar sight in Northern Ireland. The second showed the results of the quick witted clergyman as the three letters of ‘UVF’ are transformed into the word ‘LOVE.’
Mike Flemming
The final and probably the most entertaining speaker. While everyone else took the attitude that curiosity was a positive thing to be commended and indulged in by creatives Mike turned it on it’s head, echoing the archaic proverb, “curiosity killed the cat.” Mike’s multi-talent as a copy-writer, designer and creative thinker really shone through.
Many thanks
Many thanks to all the speakers and organisers for a great night. I’m looking forward to the next one.