LA Designs - Site Design

S

Sean Lee-Amies

Guest
So I've had this floating around for a while now, I'm happy enough now to share it with you all. The only thing I haven't finalised is some of the red "scribble" text around the site.
Those large buttons will be grey by default, and then when hovered it will fade in the red icons and the stars will also rotate. When it's clicked it will drop down a content box going into a little more detail about the services that I provide and will have a cool 3D animation when you click between the two.
The content boxes will expand on hover, on click I might make them bring up a slightly bigger content box with a link to the projects own page, I haven't worked all that out yet, but looking forward to it. I've also got to put in a link on that page to my blog, I'm probably going to have it stuck to the right/left edge of the page as a button that follows the screen.
View attachment 1378
 

Attachments

  • home page.png
    home page.png
    639.2 KB · Views: 115
I'm going to be honest here.... that slider bit looks very dated to me as do some of the 'buttons'.
 
Yeah you're probably right, I might just go back to the drawing board. It's hard to come up with stuff that looks 'different' : /
 
Sean Lee-Amies said:
Yeah you're probably right, I might just go back to the drawing board. It's hard to come up with stuff that looks 'different' : /
and you wonder why my sites taking so long lol
The thing is I don't think you need to do much to fix the bits I mentioned, just look at the newer design trends (basically solid non gloss colours and squared off) and try and adjust the slider and the buttons. The 'variable' boxes lower down are ok but you may need to drop the outer glow if you follow the new trends
 
It looks like it's coming together nicely. I had major pains when trying to come up with a new design, it's hard trying to find that look that works for you and feels just right.
I agree with Levi, I think the slider is a bit dated, tbh I think solid colours without the drop shadows would look cleaner and neater.
Also, I'd just watch the text spacing and make sure there's no '-' in there (develop-ment, informa-tion etc), it just looks wrong. The footers nice and clean. How do you plan to have the 'favourite selection' section work?
Out of interest why did you change your logo?
:)
 
As much as trends are great, and certainly vital, I really want to get a design that doesn't look like it's just following everyone else. I've sorted the text spacing already, that was just an issue for the design, I don't usually pay much attention to the fonts or text until I have it coded as it's just much easier to change the styles of text globally in CSS, without faffing around with it in PS.
I changed my logo because I took flack for it not being "original" enough last time, and as previously mentioned, I really want to evoke feelings of uniqueness and creativity, so I thought I'd go with something a bit different. It's still a working draft, so please feel free to give me some feedback on it as well. When I look at it, it doesn't feel quite.. finished, but I'm not entirely sure what else to do with it. I've come to discover that triangles in logos can be quite difficult to work with!
Here's my new slider:
2PROv.png
 
New slider is much better Sean. Nice curves. I'd potentially lose the shadow / gradient top and bottom and at either side of the slider though to clean it up a touch more.
On the original design, you should definitely drop the hyphenation from the text. Lookin good though, nice colour pallette too. The red and blue/grey works nice togther with all the white space..
 
Thanks Davo, I'm probably going to keep the drop shadows as I want to keep that slightly elevated feeling. I like the colours too, but that blue was only to fill the slider temporarily! I might look at incorporating the blue into the design a little bit more though, as you're right, it does look good.
Here's where I'm at so far:

View attachment 1380
 

Attachments

  • home page.png
    home page.png
    544.7 KB · Views: 37
It bother me that the social icons don't fall into the exact middle of the page. I'd float them right or left. Not middle of the bar. That plays with my eyes a bit!
 
Yeah that was annoying me too actually, thanks for bringing that back into my attention.
 
Time for an update.
Most things highlighted in red are the hover state.
So I've added a new navigation which you can see on the left of the screen. It will be fixed position and follow you as the page scrolls vertically. At the moment it only has 3 items, but I'm probably going to add a couple more. I may make it a bit smaller and have it extend out further to the right with some accompanying text.
I've added some icons to quickly detail the type of work that people can get from me, I think it does a good job, however, I'm not so sure about the icon used for hosting. The plan is to give each rounded diamond a really smooth, animated hover effect, so that on hover it will expand slightly and then contract off hover.
I've also changed the divider, made a couple of adjustments to the header and made some of the other design elements a little more consistent. Now I've just got to work out what I'm going to put in the slider!
View attachment 1390
Or you can view a crisp version without the white lightbox border in your browser here: http://ladesigns.co.uk/fileserver/la-home-page.png
 

Attachments

  • home page.png
    home page.png
    656.1 KB · Views: 69
those 3 'link tabs' on the left, I personally prefer them on the right of sites.... unless they're the main menu so they don't get confused with being the main navigation
 
