I have seen discussion around the web lately about keeping a design library. Many CSS experts have suggested this before for coding. Having a collection of elements that work can save a lot of time when trying to come up with ideas for elements like page runners, pull quotes and section dividers. I don’t have one of these collections yet (I’m thinking of it as a personal stockpile) but I’ve been looking through my work and at other examples to see how they handle pictures in particular.
Details are important when it comes to a design. Things like the shape of the photos used can make a big impact on the cohesive feeling the piece has.
So what can you do to a photo other than leave it as a rectangle or square? Try exploring other elements within the layout and apply those shapes to the photo. Here are a few examples of ways I’ve thought to treat a photo, other than the typical rectangle, star, circle or heart.
Vertical Images
Horizontal Images
What do you think? How have you created dynamic photo shapes in other designs? Do you have a design library? What kinds of things do you keep in it?
Want more creative articles? Subscribe to the Creative Curio feed! You can also receive new articles delivered directly to your inbox. And remember, with either subscription (both of which are always free), you also receive a free PDF of the essential Photoshop shortcuts that we’ve talked about here on Creative Curio!
I ‘ve never heard of this kind of design library.
I’m not a great fan of anything other than the standard square/rectangle for photos and illustrations.
However, something I have started to do recently is to make Photoshop templates for the images and illustrations I use on my blog—which has saved me a lot of time. Not sure if this counts.
Anyway, it’s a very good reminder to start organising my ‘library’ of images.
John,
I would define a design library as anything (graphics or code wise) that saves you time as you work. Have you heard web design folks talk about it before? They usually have a CSS library so that they can just drop in their most used definitions for the body tag, p tags and such.
I don’t always use these image shapes, more often than not it’s the standard fair in my work, but I have liked the effect different shapes have had on the design as a whole when I’ve used them (when appropriate, naturally).
The library is a spiffy idea, I usually just open up old style sheets and copy what I need from there if there’s something in particular I’ve done in the past.
I was going to say that I really like how Jacob Cass uses images in his posts - they’re like intro images, but instead of a long rectangle it’s kind of a banner or arrow shape. His site seems to be missing at the moment though. :(
kristarella,
I need something that I can look through and say “oh yes, that will work” so I don’t have to spend so much time on smaller details.
Copying old code, yeah, that’s what I do, too, though there have been times when I can’t find my files! I have been thinking about this concept more with page runners, but haven’t had the time to research and come up with my own stuff and this was easier
Yeah, I had thought of the way Jacob does his photos when I was creating this (I was not “inspired” by his blog though). Hopefully he gets whatever’s going on figured out soon.
I do a lot of CSS work, and so I keep a pretty cluttered library of my stylesheets. Being that there are so many different layout options I’m trying to build it up more and more.
I have also recently started to dabble in t-shirt design just for myself for fun, and made some very plain t-shirt outlines of different colors so that I can just drop on text or logo’s to see what they would look like on a shirt.
There are always ways to gather up resources like these. I use del.icio.us to keep a library of a lot of design sites that are helpful to me.
Hi Lauren, sorry I have been a bit under the radar the past few days. And a few people have noticed my website being down (including me) and I have been working frantically to get it back up. I also put this on Davids blog, but I got contacted by my hosting provider saying…
I found this extremely bizarre as it is not like I have a huge number of visitors that could do this (maybe 250 unique a day) yet somehow there has been too many ‘index.php requests’. Something I really have no idea about. I have emailed them back telling them I would try sort it out myself and for them to put up the site again (so at least i can access my emails).
This has been really frustrating… at first I thought it was what happened to you but I had checked my google filters.
I really hope that this clears up soon and without me getting a dedicated server - that would be way out of my budget. eek.
But anyway enough about me and my problems… I don’t have a design library as such but I do have a large collection of quality stock images, vectors, 2000 professional fonts, 6000 free fronts (of which i will probably never use).
Re my intro images that I use on my site I had the idea of creating that image so someone knows that the post comes from me - a kind of symbol. It is a very vague shape of a pencil (twas my thinking anyway).
Anyway, looking forward to your next design process post.
Btw, do you use google reader because there is this cool function where you can share your friends rss feeds that I just found out when I was organising my feeds into appropriate folders. Something worthy of a post
For any coders out there, here’s a cool new site to organize and share your code snippets: http://snipplr.com/
Dylan,
What do you think of that site, snipplr, that Alec shared? Have you seen it before? It looks like an awesome repository of all code related hacks and frequently used bits for everything from CSS, HTML, Ajax, js, etc. It’s almost like del.icio.us but for code. Check it out!
Jacob,
And that’s rather low that they’ll sell your space for ads while you’re trying to figure things out!
I just had an idea. Do you think one of your articles was dugg? I mean, I know you say that you have a fairly low number of daily visitors (that’s still more than me, though!) but maybe somehow it spiked due to an article being submitted to a social media site? Do you actually know what’s wrong? Too bad your host isn’t being very helpful
Yes, I use Google Reader and have seen that Share feature. I think I’ve shared 2 posts. I don’t have any friends/buddies in Reader, so I don’t know who I’m sharing them with, but… yeah. Perhaps you can write that article? I haven’t looked into it much.
Ah, a pencil. I thought it was just an arrow :/
Alec,
Thanks for sharing that! Pretty handy! Adding to del.icio.us!
I don’t really have a design library, I have a library with some images I like, and whenever I need something I don’t have, I just look for it.
Re: Jacob’s site. I agree with David, there may be a plugin issue. Jacob, have you installed any new plugins lately? I know you had a post recently on some handy plugins. Good luck with restoring the site.
Vivien (ib),
I think libraries of this sort help speed up the design process. I don’t necessarily mean specific images (it’s difficult to find ones that will work in many situations), more like ideas for how to accomplish common/frequent design needs - image shapes, page runners, etc. In relation to coding, think of it as a generic horizontal menu, or a basic two-column setup. A place to start, or a place to go when you have a certain requirement for a project. Maybe I need to expand on my idea a little further.
I do not believe it was a dugg item, because google analytics does not show any large spike so I think it may be a plug in issue. I have installed a few plugins in the past two weeks (ajax comment editor, commentluv and 1 more that I cant remember the name of). Maybe it is the plugins, but I will disable them and see how it goes… once I get my site back online.
“Do I actually know what is wrong?” They said that there was too many “index.php requests” - where they came from I can not access as I cant get into my cpanel which is why I am so frustrated, I can’t do anything until they re enable my account. I am thinking of changing hosts as this is unacceptable.
What is your google address? I can add you to the friend thing in there and experiment with the features you can use.
I wasn’t fussed about the arrow/pencil - it is just different. :)
Jacob,
Well, I wouldn’t recommend my host with full confidence after what happened this past weekend. I liked them up until that point. All they needed to do was push the restart button, but they wouldn’t because I didn’t have the admin passcode (I’m basically sharing an account and the other person has that info and was unavailable). Restarting the server wouldn’t have caused anyone any trouble and all the sites on that server were down anyway. Rather ridiculous.
I’ve heard Dreamhost is good, but I’ve not had experience with them. Charity uses them if you’d like to ask her (and use her affiliate link at the bottom of her blog!)
Jacob - I use NearlyFreeSpeech.Net they’re cheap and I’ve had next to no problems with them.
They respond quickly to support requests and have good facilities (e.g. a site problem diagnostic thing).
Ah yes, the site problem diagnostic things, those are quite useful!
It was there… had to tease
@Kristarella
I believe the proper term for what you’re talking about is Problem Diagnostic Doohickey. (PDD) It is very sophisticated software. haha.
@Lauren
I took a test run with snipplr and It was really great. I liked how it showed the most popular code samples. I will definitely be using it in the future. Thanks Alec for the link.
There is also another online tool I have used, but can’t remember the name right now. (I’ll get back to you on that.) It is a live code sharing online application. You type in a field that looks like a text editor, and it will show up instantly to whoever it is your on the service with. It is different from just any other messenger. It has line numbering and some other features. I need to find the the site again…
Dylan,
Hehe, PDD. Good one! I liked that Most Popular view, too. The other code tool you’re talking about sounds useful! Let us know if you find it…