using a blogspot template for a fast design job

I was asked to put together a fast and furious promotional design package for this upcoming event at our university. And what better way to do it than right here? Ultra-fast, ultra-clean and ultra-easy design solution!

What this approach has given me is an instant visual identity, complete with color scheme, typographic scheme, visual side elements (the thin strokes), and of course grid, layout and structure. Such a visual identity normally takes quite some time to put together, but it has turned out to be a cinch here. And once you have this in place, it is very easy to adapt it to other media as well, which is what I may need to do eventually.

I took the Ethereal template, which I have been wanting to play around with anyway, because of those really nice thin lines which you can have running at both sides of your content once you make the main background transparent and keep the border as a color. Added a dark gradient background, changed fonts and colors a bit  - and not even all that much, to be honest. Only problem with this template is that you cannot modify the size of the blog description, unless you go into the code. However, that can very easily be fixed by importing the header text as a png file from photoshop. And here we are:

http://isea2011leaf.blogspot.gen.tr/

The organizers may also want a poster at some point. No problem! This is a perfectly aligned, well structured, ready to go layout in which all the visual hierarchies are correctly placed. (Not bragging or anything, nothing that I spent a lot of time figuring out, just works that way - the indigenous web format sees to all of that most efficiently ;-). So, as I already said before, this will adapt itself to other media quite easily. And, since almost everything here is text based there will be no major resizing issues either. All I will need to do therefore, is to print this page as a pdf, at an A2 size (or even larger), open it up in Illustrator, where all of the text will still be editable by the way. Delete whatever isn't working (which will be all the bitmap based stuff), clear the background and the header (again, both are bitmap and won't resize without some very serious loss of quality), and then copy paste the whole shebang into photoshop, which I vastly prefer to Illustrator as a design medium. Add the images, the background, the header and - you have a poster!

Or even change the format (portrait to landscape, different aspect ratios, etc), move the elements around, and you have a flier, an invitation, a brochure - whatever it is that you need really...

.................................................................................................................................

design tutorial: aligning a header

Alignment (and also deliberate non-alignment) is one of the foremost principles of good graphic design since alignment is how one of the fundamental Gestalt principles, continuity works. In the previous post we were looking at visual continuity and alignment is very much a part of that as well.

HTML web design is done in two places: One of them is an image editor and the other one is an HTML editor. And we need to be able to switch back and forth between them and also be able to carry values from one to the other. Meaning that we often need to make things work together although they are located in different places while we are still working on them. So, we need to be able to visualize how things will look, even at a point where we cannot yet see them together as a whole system.

In terms of alignment the good news is that on an HTML website most things are aligned by default since the underlying structure is based upon a table, very much like an excel sheet, in fact. (Only exceptions are the elements that are made out of images which you import into the cells - such as the header!).

When you design a website you will usually start out in an image editor and then adjust the alignment of the table cells in the HTML editor according to what you initially did in the image editor. However, you can also work in reverse and start out with the HTML editor and go back to the image editor from there. And the really good news is that the template editor at blogspot makes it exceptionally easy to do so.

So, go to the template editor and temporarily put a black (or white - depending upon your template colors) image on the background. All black or white - a tiny square which you tile. Then go to the blog title gadget in Design and delete everything. We want the top, the header area to be completely blank, in other words. Now take a snapshot of the site and then open it in the image editor.

Place guides at the edges of the gadget lines (or whatever it is that you have on your site that needs to be taken into account for alignment purposes), the post lines, the text columns. Anything that you see that you think will be important when aligning things. Now start putting in the design elements of your header, always keeping an eye on the guides.

Below I am showing you a few examples, both good and bad. In all of them you will see the text both with the guides and without them to help make things even clearer:

The first one is made up of two long sentences for title and sub title, where the top one is aligned to the text of the left hand gadget column and the lines of the right hand column. And then additionally the blue letter 'P' is also aligned to the post column. The sub title aligns to the lines of the right hand gadget column but also to the text of the post column. I have used the text column for the left hand side since this is a much stronger element than the thin lines. On the right however it is better to align to the lines since the text column there is ragged on the right hand side and doesn't give you much to go by.

In the second one I am keeping the title as it is but I am now making a little paragraph out of the sub title which I am aligning to the post column as well.

In the third one I am taking the sub title and aligning it to the vertical stroke of the 'D' of the word design. So, in this case I am no longer looking at the template but at the relationships within the header itself. Except - I still have an eye on the template guides since I would not want for the sub title to get placed without a good relationship to the guides either. In this case this would be all about getting not too close to them! The trick with alignment is that it is perfectly OK to be unaligned provided that you are really and truly unaligned! The death sentence comes when you are close but not exact. When your placement is "ambiguous" in other words. As the following example will show you:

Here the trouble is that the placement of the sub title is completely arbitrary, of course.

