John Kings Website

Purpose

Primarily to advertise himself as an artist and give information about his art. This information would also include workshops being held, gallery information, and any other events.

Potential expansion:

Selling artwork

Booking workshops through website

News

Audience

General types of people whom this website might be aimed at, taking into consideration:

Audience Characteristics
Information Preferences
Computer Specifications
Web Experience

Gallery's interested in artwork

Information wanted:

Looking to find out about the artist
Looking for examples of work
Looking for previous exhibitions
Interested in the workshops
Contact info
Possibly the latest news

People interested in the workshops

Information wanted:

Looking to find out about the artist
Looking for workshop information, dates and times
Contact info
Examples of work

People interested in buying work

Information wanted:

Looking to find out about the artist
Examples of work
Where to buy from
Contact info

Fellow artists

Information wanted:

Latest news
Examples of work
Newest pieces

All audiences are presumed to have at least a 17" screen with computer up to 4 years old. Could be running Internet Explorer 6, although might have bought new machines more recently and so have at least Internet Explorer 7. Not particularly computer 'savvy' so won't be running other browsers (FireFox or Opera). Might also have Apple Macs running Safari.

Content

Content would be primarily aimed at these audiences, so the content they would like is as follows:

Background information about Johns work
Possible work history (previous exhibitions)
Contact information (email and possible phone?)
Workshop general information.
Possibly specific dates and times when they become available
Examples of work, which could be expanded to encompass all work. Possibly categorised

Information Architecture

Site map:

Home

About me

Contact

Events/News (workshops)

Work (categorised)

Workshops could have its own page, but it does come under the "events" type banner.

Thoughts on the general architecture of the site:

First page:

Should have a nice introduction to the website, maybe an explanation of why there is a website, and perhaps a little about the artist; and show lots of examples of work.

Work Page

After trying to design the layout for artwork on this page, I have concluded it would mean more to the audience and John if information about the pieces was available. So this would contain images of work and synopsis' of work as well.

Design ideas

Websites of inspiration:

LIKE

http://www.darkishgray.com/ - STYLISH

http://www.nightstations.co.uk/index.htm - CLEVER

http://www.royridsdale.com/index.html - LIKE THE SCROLLING

http://www.keithbarley.co.uk/index.htm - SIMPLE TO ACCESS

http://www.lucylauener.co.uk/index.htm - SIMPLE TO ACCESS

http://www.carlpaulfinearts.com/ - IT OKAY JUST

http://www.voodoochilli.net/ - NOT SURE WHAT THIS IS

http://www.artistportfolio.net - BIT IMPERSONAL?

http://www.sakki-sakki.com - OKAY

http://www.thibaud.be/ - CLEVER, LIKE IT

http://www.joshuaellingson.com - BIT BUSY ON FIRST SIGHT

http://www.shelleyhocknell.com - EASY TO USE

http://www.lifedrawing.com.au - TIDY BUT DULL

Things to avoid:

DISLIKE - A BIT TWEE FOR ME

http://www.dianekettle.com/kettles-yard.html

http://www.life-model.co.uk/index.html

Notes

John creates a broad range of art and so would prefer it kept simple, in order that no one art takes precedence or might look odd or out of place.

He prefers clean lines, simple text and an uncluttered look.

The top three of his list are his favourite.

For navigation a horizontal list is preferred as it is quite common and takes up less room.

A neutral colour scheme so that his artwork does not conflict

Name might be called "www.the-art-works.co.uk"

Good webdesign inspiration:
http://www.monkeydevil.co.uk/website/portfolio
http://www.csszengarden.com/

keywords

Art studio
    Tools
        Paint
        Brushes
        Palette
        Scalpel
        Chisel
        Projector
        Table
        Easel
        Donkey Easel
        Palette Knife
        Cloth
        Water
        Hands
        Knife
        Graphite
        Charcoal
        Fingers
        Oil Pastels
        Chalk
        Rubber
        Anything
        Ink
        Saw
        Art book
    media
        Canvas
        Clay
        Wood
    Light
    Work Space
Art works
Gallery
    Space
    Neutral
    Light
    Quite
    Clean


Thinking about the art studio. Like the thought of using the tools which made the art in some way. Maybe have them in the background, some focal blur, and the main page in the middle, close to the user, giving a sense of depth.

