Posts Tagged ‘design’

Photo Gallery

Thursday, May 21st, 2009

I just finished more work on the old Atomicat Photo Gallery.
I was working for him last year, basically, at the same time as I was take what was essentially my first every-twenty-years-vacation. I figured I’ve been going to school since I was four or five, and I’ll probably be working until retirement, so I might as well take a year off to do some other stuff.

The site was the first website I’ve ever designed, and went through a couple drastic redesigns. I created the modern logo, which I’d say is fairly decent, and experimented with things like floats and whatever else.
The CSS on that site is disgusting. I didn’t really ‘get’ the id attribute, and so I had classes in every little thing. Extensibility was fairly unneeded, so I would end up creating a little class to do one thing, and then paste that on whichever element needed to do that. The result was something like HTML with half the semantics of HTML. Is <div class=”floatl”> any better than <div style=”float:left”>? It seems I’d completely ruined the core idea behind CSS.

The gallery was something else: Hours upon hours of hand-crafted goodness, as from a seamstress who turns away the sewing machine to make each careful stitch with her own sure hand.
In short, it was a mess. There were eight pages to be taken care of, each with images that had to be named specifically for that page. Any images you wanted to add had to be specially named for yet another page. Each item had to have the name/description engraved in the html, to be passed in an ugly GET variable.
Tonight, I went through the motions of creating the database and putting everything in it. I took every bit of repetition in the gallery and put it in loops. The gallery went from seven pages to one; the page went from eight individual items to two (I could probably turn that to one); and that item or two is loaded in from SQL.

I guess I’ve still got to do tags, but I’m finished for tonight. I’ll have to eventually upgrade the entire site up to my current standards, and then upgrade it again to the standards I’ll have by the time I’m finished.

This is shaping up to be quite a year.

Designing a Website, Part 1

Thursday, May 14th, 2009

The design of a website is an amazing thing, so I thought I’d share some of my method when it came to developing my new business site, Cozy Cabbage. It’s not complete, yet, but I’ll link when it’s finished.

The first thing I wanted to talk about was the content.
When I was writing about myself, and about the sites I’ve made, and drawing up what it means for someone to employ me (in a much less hokey-sounding way, of course, than it seems as I write these words right now), I realized I hated to use ‘I’ in my sentence structure. I suppose there was just something a bit too personal, in that; something, also, that might suggest very human flaws. On the other hand, I couldn’t exactly say ‘we’ and ‘our’, because it was only me.
In the end, I settled on using none of that at all, and I realized how fun and challenging it is to write something like that. “My services include–” No, I can’t say ‘my’. I say things like, “Work is done on a weekly basis,” instead of, “I do work on a weekly basis.” This shifts the active noun to the work, instead of to me, which I think really brings it out. It’s one of those things I hadn’t consciously noticed until I did it by accident.

The rest of the content is pretty simple: A very brief description of who I am, just in case people want to know. They’re there to find someone to make a webpage for them, so I’ll get right to the details: Samples, to let them know what kind of work I do (nothing great, at the momet — I have to completely redo a site I haven’t touched since last year), then what I’ll do if hired. I’m then adding a longer ‘about’ at the end, which outlines my work ethic and personal co-operation attitudes. There’s a little footer with some legal whatevers. On the top of the page is my logo, title, and three links: The main page, sample sites, and my HTML business card. In place of a contact sheet, I have a buy button. The buy button just won’t do, past this moment. I’ll end up making an actual order form.

On the design end, things were a bit different and mostly mundane. The original idea was to use cabbage and make the site ‘cozy’. I’m not sure how I intended to make it look cozy, but I’ll probably end up trying within the next couple of days. For now, it’s somewhat fresh and not too shabby. The site is very vertical, with improper use of sections below the header, and no sidebar, but I’ll probably get around to that next.
Overall, I just had a bunch of trouble with those floats, which you may have read a few days ago.

Another thing I want to talk about is fluid widths. I haven’t started on grids, yet, but there’s always been something disagreeable with fixed widths. Lately, I’d been keeping my browser at 640 wide, because I can easily set the window to a third or a half of my screen. Once I started looking at all these design blogs, it became quickly apparent that I’d have to switch to 960, though I still have a small horizontal scrollbar.
So I’ve decided that even 800×600 is too large, and it should comfortably fit down to about 300 pixels or so. I end up using variations on max-width and min-width and width percentage, which ends up giving me a great deal of control. If I wanted to use several divs inside each-other, I could even give the box a tremendously flexibly design. I could probaly make it shrink or grow as you increased your browser window. The next step would be to strategically place floats so that you get an extra column if you have a wide enough window. At the moment, you just get some more whitespace, which is always welcome.
I also try to keep my images scaled, because I don’t use full-page zoom, and want to design for others who don’t. The problem with this is images that have percentage width can’t seem to scale with text. I’ve been trying to work my way around it, but I may just have to choose one or the other.I could possibly set a maximum size with an EM-sized div, and then size the actual image with percentage. The max-size on the image, of course, would be set to about 200% of the image’s file dimensions, so it doesn’t become too grainy.

