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
- Looking to find out about the artist
- Examples of work
- Where to buy from
- Contact info
Fellow artists
- 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
Things to avoid:
DISLIKE - A BIT TWEE FOR ME
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
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.
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
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.
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.
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.
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:
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 grayMake tabs biggerdelete unwanted tabsadd email addressmake the links list 'normal'make background imagemake footer imageput on as backgroundplay about with "visual arts" and put next to "Wall Space"add all filtersadd all captions- export thumbnails slightly bigger 100px
- make thumbnails slightly bigger
- make slider to control thumbnail size
make actual footer on webpageput heading on the filtersremove 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!
