Friday, February 02, 2007

InDesign, out of time

I must first apologise to my colleagues for being unable to join them on the trip to London on Wednesday. My ribcage had decided not to cooperate with the rest of my respiratory system, leaving me short of breath and in a lot of pain over the weekend. I felt really annoyed that I could not go, but would have been more annoyed if I had decided to go only to find the Tate Modern to be closed, as it was on Wednesday. I also missed my meeting with John on Tuesday about ideas generation, which only frustrated me more.

Armed with some anti inflammatory pills for Thursday, I managed to make it into college. After a lecture on more typography, it was time to start the first of our timed tasks. First, we had to create an exact copy of Steve’s version of the article which he had put up onto the projector. We had around 20 minutes to do this, which I thought was a little on the tight side, and was confirmed when the last 3 minutes seemed to disappear in 30 seconds. About a quarter of this time was taken looking up things like drop caps which I did not know how to do in InDesign, and are not immediately apparent. Between now and next week I should probably find out how to do some of the paragraph formatting techniques we learnt in the morning, so I am not wasting time cutting through the jungle of help topics should they appear in a new task.

After missing the deadline for handing this first task in, I was determined to complete the first real task. This was to redesign the article, using the same components as Steve used in his. We had a substantially more generous 90 minutes to complete this, which I knew would generate better results. I tried to use the formula we had used for the banner designs, which was to do quick sketches, pick a design, draw a neat sketch and then go into production. This worked well, and the design I created can be seen below.

I was very pleased with my design, and the Myriad Pro font I used is fast becoming a favorate: easy to read at small sizes, conservative proportions, and very effective when used with the standard 120% leading rule. I used grey lines (black set at 30%) to add some feature to the banner, and it was also useful for filling the white space under the picture. I used the same copperplate font from my banner designs for the title, and a 3 character cap drop for the letter “I”. I also used a thick/thin line to separate the text and picture, and the same line for a stroke around the picture.

Overall I think my design looks rather classy, but I think the lines under the picture should have the same gap as between the banner and the top of the picture. I also felt that the ideas generation went really well, as I scribbled down some thumbnails, drew a neat version of the one I had chosen with feedback from my team, then noted down the changes I made when I went digital. What do you think of my design?

The second task was to create a paint tube label. As my method in the morning for ideas generation had worked so well, I decided to repeat it in the afternoon. However, the stoppers were soon put on my chosen design when Steve advised me that some element could cause problems during the print process. I had to do a lot of redesign, but didn’t really know how. I made a note of the changes, but was this the right thing to do? Should I have started the ideas process over again? I’m not entirely sure, but either way I got a design which I was really happy with. This can be seen below.

I used the Isabelle Std font for the oriental style typeface, which I think suggests the correct themes, yet remains readable. I decided to centre my front label font, as this would allow the viewer to see at least some of the type if the tube was rotated on the rack, or in a display box. Again, I used the Myriad Pro font on the back panel for the address, and on the front for the fluid ounce part. I was very happy with this design, and making the leading smaller helped the name of the paint to breathe, allowing more room if a larger name was going to be put onto it. Even Steve said it was “nearly there” when I showed him, which is praise indeed.

Thursday was also the day when my magazine article (for Auto Sim Sport) was finally released, after a couple of weeks delay. The magazine also contains an interview with me about the article (college gets a none-specific mention! [worth the download]). I was also asked to design the cover of the magazine, and a page for a guide. For the front cover, I was given an image from a game which is about 7 years old (DirectX 7 technology, for the gamers out there) and a picture of a Mclaren F1 supercar. There was not really a lot of scope for design here, but I managed to throw something together. Originals and finals can be seen below. The second picture I had to make was from a selection of screenshots, and the brief was simply to create a cover with “atmosphere”. With some careful selection processes and filters, I came up with something which the editor was more than happy with.

It’s hard for me to comprehend that something I have made will be seen by thousands of people from around the world, but I guess that is the power of the internet. Hopefully in the future I can do more work for the magazine, and hopefully try to steer them into a more professionally designed look to their format.

This week also saw the acquisition of a new monitor, as my faithful 21 inch CRT was simply taking up too much room on my desk, stopping me from spreading all my sketchpads out in a creative sprawl. I decided to go for the 24 Inch Dell2407, which can only be described as phenomenal. With compressed images which I created on my old monitor and though “yeah, that’s good, there’s no damage on that” now look dreadful, as the clarity of the display shows up jaggies and blockies.

As I have to run the desktop in a native resolution (as an LCD does not scale as well as a CRT) I am quickly learning that liquid web pages are a really bad idea. I resemble a dog watching traffic when trying to read a page which is being stretched to accommodate a 1920px screen width. I would definitely recommend the monitor to anyone who wants a stiff neck, to become poor quickly or who wants a display without compromise. Pic below.

6 comments:

Craig Burgess said...

A good liquid design using CSS should look fine on your monitor. That's what they're meant to be able to do after all.

Julian Dyer said...

Do you have any examples of good liquid designs you could link me to Craig? I’ve seen a lot of bad ones where is stretches the entire width of the browser. It will be interesting to see what well designed ones look like in comparison. It would be much appreciated if you could point me in the right direction!

Craig Burgess said...

Just found this one.

http://www.westnell.org.uk/

It isn't pretty, but it's a good example of liquid design.

Julian Dyer said...

Thanks for the link Craig. This site also seems to stretch the full width of the monitor. The character length of the line must be in the hundreds of characters. Is there any way to limit the maximum width of a page in a liquid design using CSS?

I think there is probably little consideration for high resolutions and widescreen monitors, simply because there are more people with 4:3 setups at lower resolutions. Does anyone else have a widescreen monitor? What do you think of this issue? (I’m thinking of Steve in particular :-) )

Craig Burgess said...

Yeah, the length of a column using CSS is easily set. I've just picked up a widescreen monitor too, but mines only a 19".

The ones I saw in the Apple shop were massive, and websites did look tiny on that.

I think because people who use massive resolutions are few and far between a lot of designers don't consider it.

James said...

I use a widescreen laptop and I just window my browser so it looks normal. This then leaves space to have other windows open as well.