Lets get this show on the road

Here is a draft design of the website....

Home: 

I have kept the basic design of the website, by the front page just being a blank canvas. The 5 tattoo'd navigation buttons on the left hand side of the website, will easily guide the user through out the website. The Footer is still has pink coloured writing, because I want  a visible display for where the music will be automatically played as soon as the web page is accessed. Even though there is not an icon on the navigation bar for "home", It is a blank page, therefore there is nothing on there (apart from the song being played in the footer).

 Info:  

For the information page, I thought I would try to keep it to the style of the home page, minimalist. The contents box has been faded so the main background image is still visible. The Text within it is Arial in the brightest white that is available. 

Photos:

The photograph page was an idea I used for my previous photography work last year, and that was to display some images in a film reel. I personally think it works. I attempted to try and smudge the edges slightly, to try and get a warn down effect of the film. Similar to the navigation links directed to the left of the screen, each picture will have a link attached to it, so if the user wants to view a picture all they have to do is click....

Here's just a brief example of an image being clicked. I would like the full image to be displayed in full. But the  photographer would prefer it if the images were to remain on the web page, and be faded. So by following requests I did it. The grey box with a green and blue arrows in it (yes, the green and blue are the colours of the flag), are representing a slide show tool. One I could basically make.... or I could find something online to help. I think a slide show tool would be beneficial because it would save the user so much time than to be constantly, viewing an image, pressing back, and highlight and new one. When they can simply just click, next or back.....

Seren: 

Seren is a name of a model who poses for Front Magazine (which is the bands favourite mag), and she is their favourite model, so they based a song about her. I included a navigation button for this, because if the audience didn't know who she was or what the song is about, then they could just click to find out. I was going to include a mini ddescription of why it is there, and why it is important. But keeping to the idea of the minimalism, I didn't want to cram a lot of stuff onto one page, and clutter one page while the rest as minimal. Seren is also faded as well as everything else, because I wanted to keep everything similar. 

Facebook: 

As I had previously made two different designs, for this assignment, I had a positive feeling about  the  vector created images. As previously demonstarted on the other example of a draft website, I have used these images and aranged them into a similar style as the Lincolnshire Flag, and on the images,  there will be a link allowing the user to access a band members facebook profile.

 Tour Dates:
This was created in a similar style to the Info content box, as keeping to a certain theme with images and text. As it is clear via the example this box is simple, and can be easily amended, so the band can remove, add and change tour dates and locations. There will be links attached to the locations in the tour dates box. The link will guide the user to google maps. This will help the user identify where the venue of the show is.

Then all the user has to do is either press back on the internet explorer or click on the 'tour dates' navigation button. 

Here is the link to the example I just used, Google maps, finding the Tap and Spile Pub, in Lincoln.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=tap+and+spile+lincoln&amp;sll=52.630806,-1.119113&amp;sspn=0.168787,0.308647&amp;ie=UTF8&amp;hq=tap+and+spile&amp;hnear=Lincoln,+United+Kingdom&amp;ll=53.231194,-0.540887&amp;spn=0.008072,0.006295&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=tap+and+spile+lincoln&amp;sll=52.630806,-1.119113&amp;sspn=0.168787,0.308647&amp;ie=UTF8&amp;hq=tap+and+spile&amp;hnear=Lincoln,+United+Kingdom&amp;ll=53.231194,-0.540887&amp;spn=0.008072,0.006295" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Overall I think the website looks professional, the minimalism of the website is its greatest advantage. If there was more time I think that I would attempt to make the film reels for the photo page more professional. I don't think the smudge effect worked that well. 

ohhhh yeahhh 2

Here is another idea using the previous idea....

Instead of having the 4 images in the middle, I thought of having them at the top, still arranged in the colour order. 

I decided to add the twitter bar (thanks to Scott) , and added a Link box (far left) and a content box in the middle. 

Here is a brief example of adding to the link bar with a font previously displayed in the blog, I think instead of the actual words being the links to the other pages, I think the tattoo images used on the other design would be better.

ohhhh yeahhh

Whilst creating the other idea (about using the Beatles album cover), I thought I'd try using the previous vector graphics and change the colour of them (yes, that's right, you've guessed it, Blue and Green). After alternating the colour, place them in position...

So from this.....

After using the 'cut-out' filter on photoshop, and added colour, this happens, 

Which I really like. The colours are in a  similar pattern to the Lincolnshire flag which is what was desired.

The images need to be properly framed, and a header+content boxes need to be added. 

Here's an example of what it could look like,

Even thought it is crudely evaluated on microsoft paint, I think it sums it up.

Logos and The First Website Design

I have been working on the logo's and images that I want to use for the websites, 

Here is the header/title of the page. I really like it. It fits the tattoo idea, and with his being a faded tan colour, it should work well with the the back ground image. 

I kept the image 3x4 squares in the top right of the picture. So it would fit great. I prefer this image title to the header. Which leads me on to something else....

Instead of having a navigation bar, I thought I would attempt to keep the website simple. This will allow to create any additional features which could improve it, for example, an interactive slide show for photographs.