However sometimes things can go wrong even with the best of intentions. In this one I did not place the sub title arbitrarily, I actually aligned it to the stem of the letter 'Y' in the word 'Easy'. Problem is that I was not paying attention to the guides of the template and so I ended up being way too close to the post guides, which is the much stronger element.

 (Tip:  Always align things to the strongest element between two that are closely situated, never the weaker one!  ) 

In the final example I am showing you the sub title placed in such a way that it is no longer close to any of the guides or the vertical strokes of the letters. And this works too since I am making an unambiguous statement here. It is when you get caught in the middle that things will go to hell... :-)

And finally - once you are done, crop your image to the exact size, which will be your outer guides and upload as header image.

Even with all of this hard work, you may still end up not getting it completely right. In that case help is also at hand within blogspot: Copy paste the following code into the CSS box inside the Advanced tab of the Template Editor and play with the value highlighted in black:

#header img {
margin-left: 0px;
}

 (Also remember:  If you want floating elements and not a box, close the eye of the background and all unwanted layers before you save as a 24 bit png.  ) 

.................................................................................................................................

design: creating visual continuity

Time for a design tutorial now! ;-)

We shall be doing this by examining the structure and visual continuity of a professionally designed website template called 'boomerang 3D' from http://www.dreamtemplate.com/

HTML websites have a big advantage in terms of visual continuity since the structure of a site (header / menu / content) inherently provide for this. (Read more on website structure here).

When we design something we are actually creating a system. Not something that is good looking in its separate components but something that works together as a whole. So, when we are putting together visual elements we should not be making random decisions but always be thinking about whether the elements that we are deciding upon will work with everything else that we put next to them. There may be nice things that we see or think of, but if they do not serve the structure of the whole page we simply bookmark them for possible usage later, in some new project, but leave them alone for now since they will not work with the whole system.

In graphic design this system is made up of type, images, shapes and colors. And the usage all of these 4 components should be consistent. As an example, if you are using rounded rectangle shapes in the header of your page there should be rounded rectangles elsewhere as well - maybe buttons, or post backgrounds. Your typography should consist of a small selection of fonts that work well together and your type should always align in the same way. Your images should reflect a common color scheme (like they could all be black & white, or all color, or all colorized) and also how you crop an image may be quite important: If you sometimes crop images like squares and at other times like vertical rectangles and then sometimes as horizontal rectangles, it may well end up becoming visually inconsistent.

Now let us look at 'boomerang 3D' a bit more closely:

The obvious place to start out with any graphic design work is typography: In terms of graphical hierarchy type is always the number 1 element since it actually conveys the "spoken" information, which is of course the most important thing. Here the visual continuity in which type has been used is obvious - one font only, everything aligned flush left. Always a title above the images, with a sub-title to follow and then the body text below the image. And even when there is no image (such as on the 'contact us' page at the bottom), the same principle has been applied: Again title, closely followed by a subtitle, then an empty space - and then the actual body text. 

However although type is very important, one of the first things that strikes me when I look at this template is the way in which how all of the images have been cropped to form long narrow horizontal rectangles. This usage is possibly the most important continuous visual element and it adds hugely to the effectiveness of this site.

But here is the really clever thing which was done here: These narrow images are actually a sub-system, or a mini version of the larger system into which they are embedded. If you look carefully you will see that the whole layout consists of long, narrow, horizontal rectangles, starting from the green band in the header at the top, down to the long and narrow menu at the bottom. Even the form on the "contact us" page has long narrow entry fields instead of the usual chunky ones. And then there are long bands of darker gray that break up the layout horizontally as well. And almost nowhere do we see a strong vertical break - except in one place, the "about us" page where the left column is set wide enough and there is also sufficient space between the two columns for this to become quite unobtrusive.

One seeming inconsistency might be the fact that the green blur is much broader on the homepage than on the rest of the site. This has been done so that the homepage differentiates itself from the rest, of course. However, in the end there is no real inconsistency anyway since the relationship that is lost in the height of the shape is more than made up through a color which is powerful enough to pull this off.

And speaking of color - fairly self evident: They use one strong color together with lots of grays and always full color images.

Very clever! Very effective! Very elegant!

.................................................................................................................................

structure: having the best of both worlds?

Ahumm... All these pull-down menus and so forth... Very nice and everything, but let's face it, what use can they possibly be on a blogspot site unless you can have an infinite number of pages and nested sub-pages?

A regular website and a blog both have their shortcomings but also their advantages. Could there be a way to combine the advantages and minimize the shortcomings?

The two diagrams above show the way in which a blogspot site is set up (above), and the way a regular website is set up (below). On a blog the home page is a stream of posts going backwards in time (so the home page is in fact the main content); whereas on a regular website a home page is just a plain old home page from where you are expected to go to other pages, (in some cases, more or less immediately), to reach the actual content of the site.