And I haven’t even started on the event layer, or whatever javascripting is called. I’ll also put some server-side stuff in, as well.

I’m researching Python and Django. It looks interesting.


Saturday, May 9th, 2009

I’ve finally gained enough inspiration (in the form of inspiration coins or the intanglible inspiration points) and so have created my own little button set. It’s frankly nothing good at all, but it was the first professional-looking set I’ve done, so I’m celebrating by tossing them all up here.

One thing I’ve still not “figured out” is having files download. Just the other week, I was trying to put that jQuery link in my sidebar, but I wanted it to pop open as you visited the page. I’m a freak for extensibility, and so I set it to open up to an arbitrary amount, and then animate again to the newly-loaded image’s height. The problem is that the image sometimes takes a few seconds to load. I ended up making the animation very slow, to give the download time to finish.
The same sort of thing happened just now, in that button page. I made up a nice little jQuery file to download the button names and paths from an xml file and cycle through them as you clicked the button.
If I used a spritesheet, I don’t suppose I’d have any problem at all, but (silly me!) I just kept them as loose little 40×40 images. When I uploaded the page and tested it, the button didn’t appear to be working. Eventually, after waiting awhile, the next button appeared.
The only thing I could think to do, besides spriting it all, was to shove a little ‘loading’ animation in that I made, and then move the pressed button to download before the unpressed button. This way it’ll queue them up and shove the loading gif in there while you wait. Not exactly perfect, but at least you aren’t left with something that isn’t working.

That reminds me of cufón. Firefox has the unfortunate tendency to not highlight a selected canvas. (I suppose it’s annoying when you’re dragging and dropping on something and the whole box goes all semi-transparent and coloured. But still.) Most people who see cufón used, while themselves using Firefox, believe that you can’t select text.
Others select a bit of text as they read, as a rule to get across those longer lines of text. In that case, they really are losing something.
I find it funny that it inserts a hundred little canvas tags into your document.

One last thing.
I’ve been wanting to start on the site for what I’ve decided will be my company name, Cozy Cabbage Web Design & Development, and yet I’ve ended up spending a couple hours doing buttons, and then making up that webpage.
That page is thrown together, really. I wanted something not-plain in the background, so I whipped up a diagonal stripe, which is probably one of the least-difficult backgrounds to do. I added in a bit of padding, had some headaches here and there, realized I shouldn’t have the body height set to 100%, and later realized I should tweak some of those greys into red.
It has a certain workmanlike feel to it. And really, I could have done anything I wanted, because it was a throwaway test page. Really, the best place to test out new ideas is to create an environment where it doesn’t matter if you make mistakes, and where you don’t have to give a thought about why you need certain design elements. You don’t have to ask yourself, “How does this reflect my brand? Will this style increase the click-through rate? Will people hate me if I use Cufón?”

(ó I’m getting used to it. Usually, those sorts of characters result in a stream of éäàåçêëèïî before I manage to find what I want.)

Business Cards

Tuesday, May 5th, 2009

A couple days ago, I saw two business cards laying on my mom’s desk. One was for a dentist, and the other was from some sort of hair salon. A quick look revealed that the dentist’s business card had a logo with simple shapes and soothing colours, a clean finish, dithered CMYK inks, clean-cut edges, a good weight, and well-positioned elements. The hairstylist’s card, meanwhile, had an unmemorable logo, was printed from a poor-quality printer (which left everything slightly smudged-looking), was printed on tear-along-the-lines printer stock from an office supplies store, and had elements of dissimilar style centered down the card. The images also had pixels sticking out.
It’s tremendous how the fine quality and subtle hues of a professionally-made card set it immediately apart from something home-made. I imagine people forget that their printers might print at 300 dpi, even though their images are saved at 72 dpi. Pixels, JPEG artifacts, and smearing are all things that are completely unacceptable, and which are instantly recognised by a great many people.