With this minimalistic idea, the navigation will be worked out and displayed after the explanation of the creation of the navigation buttons which will allow the user to click on their desired destination.  So I scanned in some ideas from my sketch book, re-drew them in Photoshop and applied them on the the website.

For example, this nautical star was traced by me, but I applied lines this lines onto it, which even though it does make it look shabby, it looks better with colours..

I have kept this image to design ideas/colours, even though they may clash with the back ground image. 

The next thing i wanted to do was to add a tattoo style banner across the bottom of the image, to show the title of the button/link. 

and there we go... With using the warp tool, I am able to manipulate the text so it will flow with the banner. 

Here are a few more I made, 

For the pin up style ladies, I have stayed with the idea of having them to the style of Jame Hernandez, by only using black and white. It was hard to keep the outline flowing when I traced over it. But because the image will be small,I don't think it will be noticeable. I like it !!

I'm sorry about the low quality image. I tried to make this image similar to the other pin-up girl one. But unfortunately, it was difficult to trace over it. But it will still be good. I think may have to cut her legs off though because her legs may get in the way.

here is the swallow tattoo idea. Similarly to the star, the main colours are Blue and Green, for the Lincolnshire Flag. 

All these images will be links, to link the user onto another page. That will be completed in photoshop.

I just have to align the buttons up on the back ground.

I don't really know which one i prefer. But I think I'm going to stick with the icons on the bottom of the page like this...

The band have a few songs on sound cloud, so I think I might put the song in the footer, so the song should automatically play when the website is activated. 

For more logos and images see sketch book

-------------------------------------------------------------------------------------------------------------

Album Covers Idea

This is just a quick idea, about creating an album cover as a design idea for web page.

one idea is adapted by using the Beatles Let it be, album cover,

I have adapted it, by using the style of the images of the 4 members of the band, by adding Midnight High in it.  This should be a good background for the website. Here's a brief draft example, 

Here is another example, 

Unfortunatly, there are no clear images of the guys facing forward clearly, without having different effects of the images or the resolutions varying. The best image I can come up with now (which isn't fantastic) is this one.

 

Still keeping with the Americana theme as the back ground. This is only a quick 5 minute test, I'm going to go out and take pictures of them all together to get better images. 

Here is the famous album from the Clash. I like the idea of the vertical and horizontal text, with the main image of the guitar being smashed. I want to create something similar to this iconic image. 

The text needs changing, but overall, i like this image. 

Now i'm going to attempt to place a header and a content box on these designs. to see how they would suit as website backgrounds. 

Using the idea , I have used this back ground with having orange transparent blocks to represent the header and content boxes. I like it. It would be brilliant is I could include more colours for the context box. For example, still having it transparent, but with the images in it. 

I like this idea too. Similarly having the boxes transparent the band in the background are now visible.  

I think, I might have work between the two ideas for back grounds, by adding images and content to see which one fits. 

The Fonts

This blog post is going to be dedicated to the fonts of the website.
After previewing many fonts from da font, I have came up with a sheet of 17 different fonts, all with the bands name. Out of them, I will choose 4-5 and when available edit them in photo shop/illustrator and see what I can create.

Out of the rest of those fonts, I decided to choose, these....

I chose the first one, because it reminded me of the wild west, cowboys and Indians style, and it also looks like a childish cartoon font. 

I chose the second one as well for a similar reason. It is basic, and effective. With just the outline to this font, it would be easy to add colour to it. 

I'm not too sure about the third one. I like the detail at the bottom of each letter, but my main concern is that the "M" is almost identical to the "H".

The forth and final one, I like, because like the second one, it is basic, and it has that "tattoo charm" I am looking for. I think it would be better for the title of the page instead of using it as a font in the content boxes as it could get monotonous and hard to read. 

-------------------------------------------------------------------------------------------------------------

Here are some examples of the text with a example header,

This isn't really great, but it's not bad.

I really like this design... Even though it's a draft, it could be really effective.

Nope.. don't like it at all!

This would be really good, if there was a tattoo scroll behind the letters. Without the white background, they fade into the background. 

I think I might work on the Second and Forth ideas. They just seem to work. The plain black and white idea could work really well, with the Jaime Hernandez theme. 

-------------------------------------------------------------------------------------------------------------

I tried out the fonts in the content box, but unfortunatly, they were not very ledgible . So I thought it would be better after looking at other bands websites for inspiration, to have a basic font. A basic font such as Arial, Times New Roman etc...

The Arial font is nice, but it is too thick....

I prefer the font when it is smaller instead of when it is big, 

Here is an example of 3 other fonts, (Franklin Gothic, Raavi and Viner Hand) ... I still prefer the Arial.

Arial with a contrasting colour will be amazing and it will make the writing stand out.... Black and white seem like a good choice 

Ideaaa

With this blog, I am also creating a sketch book with ideas. One of the design ideas for the website is a tattoo theme. It is easier for me to trace/draw tattoo's on paper, so then I can edit them by hand and then scan them into the computer.

It is then easy to trace around the sketch in either Illustrator or Photoshop. This example was done in Illustrator, but most of the tattoo design work was created on photoshop.

And there we go :)