John wants the website to focus on the art works, so why not have the whole website consist of art. You can have access to the art where-ever you are in the website. But a stumbling block was always - how to lay this out. I tend to a more interactive layout, what would be better then fully interactive, moving each picture as if it were a canvas. In the middle of the page would be the text and "The Art Works" logo would be at the top (possibility for moving). But I don't want this to be a novelty, it is only there so you can view all the art works where-ever you are.

I would like a way to filter through these and create some sort of order though, may be difficult as a there would be some programming involved. Not sure how friendly it would be to screenreaders though (although would hard of seeing people want to visit the sight?). And the w3c validation?

Done some research and found these little websites:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm#flexlyr

http://dunnbypaul.net/js_mouse/

I was quite pleased with the results of this. For the third example I though of a combination of these two designs. More formal and organised, but with constant access to all the art work. Working with grid based design. The content for each page would be in a designated area in the middle. This area is also used for looking in more detail at the work.

Examples

Standard

A scrollable website, with navigation at the top. You will find example work on the "Work" page, where you can scroll up and down and filter the work using the filters on the left. Each image has a description next to it. Clicking on an image will show a larger preview.

Free form

This website was designed around the thought of always being able to see/access the example work. Each image can be moved around using the mouse, and re-ordered. Clicking on any image will bring up a larger version of it, with description. You can also filter these images down to view images with certain attributes. Clicking on a link at the top (navigation) will display different information in the middle, keeping the arranged images in view.

After much looking over it I decided to move things about a little. My main worry was the title was too far to the left and looked a little sad. I also didn't like how the tabs on the upper right were a little out of the way and looked slightly odd with that thin white section connecting them. So I've centred the title and moved the content and tabs lower and in to the middle.

Grid Design

Based around a neater version of the Free form design. Images can be seen at all times. Navigation and content is placed in the middle of the images, in a nice little box. Images are filterable (top right) and clicking on one will load it up in the content box (where the text usually is) with a nice little bit of information about it.

I've been thinking about making the image sizes changable, therefore being able to see more or less of them on screen at any one time. This could be implemented in all of these designs.

After much consideration and he chose the free form design. I mentioned if he wanted it adapting at all but he seemed pretty certain he wanted it kept like that, although as part of the implementation I shall design it so it can be changed easily.

Technical design and Implementation

Well, no specific time frame so I shall dedicated about 5 hours a week, which should work out at 2.5 hours a night for 2 nights. The hardest part will be in the technical aspects of interactivity.

Possible technologies to use in the website:

HTML - goes without saying,

Flash - might give this a miss as it's not "iPhone" friendly!

Java - A good alternative to flash, even found some that will do moving boxes/pictures!

HTML 5 - a little ahead of itself so I probably won't

CSS - definitely for styling

XML - a lot to learn but very good for information architecture. I could store image name, information which it can load up from a xml file. Needs investigating.

So HTML to hold the page format and everything else. Using java to control interactive pictures. CSS for styling and XML for information handling. Easy peasey!

A quick note; maybe the links could go round in an arced corner? Maybe give it a go. Might look interesting.

Anyway, this is the basic structure of the html page with DIV tags. So first we have one for everything. In this will be first the title; next the navigation, then the Content.

In Content will be the text and the filter. The images will be mixed in with this, with the images contending with the space of the text and filter.

So hierarchically speaking:

container - height and width 100%

Title - Width = 100%, Height = ?

Content - height = expandable, with = container

filter - height = expandable with filters, width = ?

NestedContent - height and width = ?

Nav - Width, height = nested content

gumph - Width, height = nested content

pictures - I guess they should be in the content layer somehow moving about?

Note - How do they maintain a randomness if the pictures are ordered by the web browser? Surely they will need to be laid out by hand with absolute (or nearly absolute) position.

Note - Don't forget that these images are going to be interactive and movable, Controlled by JAVA (i think)

Page fitting

How will the page fit to different window sizes. This is a good question. I have reduced the size to 1024 X 768. Perhaps I should make it a little smaller as someone with that resolution would need space for the bar at the top and start menu at bottom. Now keeping it to width of 950px.

