Archive for the ‘design’ Category
« Older EntriesPractical imperfectionism
Monday, July 19th, 2010
I’ve always been pretty fast at getting things done.
My attempts at dress making have resulted in haphazardly created dresses, which got an initial 5 second sketch, and were then redesigned as I went, and changed features depending on my patience and (lack of) dressmaking skills.
I lament my quickness sometimes, especially as my career is now web design. Never have I met a bunch of perfectionists, who obsess on every detail, they look at me in horror and, I believe, can’t even comprehend how I could POSSIBLY leave something that is a few pixels out.
I learn fast, I design fast and I code up fast. I am pretty good about doing things semantically correct. But, if I know that doing it semantically correct would take me another 3 hours, and a slightly non-semantic method is perfect in seconds and I have a deadline, my choice is always clear.
BUT I miss a lot of the tiny details. I’ll do things to get them done to a standard of 90% or so, and then go back and fix them later. When I’m learning a new technology, I’m okay with not knowing the right way of doing things, as long as it doesn’t impede my ability to finish things.
Perfection is a luxury
Most projects are impeded by budgets and often times there’s money for new features, but not for polish. I know mine are, and while I’ll spend some of my own time (unpaid) to make it look a bit nicer, when you have as many projects on the go as I do, you have to stop somewhere. Close to perfect has to be “good enough”. When you’re on a small team trying to do a lot, you have to sacrifice absolute perfection for speed sometimes. That suits me just fine (it’s also the theory of shipping by Seth Godin: sometimes you’ve just got to ’ship’).
This doesn’t mean I go back and strive for perfection.
For example, during every release, I spend some time adding a few minuscule details in (a subtle border, moving things a few pixels or cleaning up some code, for example). Most people won’t notice, but occasionally I’ll hear, “It looks much better (for some reason they can’t put their finger on)”. I think you have to continually refine your front-end code. If you don’t, your code base gets completely unmanageable.
On the other hand, I know web designers who ALWAYS does it the absolutely right way the first time. Their designs are pixel perfect to their mocks. They won’t use hacks, but will spend HOURS figuring out the “proper way” to do something.
That’s okay too. Different styles work for different projects. I’m always more keen to get the user flowing through the site smoother, rather than making sure under the hood looks amazing. Surely that matters more to 99% of the people using the site (1% are the ones that view source)?
I’m not scared
I have no problem with using a hack “just for now”, or if it’s an area I don’t know much about. It also means that I’m not super scared of new technology. It’s just the way I get things done; practical imperfectionism works for me.
Saying that, I am a bit tired of too many projects at one time, and am working harder to give myself enough time to actually think about the details. Being imperfect is not a goal, just a necessary evil for the busy designer.
Creativity in context
Monday, April 5th, 2010
Designing for web has taught me loads about context. I don’t know what the turning point was, but at a certain point I started thinking about ‘my mom’: the users for the website, who aren’t very good with computers and how to make it both enjoyable and usable. Sure, occasionally my ego still gets the best of me and I make a few decisions based solely on ‘how much I like it’, but it’s becoming rarer and rarer.
Thinking about the user first also makes working with the client easier. Because I listen to what they like and what they want to accomplish, we both have their best interests at heart. When you stop designing for how it will look in your portfolio, it makes the world a whole lot smoother.
Making a race night record with wordpress
Monday, March 22nd, 2010
I’ve just completed a website for Pioneer’s Running. They are a great company, who are really passionate about what they do.
Screenshot of the homepage
Wordpress Table-reloaded
This running website really pushed the boundaries of what I have used wordpress for. Sure, I’ve used some plugins to pull content onto the homepage, for custom sidebars etc, but what I needed was a content management system that did tables, text, calendars and more. They wanted to have a way to display race results after they’ve had a timed race night every month. They wanted to be able to update the results themselves, and they don’t want to look at any code.
Luckily, I found a plugin that looks a lot like an excel spreadsheet, and it has been so easy to integrate it in! I used this plugin to make the race night results easy for them to update themselves. They’ve only had one race night, so here’s what it looks like now.
The backend interface
It’s a lot like excel, but not as complicated.
Other features
- -Add multiple tables onto any page with a simple tag onto your page [table id=1 /]
- -Every second row has an alternating background color.
- -Highlight a row by changing its background color while the mouse cursor hovers above it.
- -The first row of your table is the table head (HTML tag th).
- -The last row of your table is the table footer (HTML tag th).
- -The Table Name shall be written the table (HTML tag h2).
- -The Table Description shall be written the table.
- -Yes, use the “DataTables” JavaScript library with this table.
- -Style your table with your own custom css (although I couldn’t get it to make entry 1, 2, 3 have different styling, but if I figure out how to override it, will append this post)
- -You can export your tables
- -You can decide if you want pagination, if you want to allow them to sort, allow them to search (which works great!)
Reservations
My only issue with this solution is that as not everyone participates in every race night, hitting sort for that day puts the blank entries at the top. While it’s very customizable, if I had more client resources, I would have spent more time customizing it, but we all know how difficult changing these things can be!
Creativity, definition of
Wednesday, January 27th, 2010
My talented neice's fancy fruit bowl... very creative!
I’ve just read this article by Andy Rutledge on creativity, and while I cling to my creativity, I have to agree with his sentiments…for the most part.
He seems to believe that you need to be properly educated. He’s written other articles on creating a set curriculum and adding a few letters after your name. I’m self-taught. Some of the best designers I’ve met are also self-taught. I learned web stuff by little bit of luck, mediocre-levels of innate talent, and a lot of sheer will.
Growing up is hard to do
By doing things wrong, I actually knew why those rules were important.
Knowing the fundamentals and being able to apply them do make designs better. Every designer with a few years under their belt should know that. But I still think a creative mind still makes a fantastic job. Any dunce with a bit of discipline can apply the principles to a bit of information. That doesn’t make it good design.
Designers should be creative
The definition of creativity has been warped a bit. Most people say that children are very creative. My niece is a fantastic artist, and she comes up with some really good stuff. In the past, I’ve often confused expressive creativity with useful creativity.
Design, by definition, is inherently useful. For most professions (architecture, engineering, and hey, why not… accounting), I think of it more like problem solving. And those curious and perceptive will work and niggle until a design works, and every pixel works towards its goal. Fitting components onto a page coherently and effectively requires more than just a knowledge of design fundamentals. Sure, they give you a framework for putting things in place, but the elegance that comes from a beautiful design usually comes from creativity mixed with a whole lot of empathy (whether it be artistic, typographic, structural, or any other type of creativity).
More to learn
Some of the design experts that we’re supposed to admire don’t really impress me that much, and a lot of their stuff doesn’t strike me as unique or creative, but their mastery of design theory and care and attention to details do. Within the confines of a new distinction between useful and expressive creativity, most of the problems associated with the terminology disappears. I can say that yes, they have solved the problem, so I guess they are being creative, but they haven’t found the most elegant solution (if your initial reaction is, “Meh!” then can it truly be the best design for that content?).
I ultimately think you can’t hide behind design’s rules either though, just as much as you can’t hide behind ‘creativity’.
Go ahead and read his article. He really says it well.
Taking the short way
Thursday, January 21st, 2010
Take the fast route baby!
There are so many resources out there on keyboard short cuts out there. Some really good ones that just got published include Mastering Photoshop: Unknown Tricks and Time-Savers (where I learned how to commit the text I had just written when my toolbars were hidden: It’s cmd enter!) and I’ve just finished installing Zen Coding into my Coda and Textmate, which will save me a lot of time formatting boring static text, definitely.
Shortcuts are great…
I know quite a few shortcuts in the Adobe package, and I can get around my mac pretty easily with a combination of key strokes. It saves me so much time, and it makes it so much easier to get into my “zone”. We all have our techniques for efficiency when we’re on the computer.
…but they’re also really frustrating
The problem is, they’re not universal. I hit the “V” key constantly in flash in order to get my direct select arrow. I hit “command D” constantly in Illustrator to place an image, but that’s the command for inDesign. After a while I get frustrated enough that I’ll go and change them in the settings, but by then, all flow has dissipated.
They also make teaching difficult
I have often gone to show people how to do something very simple in Photoshop, and to be honest, it takes me a while to find certain things in the menus. I hit keystrokes to change tools, and they are shouting, “Wait! What is that?”
Remember these words: patience and repetition. I think people should always learn the long ways of doing it first. Menus and panels often give a context that learning shortcuts do not. It’s like at school with math: the teacher would show you once or twice how a formula was derived, and then you just remembered the formula, but understood its context. It meant memorizing the formula was much easier, because it had something to connect to in your brain.
They make “experts” out of “amateurs”
I’ve met a few people who are whizzes at Photoshop, could talk to the talk, do the shortcut walk and then I saw their stuff, but it turns out they couldn’t design themselves out of a paper bag. Just because I’m really good with the drill and the hammer, doesn’t mean I should be designing the house.
This short-cutter has mistaken tool mastery with real skill, and that’s a huge problem. For those who strive for mastery in design, shortcuts are not important.
The zen of the goat
Friday, October 2nd, 2009
Safetygoat as a character, well, he’s my partner-in-crime. He recently let me know he would like a little change of scenery. I liked my old design, but the homepage felt cluttered and busy. Safetygoat also sought a bit of simplicity.
I’m hoping to have more seasonal/weather related stuff in the homepage. Right now, the leaves are all changing in Canada, and it’s absolutely gorgeous. A winter tree will definitely be next.
It’s a work in progress (as every designer’s site is, I reckon!): The haiku collection will return soon but to the footer (the javascript includes were invalidating and I’ve got only one error right now…). I want to do some more work on the posts, and the images will need to be resized. Soon, zen of the goat will be achieved, and he will be at peace.
I would love your thoughts!
Graffed: a tool for tracking body measurements
Thursday, July 2nd, 2009
The best apps, I think, are built by the people that really want to use it.
I always thought that the scales weren’t the best way to record losing weight and gaining muscle. I wanted to lose weight in my stomach, but I wanted to gain muscle too. I’m not really overweight, just the wrong shape.
A few sites would let you record measurements, but I wanted to see the measurements on an actual body as well.
So, with the help and expertise of Dan Wichett as developer, we created graffed!
What is it?
It’s basically a simple tool to track body measurements over time. You can compare any date to your goal body shape.
Why?
Honestly, I’ve loved recording my body measurements since I was about 16 or so. I haven’t got any eating disorders or anything, I just liked having a record of how my body changed as I did more exercise (and unfortunately, how cruel these past 10 years of beer and laziness has done to me!). It was fun making the charts, but there was something sloppy about doing it by hand. After all, I’m a web designer– surely I could come up with a better way to do this!
The process
I went through many many iterations of the design and the functionality, and then just hacked it all back so that the app only did the one thing: record body measurements. I also spent a few weeks working on the branding. I’ll probably go through a bit more on those processes later. Coming up with a good name, and making it memorable were very important to me!
The biggest job was to get the bodies working smoothly, and this was done in flex, and done manually. Occasionally I thought my head would explode from the math. This process is far from done, but in “Getting Real” style, it was time to get people starting using the app, so that I can get the usability absolutely perfect. Maybe we’ll even discover a better way to do it!
Let me know what you think!
We’re still putting the finishing polish on things (I hate the concept of beta, especially when companies stay in it for YEARS, but we really are in beta here)– some things still aren’t working as smoothly as I’d like, but it’s time for you to tell me how you’re using it, and what you like and mostly what doesn’t quite work how you’d expect!
For the next few weeks, we’re letting people upgrade for free, so I’d be especially keen to hear how you think all that is working. Thanks in advance for your feedback! Go to graffed!
Meet thepickuptruck!
Tuesday, April 14th, 2009
I’ve just completed thepickuptruck.com, my first app of my own I’ve actually finished!
So, it’s pickups, but it allows anyone to add pickup lines in (either by doing it anonymously, but also by claiming your pickups by putting in your twitter name). You can vote on pickups. We (myself and Dan Wichett, a fantastic developer, who has been my partner on this whole thing!) have also made a mobile app, which uses the opera widget process, where you can save your favourites.
I would love your feedback on the truck! Let me know what you think!
screen shot of thepickuptruck
Walking through my resume redesign
Sunday, April 12th, 2009
I’ve just finished writing a blog post on smashing magazine about designing a resume. I ran the competition about Steve Stevenson, and was a bit sad that I couldn’t participate (it wouldn’t have been fair, as I was seeing everyone else’s, and I had come up with the stuff for it). But, as I came up with the competition, I began reworking my own resume. When I started out in design a few years back, I’d always gotten loads of compliments on the design of mine– it was more unique than lots of peoples’ and its character was one of the reasons why people hired me back in the day. So, I opened it up and realized that I hadn’t updated it in over 2 years!
Now, a LOT has changed in the past two years. I’ve blossomed into a full blown web designer now, and I’ve worked on some really great projects. And, let’s be honest, I’m a much better designer now than I was then (at least, I like to think I am!). There was no way I could keep a lot of the old content on there, and print work from 1998 isn’t featured anywhere in my portfolio, so it had to go too.
It was also a bit boring to me now and almost a little bit clinical. It didn’t reflect what I can do, and it didn’t make any of my work seem very interesting or impressive.
I wanted to do something cool and unique– I know there’s a few camps on resume design and its printability and format (one camp saying it should be in word/plain text. But I’m in the “impress me” camp as I work on quite creative projects and want to be hired by people that want something more unique). I’m quite happy in my job at the moment, so I have time to tweak it to my hearts content (hopefully with some great constructive criticism from you kids). Because I’m always interested on how people come up with designs, I thought I’d document my process!
sketching
My initial idea was to have pockets of information– each bit was in its own circle, and the ones that I was most proud of, or were most impressive, would be bigger.
The problem was that it didn’t actually have any flow at all, it was confusing, and there was no chronological ordering (which meant people wouldn’t know where to start reading). As soon as I started putting the circles and the info in, I knew that it wasn’t quite right.
mocking
So the next idea was to have my projects listed, by order of importance. Here’s a screen of that design in progress.
First problem was that it made me look like a freelancer. There was no way to separate my actual jobs from my personal projects. It was also just a little too plain. I wanted to do something different, something that was more of an informational diagram than just a list of things.
the idea
So, as you do, it was in the shower that I had an idea for a chronological-style timeline. What if all the items came off in little pockets from the timeline, like the dinosaurs? I could also do something with colour or section things off so you could see that I worked on things at a similar time.
In practice though, I was still having problems making any sort of distinction between full time work and side projects. I also wasn’t sure how to incorporate my skills in there. I thought about having employment on the top of the bar, with skills underneath, matching my time working with those technology in brackets. A quick try at this and I decided that it looked too busy that way, and I was going to have to simplify things if I was going to make it effective.
My other issue was that I had done a LOT of work in 2008, but not really that much in other years (at least that I wanted to show off!)… I was risking 2008 getting really bloated if I wasn’t careful about how I organized it.
I played around with coloured bars for each year getting darker for each year, finally going to a cyan on current, but it made the page really cluttered and very difficult to read. My other issue was that I worked at Simply Business and BView at the same time. It’s not actually important to an employer, but I wanted to acknowledge that the BView employement went back to 2007, but it’s very much into the 2008-current block. The little tail pushes it backwards towards its rightful place.
The top area is my 4 main design jobs I’ve had. I’ve worked on a lot of other projects as well, but I wanted to focus on the ones where I spent the longest and were most relevant to webdesign.
I have the year display getting bigger and bigger, which means that there’s not a lot of empty space I haven’t used effectively.
My favourite projects besides BView are thepickuptruck, theBoxCat and snowplease, of them, unfortunately only the pickup truck is finished yet (but hopefully the others will be done soon). I wanted to give extra focus to these, as, well, they’re really exciting projects and I’ve worked hard on them (and, when they go live in the next few months, they’ll be the projects I’ll want people to go look at).
I also wanted it to be a fast read. It’s just supposed to be a summary– they’re little tidbits of information to prompt people to ask more questions, or to give them a little taste of a project and then allow them to view the work and let it speak for itself.
I’ve also included little tidbits of information: me learning photoshop, going to Japan, started dressmaking and when I started up safetygoat are all in there instead of having an interests thing separately. Too many resumes I have seen have no personality. (something which will make a person stand out, which matters when people are looking through hundreds of resumes. I always think back about when I came to the UK and got two interviews for jobs I was completely unqualified for, because I had a cheeky cover letter.)
So here it is…
Freelance work is there as well, but it’s not as prominent. I’ve kept the lower left corner for my skills and a brief summary.
I broke a lot of the rules I came up with myself in my blog post from smashing, but I think it makes it a really interesting resume. Welcome your thoughts.
My Top 5 Guy Webdesign Heros
Sunday, February 8th, 2009
A while back, I wrote a post about my female webdesign heros, and felt a bit guilty about singling out girls. It does affect me that there are so many more fantastic guy designers out there than girls (although the girls are starting to come up thick and fast), and I wanted to showcase girl talent (Lee Munroe went further and even featured little ol’ safetygoat on his list of top 26 female webdesigners… *blush!*). But the fact remains that I am actually much more inspired by these talented men. (side note: these are my heros, not necessarily *the best* as I really think that’s way too subjective, these are those that really inspire me…) So here they are!
#5
Brendan Dawes
Brendan Dawes is an inspiration mainly because he doesn’t just have a style, he also tries to display data and information in different and meaningful ways. His intro page displays all his articles vertically and sized by popularity. It’s almost incoherent, but done in a way that makes you want to explore. He’s one of those people that is pushing interaction between the different creative industries, and seems to see no boundaries when it comes to web design. His stuff isn’t beautiful, and it’s layered on top of a traditional blog platform (which isn’t exactly cutting edge in itself) but his experimentations, such as doodlebuzz , make the web a more fun and interesting, and most of all, dynamic place.
#4
mikekus
Mike is Carsonified’s designer. Mike seems to constantly push himself to do really fantastic work, and he’s a really fun illustrator with a distinctive sketchy style. Each of the conference sites he’s revamped recently have been gorgeous, but they maintain a similar feel and style (with different illstrations and colours) to keep them linked together. I saw a video of his presentation at FOWD, and his slides were all hand-drawn. You can tell that he is passionate about designing EVERYTHING, and gives himself a hard time about following web trends too closely. He also preaches that designers should get into html/css as soon as possible in the designing process, which I’m starting to agree with– you make more useable, dynamic, rather than flat websites. Mike is definitely the type of designer you can look up to.
#3
wez maynard
Wez is one of my buddies on twitter, but that’s not why he’s here (I have lots of great fun web design buddies on twitter but I can’t feature them all!). I’ve chatted with him a lot, and he’s a really nice guy. Little did I know, he was also the creator of YoDiv‘ and divVoted’s design (my screenshot here), both of them sites I’ve admired and put in my inspiration book. Wez is fantastic at integrating in his illustrations and textures into his headers and footers. His design utilizes his artistic abilities so well, and while he’s definitely a web 2.0 designer, he has his own style which resonates through each and every design. Looking through his portfolio, he experiments with different techniques, but always produces cohesive designs. Take a look at the footer of his most recent design for Dean and Reddyhoff Marinas. I love how the design is bursting out of the water. Wez is one of those designers that pushes me to try and use graphics and illustrations in more effective ways. His work is definitely drool-worthy.
#2
Jason Santa Maria
It’s hard to make one of these lists without this guy appearing on it. Before I knew of his own site, I had admired his work a few times (just look at wordpress or alistapart). Jason really spends the time to design things right. His current blog is simple, but a great framework to allow him to individualize every post. It is nice to see a designer, who is also a good blogger (it’s amazing how many quality design bloggers are not very good designers, but that’s another story), actually spend the time to individualize each post that he writes. He is also thoughtful and conscientious about where he’s come from. You can read how he came into typography and design from an art background in this article, but I love one of his recent posts has been about his first and second online portfolios back in the day. They’re pretty good, yes, but you wouldn’t call him amazing at that point. That’s what makes him an even bigger hero: he used to be mediocre, and now he’s amazing. This says to me, “If I work hard, with a little bit of luck and a lot of sweat, I too can be amazing. That’s a hero.
#1
Olliekav
Ollie has to be my biggest webdesign hero. He’s self-taught, both at design and code, and he is one of those people that pushes himself all the time, because he wants to be better. In code, he is the one who has made me care about standards compliance, microformats, and new technologies. In design, he has instilled in me the importance of grids, pixel perfection, and the value in the little details. A few of my favourite examples of his work is his design for theBoxCat (launching soon). I worked on the logo, but he took that logo and came up with a better webdesign than I could imagine. I remember seeing it and immediately wishing I had done it, and respecting him even more as a designer. His illustrative style is unique, but the area I admire most is his logo design. Just take a look. He loves typography and is always experimenting with type– an area where I need the most work. Of course, Ollie doesn’t sit down and tell me about these things, he is my hero by his example. Now, I’m sure you’re all thinking that I’m just saying all this about him just because he’s my boyfriend. But the truth is, we don’t work together too closely. He always wants to get better, and nothing pushes me harder to want to be better as well. Take a look at his stuff, and talk to him. You will never meet a more helpful and hardworking designer.
How about you? Do you agree with my choices? Who are your heroes?
« Older Entries