Blogspot allows only for a limited number of pages and the navigation is mainly achieved through the labels, which I think are brilliant. The labels do not search inside the pages, only the posts. So, depending on how careful you are with labeling stuff, they work a bit like the categories in wordpress. Or, if you go totally overboard (I think you can have a maximum of 2000) they would correspond to a kind of a tagging system. But, one way or another, although the labels are very cool - they do not make up for the loss of the pages, and especially not the loss of nested pages, which are another thing that you cannot have on blogspot.

So, would there be a way to bring together the labeling system, the post stream on the home page of a blog and the unlimited number of sub-pages and nested pages on a regular website? I think there is, yes. You would simply need to set up a child blogspot domain which would have the same design as the mother domain and use the posts of the child domain as pages, as I am showing in the diagram above.

This allows you to keep the labels on your mother blog and you have an infinite number of pages and sub-pages (depending upon how you link things up) on the child blog.

 (Tip:  To transfer the design of one site to the other, download the full template from the mother site and re-upload it to the child site. Or, click inside the HTML editor (expand widget templates by checking the box first), do a ctrl+A to select the whole code. Then copy paste the stuff into the same location on the new site. Everything will appear as if by magic. Only exception is the header image - that will need to be uploaded again, I'm afraid.  ) 

What's more is that you could also diversify layout widths between the two sites in such a way that your "pages" could consist of a much wider entry column, since you would not have the labels on the child site. (Pages do not get labels to begin with, remember? ;-). So, you could go with only a 2 column layout or maybe even a single column one. 

I have actually already started putting this to the test with a child blog for this site to which I have already linked one post which I started here and then completed over there. The second easypeasydesign site has a single column layout since I want to show really big images sometimes inside the post. Which was in fact my main reason for starting the child site. However, the more I think about it, the better the possibilities seem to be with linked domains all working as one site.

It is of course highly likely that all of what I am talking about can also be achieved all on one site through coding. However, for folk like me, who would not be able to pull this off all too easily, my suggestion may still be a good one to work with.

Oh and - there is a glitch, which even a non-coder like myself would try to fix, which is that you wouldn't want the footer on the child site, where it says "older posts" and "home", since you would expect the "posts" to work like stand alone "pages". However, that I am fairly sure is something that can be fixed on the HTML editor by simply deleting that gadget altogether.

 Note:   The diagrams above were made with the open sourced yed graph editor, which you can download from here:
http://www.yworks.com/en/products_yed_about.html 

.................................................................................................................................

design: hierarchy / text / lightness values

Since a website usually has very little white space (space which is empty of informational content, that is) the hierarchical components of a site will often end up being placed very close to one another. 

The two images above should hopefully explain it: If you make all of your text one color (white in this case), it will be quite difficult for people to know where to look first when they come to your site. If however, you use various tones of gray then it will become far more obvious where the most important stuff is, and then what comes after that. As a rule, things on the side bars are less important than your post, these should be darker than the post. Inside those, visited links are less important than unvisited ones, and the rollover link should pop out the most.

Inside the post itself it is a good idea to highlight or make bold the stuff which you would like to stand out. (I prefer highlight since I do not like the way bold text looks on websites at small sizes - becomes smudgy).

Size is also an element that can be used for establishing visual hierarchies, however since most of the text will have to be on the small side you can only really use that for post titles and the header: When it comes to body text, a change from 13 pixels to 14 or 15 is not going to give you enough difference and will only make your design look 'ambiguous' - a term which designers fear like death! So, tonal values for type hierarchies are one of the best ways to go in web design, I think.

.................................................................................................................................

starting to think about page structure

The diagram above shows you the three distinctive design areas, which are determined by the content of a website.

First off, the image is exactly 1024 x 768, however as you can see quite a bit of this area is taken up by the browser, so you are actually left with considerably less space to work with. What you do have left needs to be thought of as three distinctive areas: 

The header is where the site's information (such as the title, subtitle and so on) go. Also some buttons, such as 'contact' or 'FAQ' or 'Home' may go here as well. Essentially this is the area that will be initially visible when someone comes to your site and so this is the place where they are most likely to see things. Next, comes the area through which someone would access the (initially hidden) content, such as pages, things grouped together as labels (categories in wordpress), also links to other sites, and so on. So, in a word, this second area is the menu. It is highly desirable that this part (along with the header, of course) stays consistently visible throughout your site. And then third, is the part of your site that changes and is updated very often - the main window, or the content.

You should be aware that these areas do not need to be placed in the way that I have put them here but can be located quite differently as well. So, as an example, a menu could be on the right side only, or it could be on both sides (as it is here on this site), or it could even be on the bottom or the top like a narrow band running underneath the header. Again, the header could be on the side or even the bottom - in which case you would of course need a special frame so that it would always slide upwards and stay visible inside the screen. What is important is that you need to be aware of these three parts and that all of them are accounted for in your design.

................................................................................................................................