So, basically, when someone expands the screen I think the page should be pretty static and stay in the middle. It can expand downwards with content. If it widened with the browser then I'm not sure how to move the images about. I don't think their position will be able to change with more space available. If it can though it would look good.

Page Loading

There are several different ways loading pages could work:

clicking a link on the nav panel would load up another html file (page). A couple of problems. The filtering might be reset and the position of pictures. Also might mean a slight delay in loading the new page.
clicking a link on the nav panel could hide the current nested content and display another nested content. Not sure if this would be good for screen readers or HTML validation?
Clicking a link on the nav panel could look up a XML document and display some information in it. A down side is that at present I know nothing of how XML works, or what its' capabilities are and its weaknesses.

It appears the best solution is for the link to hide and reveal layers of information. Easy to do and does not not upset page setup with filters and position and doesn't take any time to load. Sorted.

Drag and Drop Images

Well, this must be the most difficult bit. To see how it'll work and then make it work. General plan is to research different techniques and evaluate which is best for this purpose.

Research

Drag and Drop

Drag and Drop lists - http://tool-man.org/examples/sorting.html

This looks like the proper way to drag and drop items in a list. Also the pictures could be in a list, although note sure how to position. Anyway, it looks good but probably wouldn't work because it's not in a list. But it does have solid code which might be worth looking at.

http://tool-man.org/examples/dragging.html It has constraints and can drag these anywhere. Definitely worth looking at.

drag and drop things - http://www.javascriptkit.com/howto/drag.shtml

Looks good, not quite as nice a website though. Javascript which is easy to install and you just give an element a class name and it becomes movable. Doesn't have constraints like the above

Drag and drop other - http://elouai.com/javascript-drag-and-drop.php

Nice short and sweet script easy to download. Works like the previous

Note - A problem we might come across is the z order of things. I would like the last thing that was clicked on to be the front most image.

Re-order page with drag and drop java - http://www.dhtmlgoodies.com/scripts/arrange-nodes-2/arrange-nodes-2.html

Very, very complex script which can work server or client side. It's nice because they've seen the need to re-organise web pages.

Also http://www.dhtmlgoodies.com/scripts/floating_gallery/floating_gallery.html for dragging images in a list to re-order them

Fancy Image loading

Well, I remember James saying that there was a facility somewhere to make it so when you click on an image it'll load up full page and shade the background out. Heres some research.

http://visuallightbox.com/index.html#example

Looks good and does a lot of stuff, but might need to buy it for John Kings website. Looks like it links in with Flickr which might be good for john to upload to.

http://www.dhtmlgoodies.com/index.html?whichScript=picture-zoom

looks good for use with johns website. Nice and easy, a little less stylish though.

http://www.huddletogether.com/projects/lightbox2/#how

Looks just as good as the previous, but is totally free.

Think I'll be using lightbox2 over picture-zoom
§

Shadows

So, I've just thought about shadows. How will we accomplish this shadow effect with CSS2? Well it'll have to be some old fashioned (not that old though) bodging.

So we could use transpared PNG's. Not compatible with IE6 but really nobody should be using this anymore. Other then this I see no problem. So the main shadows are on the nested content with the tabs. If I save an image of what the nested content looks like this could be the background. The tabs could have two looks, infront and behind. Might be able to use the same picture for all tabs.

No real transparency needed if I'm to keep the background the same colour.

Implementation

So, here we go.

First the basics of HTML, header, title and all that. Then the body. Put everything in nested DIV's. Next work out which scripts to put in. First is to test Lightbox2. Not sure which of the drag and drop scripts to use, think I'll try the second one first.

Doh! most important is to work out how many pixels some of the things are!! Need to know:

Content width - doesn't matter, just centre the content
nested content width - 236px
filter width - 214px

Tabs!!!

Well, it's the first time I've actually added pixel styling to elements not in tables. It's very interesting. So, I originally though I'd put a background borders on and see how it goes but it's a little more complicated. So I finally had a look on the internet and found this gem:

http://24ways.org/2005/centered-tabs-with-css

It's all relevent and tells you how to define the height (width not important) and finally how to put a background on the tabs. Here it shows good use of <span> which I've never used before.

