MIkeButtery - Website Rebrand WiP
- Thread starter MikeButtery
- Start date
MikeButtery
Member
Thanks for all the feedback guys! I haven't really done much on the site, too busy looking for work...
Jazajay - I replaced my title and fixed the 'out of wack' text, thanks for the spot!
Greg, allyally2k & Tom Sound - Toast image replaced, inspired by anagoge, I felt a tub of butter would be more fitting and connected better to my branding....
Winged sides? I was advise not to use these, but I really feel they help hold the site... I have tried other backgrounds, but I can't seem to find anything that fits, any suggestions?
And finally...... YELLOW!! I really don't know what to do with this, I really really like the yellow, I think it helps draw the logo in, I may try in the morning with a blue or something from the lurpak-ish butter tub.
Thanks very much for all the help, I know this is dragging out, and its getting boring now, but I think I am nearly there!
Mike Buttery - Freelance graphic designer based in Blackpool
Jazajay - I replaced my title and fixed the 'out of wack' text, thanks for the spot!
Greg, allyally2k & Tom Sound - Toast image replaced, inspired by anagoge, I felt a tub of butter would be more fitting and connected better to my branding....
Winged sides? I was advise not to use these, but I really feel they help hold the site... I have tried other backgrounds, but I can't seem to find anything that fits, any suggestions?
And finally...... YELLOW!! I really don't know what to do with this, I really really like the yellow, I think it helps draw the logo in, I may try in the morning with a blue or something from the lurpak-ish butter tub.
Thanks very much for all the help, I know this is dragging out, and its getting boring now, but I think I am nearly there!
Mike Buttery - Freelance graphic designer based in Blackpool
Anagoge
Senior Member
Fantastic new image. Made me smile! Excellent use of copy.
The reason the winged sides don't work is because your page isn't very long. In essence, they just get going and then have to stop again. If your page was longer, you might see that they work better.
The shade of yellow that you're currently using is FINE. Do not change that shade of yellow. *however* going back to Levi's earlier post, I would still be in agreement with him to make your site generally darker. You say that the yellow draws the logo in. I would disagree with this, but think that it would if it were on a darker background.
I hate to be so critical of your efforts and please don't think that I (or indeed anyone on these forums) is telling you to change/try things just to berate you. We all want you to succeed. With that said, I do believe you can do better with your overall site design.
I have a very specific 'look' in my head for how your site should look and I think that if I could communicate it to you through telekinesis, you'd probably agree. Instead, consider looking at a few of these links from CSS galleries and compare them to what your site looks like currently. You have the perfect contrast of rough, crumbly toast with the smooth, softness of butter. You *need* textures and gradients to communicate these things. I feel that the below examples are something you should try and incorporate into your site.
Airoom
Social Control | Digital Creative Agency
Real Kebab - Churrasco Grego
VLAA: Volunteer Legal Assistance for Artists - This site in particular stands out for me as something you should refer to. Simple gradients, but a fantastic overall result. Imagine something similar, but with toast/butter colours and/or textures.
Gist Create: A Jacksonville Web Design Company. Web Design and Email Marketing - Another great example of how texture has been incorporated but not at the detriment of the content.
Web Portfolio of Dave Myers - Santa Barbara Web Design - Art Portfolio - Development - Art of Dave Myers - A nice big header image like this would begin to improve your site considerably and notice how he's used texture in an effective way.
http://www.loukotka.com
http://joomlatemplateshop.net/joomla-church-097
http://www.revealreel.com
I hope that these links help you. They only took me a few minutes to find via various CSS gallery sites but I do believe that you can take a lot from them. I'm not saying design your site like any of the above links. For example, don't turn your site blinding red like "Real Kebab". My point is that it grabs your attention immediately. Instead, take design cues from them, which is a completely different thing. Again, I know it must sound like we're all shouting at you to do this, that and the other, but I promise you that none of us mean it personally!
The reason the winged sides don't work is because your page isn't very long. In essence, they just get going and then have to stop again. If your page was longer, you might see that they work better.
The shade of yellow that you're currently using is FINE. Do not change that shade of yellow. *however* going back to Levi's earlier post, I would still be in agreement with him to make your site generally darker. You say that the yellow draws the logo in. I would disagree with this, but think that it would if it were on a darker background.
I hate to be so critical of your efforts and please don't think that I (or indeed anyone on these forums) is telling you to change/try things just to berate you. We all want you to succeed. With that said, I do believe you can do better with your overall site design.
I have a very specific 'look' in my head for how your site should look and I think that if I could communicate it to you through telekinesis, you'd probably agree. Instead, consider looking at a few of these links from CSS galleries and compare them to what your site looks like currently. You have the perfect contrast of rough, crumbly toast with the smooth, softness of butter. You *need* textures and gradients to communicate these things. I feel that the below examples are something you should try and incorporate into your site.
Airoom
Social Control | Digital Creative Agency
Real Kebab - Churrasco Grego
VLAA: Volunteer Legal Assistance for Artists - This site in particular stands out for me as something you should refer to. Simple gradients, but a fantastic overall result. Imagine something similar, but with toast/butter colours and/or textures.
Gist Create: A Jacksonville Web Design Company. Web Design and Email Marketing - Another great example of how texture has been incorporated but not at the detriment of the content.
Web Portfolio of Dave Myers - Santa Barbara Web Design - Art Portfolio - Development - Art of Dave Myers - A nice big header image like this would begin to improve your site considerably and notice how he's used texture in an effective way.
http://www.loukotka.com
http://joomlatemplateshop.net/joomla-church-097
http://www.revealreel.com
I hope that these links help you. They only took me a few minutes to find via various CSS gallery sites but I do believe that you can take a lot from them. I'm not saying design your site like any of the above links. For example, don't turn your site blinding red like "Real Kebab". My point is that it grabs your attention immediately. Instead, take design cues from them, which is a completely different thing. Again, I know it must sound like we're all shouting at you to do this, that and the other, but I promise you that none of us mean it personally!
MikeButtery
Member
Cheers for the feedback guys! Glad you like the tub!
Anagoge... You big bully!!! Haha I kid, I take any feedback, good or bad, as it is... anything critical is purely to make my work better, not to be nasty. So I thank you for your lenghty and helpful reply.
I agree there is some finishing touches that are needed to my site, I shall make a brew, read, then post what I come up with...
Cheers again!
Anagoge... You big bully!!! Haha I kid, I take any feedback, good or bad, as it is... anything critical is purely to make my work better, not to be nasty. So I thank you for your lenghty and helpful reply.
I agree there is some finishing touches that are needed to my site, I shall make a brew, read, then post what I come up with...
Cheers again!
Jazajay
Active Member
Hi Mike now I have some time lets look at some code improvements and their benefits to you.
First off add the dir attribute to your html tag so ~
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
As that tells user agents which direction your text is meant to be read from, in this case left to right (ltr).
Add the content encoding meta, so user agents know how to show special characters correctly, to the head of the page ~
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
I would change your logo to say the same as your title element TBH.
Mike Buttery ~ Graphic designer based in Blackpool,
then change your alt attribute on the logo image to match, otherwise that will give you no benefit in the search engines, and as the image will say 1 thing and the alt attribute another you will be giving 1 content to users and another to the search engines which is technically a technique called cloaking and is not a good thing. Also accessibility conventions (AC) say if the image says 1 thing, unless it is decorative, the alt attribute should say the same thing as well.
Within the HTML though the logo on your home page should be in a H1 tag so to tell the search engines your main keywords. So change it to this ~
<div class="logo"><h1><img src="img/newlogo.jpg" alt="Mike Buttery - Freelance graphic designer based in Blackpool" /></h1></div>
Again that will seriously help the search engines rank your page much more efficiently.
But only change the based in part if you change the image. The image change will also clarify to your site visitor where you are based from a much quicker time, and if they are looking for graphic designers in Blackpool then they know they are on the right portfolio once they get off the SERPs.
This alt attribute needs to be changed to ~
<img src="img/phoneoff.gif" alt="Phone 07794 885448" />
Otherwise I suppose you could be breaking the disability discrimination act, but how will ppl who use user agents other than 1's with a GUI know how to phone you. Small change big benefits IMO.
Also that is what that image says again going back to the fact that it is technically cloaking, and also going back to AC, that is what the image says.
Also do the same for the email attribute as again that alt attribute and image text don't match TBH, and they should.
You main heading for the page graphically ~ Tasty and versatile design just has it's alt attribute set to butter..... Now again bringing in cloaking and AC. It should say the same. However if it did say the same it would make no sense from anyone listening to the code TBH, it's got no Search engine value so I would class it as decorative and just leave it blank.I suppose some1 could make the case to change it to Tasty and versatile design as that is what it says, but if it's blank you wont get in trouble with the search engines and if some1 with out a GUI reads it well it wont make sense with the surrounding copy so I would just remove it and leave the attribute blank.
I would change this line in your copy to ~
<b>I'm a versatile graphic designer based in Blackpool,</b>
That does 3 things.
1. By bolding it you make it more readable as ppl tend to skim read on-line. Therefore by setting it apart from the rest, makes it stand out more.
2. It again clafiy's to both potential clients and the search engines where you are based, and the b tag IMO still has value, so as it does you need to add the right keywords in their.
3. Sounds correct, not as if you are writing for the search engines.
The sales pitch image, is a heading, so is your featured projects image, so technically should be placed in a H2 tag, also I would change it to About me TBH, IMO sounds more friendly, but if you do, remember to change the alt attribute.
If you are still a graphic designer I would personally re-word it to ~
For the last 6 years I have been working as a graphic designer, as that clarify's that you still are.
Again I would look at bolding this ~
....working on a variety of projects with companies across the UK
As that is a selling point and you want it to stand out more TBH.
You could always use a darker shade of grey if black becomes to overpowering. #666 maybe.
Again the image available to work does not say
Email Mike To Discuss Work
So the alt attribute shouldn't either TBH. Again technically cloaking and breaking AC.
Again you don't need the view in the alt attributes on your featured work as that is not what the image says and if a user on a none GUI interface would hear or read it it would not make that much difference.
Aren't the Bar19, and Broadway Publishing Ltd, registered trademarks in which the correct encoding is ~ ® which will give you the nice R in a circle.
But yeah I do like that butter image fella.
Hope it helps,
Jaz
Key:
Blue ~ XHTML
First off add the dir attribute to your html tag so ~
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
As that tells user agents which direction your text is meant to be read from, in this case left to right (ltr).
Add the content encoding meta, so user agents know how to show special characters correctly, to the head of the page ~
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
I would change your logo to say the same as your title element TBH.
Mike Buttery ~ Graphic designer based in Blackpool,
then change your alt attribute on the logo image to match, otherwise that will give you no benefit in the search engines, and as the image will say 1 thing and the alt attribute another you will be giving 1 content to users and another to the search engines which is technically a technique called cloaking and is not a good thing. Also accessibility conventions (AC) say if the image says 1 thing, unless it is decorative, the alt attribute should say the same thing as well.
Within the HTML though the logo on your home page should be in a H1 tag so to tell the search engines your main keywords. So change it to this ~
<div class="logo"><h1><img src="img/newlogo.jpg" alt="Mike Buttery - Freelance graphic designer based in Blackpool" /></h1></div>
Again that will seriously help the search engines rank your page much more efficiently.
But only change the based in part if you change the image. The image change will also clarify to your site visitor where you are based from a much quicker time, and if they are looking for graphic designers in Blackpool then they know they are on the right portfolio once they get off the SERPs.
This alt attribute needs to be changed to ~
<img src="img/phoneoff.gif" alt="Phone 07794 885448" />
Otherwise I suppose you could be breaking the disability discrimination act, but how will ppl who use user agents other than 1's with a GUI know how to phone you. Small change big benefits IMO.
Also that is what that image says again going back to the fact that it is technically cloaking, and also going back to AC, that is what the image says.
Also do the same for the email attribute as again that alt attribute and image text don't match TBH, and they should.
You main heading for the page graphically ~ Tasty and versatile design just has it's alt attribute set to butter..... Now again bringing in cloaking and AC. It should say the same. However if it did say the same it would make no sense from anyone listening to the code TBH, it's got no Search engine value so I would class it as decorative and just leave it blank.I suppose some1 could make the case to change it to Tasty and versatile design as that is what it says, but if it's blank you wont get in trouble with the search engines and if some1 with out a GUI reads it well it wont make sense with the surrounding copy so I would just remove it and leave the attribute blank.
I would change this line in your copy to ~
<b>I'm a versatile graphic designer based in Blackpool,</b>
That does 3 things.
1. By bolding it you make it more readable as ppl tend to skim read on-line. Therefore by setting it apart from the rest, makes it stand out more.
2. It again clafiy's to both potential clients and the search engines where you are based, and the b tag IMO still has value, so as it does you need to add the right keywords in their.
3. Sounds correct, not as if you are writing for the search engines.
The sales pitch image, is a heading, so is your featured projects image, so technically should be placed in a H2 tag, also I would change it to About me TBH, IMO sounds more friendly, but if you do, remember to change the alt attribute.
I take it you are no longer working as a graphic designer as that's written in the past tense as in that is what I used to do, but not now?
If you are still a graphic designer I would personally re-word it to ~
For the last 6 years I have been working as a graphic designer, as that clarify's that you still are.
Again I would look at bolding this ~
....working on a variety of projects with companies across the UK
As that is a selling point and you want it to stand out more TBH.
You could always use a darker shade of grey if black becomes to overpowering. #666 maybe.
Again the image available to work does not say
Email Mike To Discuss Work
So the alt attribute shouldn't either TBH. Again technically cloaking and breaking AC.
Again you don't need the view in the alt attributes on your featured work as that is not what the image says and if a user on a none GUI interface would hear or read it it would not make that much difference.
Aren't the Bar19, and Broadway Publishing Ltd, registered trademarks in which the correct encoding is ~ ® which will give you the nice R in a circle.
But yeah I do like that butter image fella.
Hope it helps,
Jaz
Key:
Blue ~ XHTML
C
chrismitchell
Guest
Jaz have you ever thought of writing a book? :lol:
Jazajay
Active Member
Yeah I am it's an on-line book. I call it "My work at DF" ~ The Jazajay story.
Now if only Greg would get onto removing the 10,000 character limit per post as that's just stopping my creativity. I mean on my post before this I was 3000 characters, give or take, over and I had to split it into 2 posts do you know how annoying that is.
No, lol, but I'm going to get a site up and running early next year, web designer help, latest news that sort of stuff I think after Blueocto gave me that thought TBH.
Now if only Greg would get onto removing the 10,000 character limit per post as that's just stopping my creativity. I mean on my post before this I was 3000 characters, give or take, over and I had to split it into 2 posts do you know how annoying that is.
No, lol, but I'm going to get a site up and running early next year, web designer help, latest news that sort of stuff I think after Blueocto gave me that thought TBH.
MikeButtery
Member
Cheers for the reply Jazajay, legend! I shall make the code changes and post my revamped look!
Great feedback from Neil and Jaz yet again, awesome
Like the new tub image Mike, and like Neil mentioned I think moving to a darker background could work really well, it would definitely make your yellow stand out, perhaps try a dark background for the header section?
Limit is now upped to 20,000 characters, the words 'flood', 'gate' and 'open' spring to mind for some reason!?
Like the new tub image Mike, and like Neil mentioned I think moving to a darker background could work really well, it would definitely make your yellow stand out, perhaps try a dark background for the header section?
Jazajay said:
Limit is now upped to 20,000 characters, the words 'flood', 'gate' and 'open' spring to mind for some reason!?
MikeButtery
Member
Yep, I second that Greg, cheers for all the feedback guys, and a special thank to Anagoge & Jazajay for the replies...
I tried to texture my website last night and got this far....
http://dl.getdropbox.com/u/2190797/sampletexture.jpg
God awful, and thats me being kind.... After speaking to Neil he pointed me in the right direction I think....
Anyway take two...
I am off for a business meeting with a bar (8pm!! I know!) so I will catch the feedback and responses tomorrow...
A few notes:
Not happy with the buttons, may replace with just text and indent the header bar like its been sliced.
I think I have been talked into hosting my own samples, instead of a link to dA so the four samples in the middle may become scrollable..
Toast like texture for the light area, and a scratched surface effect for the dark area, bread knife kinda thing!
I think I am gonna change the zigzag effect for something a little softer, or round them off a little more...
Thanks!
I tried to texture my website last night and got this far....
God awful, and thats me being kind.... After speaking to Neil he pointed me in the right direction I think....
Anyway take two...
I am off for a business meeting with a bar (8pm!! I know!) so I will catch the feedback and responses tomorrow...
A few notes:
Not happy with the buttons, may replace with just text and indent the header bar like its been sliced.
I think I have been talked into hosting my own samples, instead of a link to dA so the four samples in the middle may become scrollable..
Toast like texture for the light area, and a scratched surface effect for the dark area, bread knife kinda thing!
I think I am gonna change the zigzag effect for something a little softer, or round them off a little more...
Thanks!
Anagoge
Senior Member
MikeButtery said:
Going the pub for a pint doesn't count as a meeting, just so you know.
Your reworking of the site is looking great. The addition of the textures, highlighted header and the use of the whole width of the site for your projects is a real improvement to your first attempts.
As already mentioned to you, I think you need to use Arial instead of Century for your copy because Century is too wide.
Also, remember to make your butter tub have the same tonal values as the background - it's too cold right now. You might also want to try your logo in its original orange instead of changing it to red like you have and then it's less of a challenge trying to make the tub look part of the site.
I think your navigation could do with being just a tad smaller because they're fighting for dominance currently with your logo.
I don't mind the zigzag cuts, they're a nice feature but sure, try and round them a little and see what you come up with.
You're starting to bring all of the elements together in a really nice way.
MikeButtery
Member
Cheers Neil, I will play again with it tomorrow...
As to the pub, I wish I was getting a pint, but I am a lightweight and I think being drunk would hinder me... I am going to collect my deposit and server details to replace this shocking site...
bar19blackpool .co.uk
Pop quiz... How much do you think they paid for this...
As to the pub, I wish I was getting a pint, but I am a lightweight and I think being drunk would hinder me... I am going to collect my deposit and server details to replace this shocking site...
bar19blackpool .co.uk
Pop quiz... How much do you think they paid for this...