Sean Lee-Amies said:
Time for an update.
Most things highlighted in red are the hover state.
So I've added a new navigation which you can see on the left of the screen. It will be fixed position and follow you as the page scrolls vertically. At the moment it only has 3 items, but I'm probably going to add a couple more. I may make it a bit smaller and have it extend out further to the right with some accompanying text.
I've added some icons to quickly detail the type of work that people can get from me, I think it does a good job, however, I'm not so sure about the icon used for hosting. The plan is to give each rounded diamond a really smooth, animated hover effect, so that on hover it will expand slightly and then contract off hover.
I've also changed the divider, made a couple of adjustments to the header and made some of the other design elements a little more consistent. Now I've just got to work out what I'm going to put in the slider!
attachicon.gif
home page.png
Or you can view a crisp version without the white lightbox border in your browser here: http://ladesigns.co.uk/fileserver/la-home-page.png
Its developed a lot now, I really a beginning to like it :) Do you have an eps/ai of the DF icon so I can add it to my social panel next time I redo the site (probably soon - never am happy :p)
 
I see what you mean Levi, I'm not sure if I'll move it to the right side or not, but thanks for mentioning it.
Thanks Ben. I will post up the DF icon when I've tidied it up a little bit :) I plan to launch a little DF icon kit at some point, although we may decide to change the icon as it's not overly great.
 
Sean Lee-Amies said:
I see what you mean Levi, I'm not sure if I'll move it to the right side or not, but thanks for mentioning it.
Thanks Ben. I will post up the DF icon when I've tidied it up a little bit :) I plan to launch a little DF icon kit at some point, although we may decide to change the icon as it's not overly great.
Okie Dokie, just starting a new web design for me now, so will keep you posted :)
 
Sean Lee-Amies said:
I plan to launch a little DF icon kit at some point, although we may decide to change the icon as it's not overly great.
competition number 2 is sorted then :p
 
The icons are lovely. Made me realise I've rushed mine a little and it shows. Yours are really considered.

I'm not personally a fan of the red, but if it's your look, it's your look.

Also the links at the top could do with being a little smaller perhaps...
 
Thanks Jamie, I had fun doing them! I hope to incorporate some more iconography onto the site and I've decided that I'm going to put some illustrations into the slider, I look forward to showing you all when it's a little more finished!
 
Sean Lee-Amies said:
Thanks Jamie, I had fun doing them! I hope to incorporate some more iconography onto the site and I've decided that I'm going to put some illustrations into the slider, I look forward to showing you all when it's a little more finished!
Hey.
I'm looking at the design as is currently stands. The first thing that I would change is the 'Graphic Designer & Web Developer', what I would do is either make both 'graphic' and 'designer' the same size, and put 'designer' in lowercase, apart from the 'D' of course. Or, I would remove the words 'graphic' and 'web' and again change the 'Designer & Developer' to lowercase.
I like the icons in the diamonds. I also like the contact buttons you have at the top left.
The buttons at the bottom are a good idea, though I think you should decrease the gray border on the non-hover state to 1px, like the image previews above.
I'm not too sure about the dividers you have chosen, the squiggly lines appear to make it look a bit blurry, which contrasts against the sharpness of the rest of the design.
It's definitely coming along, maybe try some other fonts as well - is that Myriad Pro?
Hope I could help
 
Hi Defiance. Thanks for your comments! I won't be changing the phrasing of the graphic designer and web developer section as they are tied into my SEO planning. However, I might play around with the display of the words a bit. Why do you think it would look better with your proposed changes? Just curious :)

I've decided to try out one of my ideas for the slider area, it's basically going to consist of 3 colour illustrations. Each slide will come in vertically, the bottom slide will feature a illustrated sea bed, the middle slide will show land, just above the sea (as you can see in the update below) and then the top will display more clouds and birds. The point is to demonstrate some of my illustrative capabilities as well as to go into further detail of my own (and my partners) abilities.

I'm not asking for critique on the illustration, it's just something I did quickly to demonstrate the use of colour and style I was aiming for. I'm wondering whether people think this is a good direction to take, or I should stick with something cleaner, more minimalist and simple? One other alternative is to take more of an infographic approach with each slider, using perhaps two colours, three colours at most which are consistent with the current colour palette.

I've also modified the divider.

Updated Design: http://ladesigns.co.uk/fileserver/la-home-page.png

Alternative "Diamond" Style Slider Illustration: http://puu.sh/2WB9A.png (I'm thinking this is probably too much use of the diamond, but wanted opinions anyway)
 
Back
Top