So because the <li> are inline, you have to make adjustments to the <a href> elements. The span is used so you can put a background left and a background right on the link, which is a little complex to think about at 22:00 on Saturday night. Doh! I'm giving up at the moment.

so, after many hours, here it is:

This is the HTML for the tabbed list

As you can see there is a lot more here, but most of it if for the change of properties for viewing what is in each tab. The main points to note are teh class="nav" and the .

Here is the CSS that goes with it:

.nav ul li, .nav ul {

display: inline;

list-style-type: none;

margin: 0px;

padding: 0px

}

.nav ul li a {

background: url("Assets/Tab-right.png") no-repeat 100% 0;

text-decoration: none;

padding-top: 20px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 0px;

margin: 0px;

}

.nav ul li a span {

background: url("Assets/Tab-left.png") no-repeat;

padding-top: 20px;

padding-right: 2em;

padding-bottom: 5px;

padding-left: 2em;

}

I found the the "background" for ".nav ul li a" had to be that format for some reason? Oh, and here are the files:

Tab left ->

Tab right ->

I also tried to do the same for the body of the text but it was too hard, so I just made it the background.

Tab Navigation

To navigate through the tabs I used "Behaviours" in Dreamweaver to change the properties of the said element when clicked. So, when the Home link was pressed, all other elements were set to "display=none" while home was set to "display=block". It took me a while because throughtout my trials I had another script always showing home!! Doh!

Fancy image browsing

This was pretty easy. I found "thickbox" and "lightbox" the best and free. You download their scripts in folders, and follow the instructions. Pretty simple. I put the lightbox scripts in js for reference. I'm using thickbox for now, but I might change that.

Had a small problem for thickbox, but found a solution. Apparently just change thickbox.js line 79:

TB_TempArray = $("a[@rel="+imageGroup+"]").get();


TB_TempArray = $("a[rel="+imageGroup+"]").get();

Drag and Drop

This caused no end of headaches, and has taken the longest to work out (or give up on). So, with tool-man I tried and tried but in the end could only ever get it to move the first picture. Could not for the life of me work out how to add more (although I'm not sure if the script allowed it). It looks like you can move one thing for each class.

So next I tried "dragtest1", which I worked out only worked if you didn't put the DocType thing at the top, which basically means it breaks convention which I definitely didn't want.

Finally I tried Dragtest6 http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx, which works but conflicts with thickbox! doh! But I shall try some other time when I am less fed up.

Filters

So now on to filters, which might just be the hardest!!! Oh, and I don't even think I've done any research into it either! So heres some research:

Wow, just found this: http://www.askthecssguy.com/2009/03/checkbox_filters_with_jquery_1.html Exactly what I wanted. Trying it as we speak. Someone has tried it in their website > http://www.gjunkie.com/labs/

I'm having a little trouble displaying the images inline after the tickbox has been unchecked and checked again. The gjunkie website looks like they've solved it. Must look into this.

Also, the filters is generated and placed within the pictures div, which is what I didn't want. Must look at the later example and find out how he did it.

Copied gjunkie script which works much better, with a better fade and better for inline lists.

Just re-arranging it now, which is one of the hardest things.

So, after quite some rejigging I found that by putting the "Gumph" inside the "filterThis", but not in the

element and telling it to float right, that the list does carry on around this. The "filters" are told to float right. Done.

So far:

Things to do

~~Change colour of non-highlighted tabs to a lighter gray~~
~~Make tabs bigger~~
~~delete unwanted tabs~~
~~add email address~~
~~make the links list 'normal'~~
~~make background image~~
~~make footer image~~
~~put on as background~~
~~play about with "visual arts" and put next to "Wall Space"~~
~~add all filters~~
~~add all captions~~
export thumbnails slightly bigger 100px
make thumbnails slightly bigger
make slider to control thumbnail size
~~make actual footer on webpage~~
~~put heading on the filters~~
~~remove unwanted filters (and duplicates)~~
~~re-order images~~

So it's been a while and i'm slightly regretting using the filters script from that guy as now I want to customise it some more and I haven't got a clue where to start.

After some browsing I found this great little forum describing how to use checkboxes to show and hide things! Brilliant. Might just do it myself from scratch!

Stephens Blog

Monday 24 January 2011