One of the ways in which I use Twitter is to collect inspiring quotes on design, I bookmark these as favourites as a way of archiving them.

These quotes are from designers that I look up to and try to learn from. I am going to start archiving collections of these on this site as a way of curating the best ones. I also want to share these with other designers, sometimes a retweet just isn’t enough.

With this in mind below is the first of what I am planning will be a regular entry to this journal. I hope you find them as insightful and inspiring as I do.

Typography requires circumstantial flexibility. A typographic rule is a recommendation, not law. Act accordingly. Flex, don’t snap & break.
— @nicoledotin

A thing made without a problem to solve isn’t design, it’s art
— @pixelcult

Don’t make something unless it’s both necessary & useful; but if it’s both, don’t hesitate to make it beautiful.
— Shaker proverb

The beginning of a good feature is getting rid of features.
— @mattgemmell

Graphic design has just as much to do with words as it does with pictures.
— @fchimero

There’s a real art to making things seem obvious.
— @dburka

Designers: Your Word of the Day is “restraint”. In fact, that’s the word every day.
— @philcoffman

Details in typefaces are not to be seen but felt.
— @espiekermann

Content precedes design. Design in the absence of content is not design, it’s decoration.
— @zeldman

Geometric shapes last for thousands of years while personal shapes have a very short life.
— @vignelli

The article focuses on building a e-commerce product page but the concepts and methodology are suited for any type of future friendly web content.

The article is chock-full of good advice and current best practices for building modern adaptive web experiences. Here are my notes from the article:

• The diversity of devices connecting to the web means one fixed layout for all devices is not a good user experience.
• Mobile context is much more than just screen size.
• Touch screens enable new ways to interact with web content.
• When thinking mobile-first consider what content is essential and how can we present that content as quickly as possible.
• Connectivity can vary drastically, ranging from strong wi-fi signals on the couch to 3G or EDGE.
• Start with semantic light-weight markup. This will ensure your document can be accessed by many mobile devices, tablets, desktop browsers and future web-enabled devices, regardless of feature set or capability.
• When building mobile-first keep in mind the goal is to keep the experience as lightweight and fast as possible.
• Prioritise content. Think about what content does the user need initially and what content can be requested on demand.
• Conditionally load the content when the user requests it or when the resolution reaches a certain breakpoint.
• Loading content only when needed keeps the initial page size small.
• Make sure your layout is flexible. Today’s connected devices have many different screen sizes, and tomorrow’s devices won’t have the same resolutions as today’s.
• Because screen size is an unknown, use the content itself to determine how the layout should adjust to its container.
• Create seperate style sheets for larger screens.
• Start with baseline shared styles and introduce advanced layout rules when screen size permits.
• Instead of declaring large screen rules first only to override them for smaller screens, define rules as more real estate becomes available.
• The web by default is a fluid thing. Do your best to work with it instead of against it.
• The absence of support for media queries is in fact the first media query.
• Assume small screen by default. This allows us to support more platforms and also makes it easy to add more breakpoints without having to modify existing styles.
• Defining styles as they’re needed also keeps file size down, reduces complexity and keeps code more maintainable.
• Use em’s and percentages to keep layouts flexible.
• Relative units are far more compatible with the tremendous variance brought on by screen size, pixel density and zoom level.
• HTTP requests have a huge performance hit for mobile. Connectivity varies. Using CSS and data URI’s can reduce the number of HTTP requests needed to render a page.
• Perceived loading times is a key concept. The same amount of data can be requested from the server but it’s how and when it’s requested that is important.
• Techniques like lazy loading content or conditional loading of content when needed can give the perception of faster downloads.
• Navigation is especially tricky for adaptive web designs. Top navigation is common for desktop sites, but top navigation can crowd the screen and push down the primary content on small screens.
• Due to the constraints of mobile opt for content over navigation every time.
• Use Modernizr to detect for the presence of touch events.
• You can use screen size to determine when to load in extra content.
• It’s best practice to load in mobile optimized images by default then conditionally load in larger images only when needed.
• Always be mindful of performance.
• Create mobile first CSS to keep things lightweight, simple and maintainable.
• Use relative units – ems and percentages – to keep styles as fluid and flexible as possible.
• Let content determine the breakpoints for media queries by using em’s.
• Exploit opportunities to reduce HTTP requests by conditionally-loading content and using HTML characters, icon fonts, CSS gradients and Data URIs.
• Author unobtrusive javascript and use tools like Modernizr to detect features.
• Take advantage of mobile-centric features like touch events, telephone links and geolocation to deliver enhanced experiences to mobile users.
• By creating adaptive web content you allow your content to go more places.

There is an astonishing amount of good advice in just the preview chapter. Here are my favorite quotes from that chapter:

Everything you deliver on a current project and every interaction you have with a current client is business development.

No one is hiring you to be their friend. They’re hiring you to design solutions to problems.

While your portfolio is important as proof that you can do what you say you can, it can’t be your biz dev department. You need to convince your potential clients that you’ll be able to solve their problem as well as you solved your past clients’ problems.

To do this design thing right we’re going to have to redefine what we think of as “our work.” That stuff in your portfolio? That’s just evidence of work. The real work is that plus all the conversations, decisions, and convincing you did along the way.

No one’s going to know what you think about unless you write and publish your opinions.

People need to know who you are so they can write you checks. Write! Design! Put yourself out there.

Unless you’re putting yourself where people can see you and making your opinions known, clients or potential employers won’t be able to find you.

That was all from just one chapter. If you’re a designer working in client services this book is going to be essential reading.

I’m trapping the passage below for reference as it really resonated with me. It’s something I’m guilty of a lot. I find I get too attached to one solution and fail to explore other ideas.