I’ve designed a few business cards, each one better than the last — and all of them mediocre at best. I also had the job, once, of designing a little 1-inch-by-3-inch advertisement for the local news pamphlet. It started out fine, and I was left with what I saw as an acceptable product, as I viewed the large text on my thousand-pixel-wide photoshop image. I tried to zoom it down to approximately the size it would end up being, but the program would have trouble rendering the fonts into the space of a few pixels — my screen’s density was just far too low. Even with the chopped up characters, though, I could easily see that the text was far too small, and everything was too squished. I scaled everything up, until it looked fine. I sent it off to print, but when I saw it in the paper a few weeks later the text was still smaller than most of the other ads. I had crammed too much content into too small a space, and I wonder if I had missed an older customer because of that.
Lately, too, I was trying to fix up a couple things on my current client’s business card, and was having trouble showing him how it looked. He had designed it in a portrait view, which means only half of it fit on my screen at any given moment. If I shrank it to half size, at which point it fit, some of the smaller details, such as thin lines, would become anti-aliased or disappear.

I decided, then, that there was no reason I had to use an image-editting program. I could created a page in XHTML and style the elements with CSS.
I started, of course, by creating the area of 3.5″ by 2″ at 72 dpi. I sized everything in ems, so that I can change the size to whatever I want and everything will scale. The text, of course, will scale unendingly. I had an extremely large version of my logo, so I used that in an img element. Background-image wouldn’t work, here, because I wanted to be able to set the width and height.

While I was designing my business card, I kept an eye open for lessons. When I started arranging the company name, the tagline, my name, and the contact information within a series of header elements, I quickly realized the pixelated structure of importance denoted by h1, h2, h3, h4, h5, and h6. I’ve always known about them, of course, and used them in my pages, but it wasn’t really until this moment that I truly understood their importance in communicating to the user which piece of information is given priority.
When I saw this, a couple questions came floating along: Which is the most important? My company’s name, obviously. But what about my tagline? Is that more important than my name and job title, or less? Is it alright to decrease the font size of my tagline to keep it the same width as the company’s name, or would that send the message that it’s less important?
Even then, that’s just one facet; The shape and position will also draw certain suggestions around them. I haven’t really played with fonts as much, this early in my career, but I’ve seen how others use them. You can use a font to emphasize an element at the same time as you make it smaller, which helps with positioning. I think that’s one thing that drew me to design: You have such a tremendous range of completely different attributes that you can apply to each element, and each one has the power to change the perception of that element. What you’re left with is the equivalent of tossing spices into a soup: Too much and the soup can’t be tasted through the spice, while too little leaves the soup bland. A tremendous difference is found between cooks who know how to spice their food and cooks who don’t.

I like the spacing on the card, but there was a moment where I decided the city/province/country just wasn’t important enough for the card. I did keep the city and province, but stuffed it in the corner. I find it actually helps balance the elements a bit, too.
Other than that, there were the tricks of getting everything to line up how you want. I saw that my text naturally flowed around the shape of my image, so I kept those nestled.

And now I’ll try to use what I made in that twitter post a few days back:
My very own business card, fitted with hCard.

Site Update

Monday, April 27th, 2009

I’ve started on the overhaul. The first to go were the tabs, which just didn’t really fit the site. I’ve actually found that tabs make it very hard to create any-width sites, because they have a tendency to wrap is really bad ways.

I decided that icons really resonated with me, and so I made up a little set. I’m not proud of them, but a couple turned out good. I’ll improve them later, and maybe eventually add some scripting to help with the dynamism.

Some might also notice that the icosidodecahedron in the background becomes rippled when it goes behind the content. A better example is here, where I found the concept. I’m going to have to search around for the technique he used to get that rippled-glass effect. I’m sure I’ll eventually learn that he used rippled glass to get that rippled-glass effect.
Maybe I should try a dirty-window effect (I don’t really have any rippled glass around). You could play with the concept, of course, and maybe have a person in the background who’s face changes depending on which element is floating over it.
There’s a lot of fun stuff out there.

So far, the layout was my top priority. Tomorrow, I might start on the wording.

…And in with the new

Wednesday, March 11th, 2009

Compare Before with after:

At least it’s not total crap, anymore.

I’ve been looking at CakePHP, as I may have mentioned before, and it seems too much for me. I should work on jQuery, first.
PHP needs a server, so I’d have to upload it to my website every time I wanted to test something.

I’ve also realized that I need to add those clothing items (at with php, instead of javascript, because having scripts off shouldn’t completely change the working of the page. If anything, the script should at most insert some events here and there to enrich the experience.