“If you want to be successful, don’t fall in love with a particular type style, because if you do, you’ll want to use it everywhere — even in places where it’s inappropriate.”

“This also applies to ideas. I’ve seen people fall in love with a certain approach, and then become unable to see the merits of alternative approaches.”

—Roger Von Oech

To say that comment has been on my mind is an understatement, it’s been like a noose around his neck. The Designer in question is well respected and knows–his–shit. So I’m setting myself a side project. I’m calling this project “Progression”. Obvious I know but that’s not the point.

The point is I have to improve my skills as a web designer. I am not progressing as I should be. My portfolio of work is not bad but it all feels very safe. That’s not good enough, not today. Just a quick look on Dribbble is all you need to know that competition is fierce, it’s eat or be eaten my friends. Besides I have no other option, I am in this profession for the long haul.

My plan with this project is to tackle design styles and problems that are outside my comfort zone. The goal: to see what new skills I can learn and to see what new styles I can produce. I’ll be using this Blog, Dribbble and Behance to log my efforts.

With that in mind all that’s left to say is, “onwards and upwards”.

A very interesting video from Gestalten.tv featuring Erik Spiekermann as he explains the new visual languages, the design process and the analogies of music and typography.

I especially like the part in which he explains how he creates something new through study of some existing typeface. In this case Sabon.

Plantin is not that well known and deserves to be used more. It is a true hidden gem that I’ve only just discovered following the redesign of Weightshift. I loved this design, Naz Hamid has serious design skills. I took a look under the hood and discovered Plantin.

When you begin to use a new typeface it’s good advice to try and understand what it’s unique characteristics are. What follows is my attempt to get a handle on the nuances of Plantin and try to understand why this typeface has grabbed me. But first a little history.

A little bit of history

Plantin was designed for the Monotype Corporation in the early 1900s, It is named after the sixteenth-century Antwerp printer Christophe Plantin (that’s him above).

Although not based directly on his work, the model for Plantin was taken from the huge collection of type Plantin had procured.

With its serious tone, narrow width, and large x-height, Plantin has definite merit as an alternative to Times New Roman. In fact Plantin was used as a reference during the cutting of that very Typeface.

That lovely italic

Plantin is an old-style beautifully designed Typeface. It has more character than most serifs and this is why I like it. It has a certain charm and the italics are really beautiful.

Another plus: Plantin is exceptionally legible and elicits a classic, elegant tone. The Monocole magazine & website uses Plantin to great effect and it forms an important part of their brand.

To wrap up

In my opinion Plantin is a confident, beautiful Font and like Helvetica & Futura before I am all over this Typeface. If you are looking to add a confident, permanent look to your design Plantin is a great choice for your project.

I’ve just picked up Design as Art by Bruno Munari. I’m only 50 pages in but it’s turning out to be quite a read. Here’s my favourite piece so far:

A designer with a personal style, arrived at a priori, is a contradiction in terms. There is no such thing as a personal style in a designer’s work.

While a job is in hand, be it a lamp, a radio set, an electrical gadget or an experimental object, his sole concern is to arrive at the solution suggested by the thing itself and its destined use.

Therefore different things will have different forms, and these will be determined by their different uses and the different material and techniques employed.

—Bruno Munari

I say returning but my first stint lasted a week. Back then I was determined to give it a go but a job offer landed in my lap which I felt I could not turn down. It’s not everyday you get the chance to be part of a full site overhaul. So I took the job — which has now come to an end.

So I’m back where I was last May but a little wiser and financially better off. I’m determined again to give Freelancing all I’ve got. Excited — Yes. Nervous — ABSOLUTELY! But I need to do this. The worst that can happen, I go back working for the man. That’s not that bad.

I finish full-time at Muzu before Christmas. The reason I’m putting the word out now is I need to get the message out that I am available for work. I design and build websites. I now need to let people know.

I haven’t got it all figured out yet and that’s exciting. But if you’re looking for a website designer or front-end developer from January onwards drop me an email.

The competition set 3 teams against one another. Each team was paired with a charity and tasked with building a rock solid, fully functioning, CMS driven website which would help them achieve their goals.

Meet Your Charity

Our Charity was CD’s Helping Hands, a West of Ireland Childrens’ Cancer Charity.

We met with Jennifer from CD’s Helping Hands who was fantastic and completely open and supportive of any ideas we had.

During this initial interview it became apparent they had just re-branded. The name CD’s helping Hands had led to some confusion and a new name and logo was needed.

A big part of this re-brand was the website. And with childhood cancer being such a serious topic we knew from the get-go we had a huge job on our hands.

The A-Team

Luckily, I was part of Team A which was made up of some very smart and driven people. Roll call: Amy Grange as project manager, Stephanie Francis as Front-End developer, Ben Arent as IA/UX, Elaine Larkin as Content writer, Anthony Lindsay as Wild Card and Ian Huet as Developer.

We have lift off

My responsibility was website design. This meant the bulk of my work was done during the first half of the day.

Once I had an agreed list of homepage elements and assigned each a priority relative to the website goals. I had enough to begin paper prototyping.

I quickly skectched a number of layouts and a simple site architecture to present to the team. One around the table feedback session later and I was off to design a website.

The End Result

Somehow by the end of 24 hours we had the website together. It was not perfect and everything did not make the final-cut but what we had was a fully functioning website. And one which was a big improvement over the existing one.

The way the website came together in the last hour was unbelievable. Hats off to the rest of Team A who had to take what I handed over and breathe life in to the flat designs — true Rockstars. Thank you for being so patient while I got the design together.

Thank you

I feel very lucky to have been apart of 24 The Web. The experience was both humbling and enlightening. A special thanks to Stewart and Daragh for organising such an event and who stayed up all night blogging, tweeting and conducting food runs.These guys are modern day web heroes.