What Do You Think Of This Web Layout/design?

Ok ive decided to put my free hosting to good use once the MyCent takes over, get myself a domain name etc... and start making some money off it. Im a coder by trade so im planning on using the site to advertise my scripts and services and hopefully get a few clients look for a website creation (im working with a designer too who has his own site so if they need a design as well as the coding it can be provided). So im going to make this website. The basic idea is so simple. I want about 5 sections. An "about me" section, "Services" section where i say stuff like "We/I provide custom website creation services including blah blah....", a "contact us" page with contact form(s) a portfolio to showcase my scripts/websites and a terms and conditions page to let the clients know how these things work.

As i said im a coder by trade so making the site will be a breeze, once ive chopped up the design i can have the backbone in within a day, but the design is where i fall...being a coder my design skills are very lacking so im proud that i got this far! The orange colour was chosen by my brother, i was going to go blue but the orange really grabs the eye and yet doesnt hurt your eyes. I also really like the light panel idea for containing the text, there would be no colour that could really go directly on to the orange so the panels make it really easy on the eye. Im thinking the text colour in there will be black.

The thing im not so sue about is the header of the page (the title "shadowx coding" will be changed, i just dont have a name for it yet) it seems to empty and plain... i dont want to over complicate things, i do want a clean, glass-like (with the highlights on the header etc... (which as it goes i got the inspiration from the T17 header )) fairly simplistic look to the site but i think the header might be TOO empty.

Im also going to have a rollover on the links where when the mouse goes over the "about" button for example a small box appears below the link saying something like "Find out more about shadowx-coding" contact us: "contact us by email for a quote or with a query" etc.... Im thinking this box should be a dark grey but ill sort that out later. Anyway my design so far is below. It is copyright to me and must not be copied and used by anyone. If you want to copy it and edit it to help me out then feel free but i need this design to remain unique and so cant be used by anyone for any website.

EDIT: Ive just uploaded "plan2.jpg" this is the same design obviously but ive reduced the opacity of the gradient at the bottom of the header bar and added in an example rollover box. I think the rollover box might be a bit dark though.... Its the same colour as the background.

By the way the dark gray background either side of the orange is only seen on screens bigger than 800x600 the orange panel will have all the content and on an 800x600 screen thats all you see. The dark grey is there to take up the whitespace of bigger screens (because i need it to be compliant with the most common sized screens from 800x600 all the way up an an infinite sized screen.) which do you prefer?

This post has been edited by shadowx: Oct 26 2008, 01:09 PM

Shadowx, I like the way you made the layout, but I suggest you add some details to the header (As you said you would). Try adding a logo with it aswell

As you said it yourself, it is hard for a coder to create a good piece of web design. Being a web developer myself, I have always tried to refuse offers that would require me to employ my designing skills, as they are practically non-existent. There were times when this could not be avoided, but that's not the topic here...

First of all, I don't think this design would be representative for a web developer. While design itself is not your area of expertise, web is, so your site shouldn't be far from those of web designers when it comes to its "looks". The thing I like the most about your design is the curve next to the letter "S" - I think it could be turned into a proper logo.

On the other hand, the font used for "Shadowx coding" simply doesn't satisfy me, it's somewhat unprofessional. The same goes for the font used in the menu ("Impact", perhaps?). Furthermore, if you are to use these fonts for text (i.e. not as a part of an image), you will have problems with people who don't have them installed. For example, I am using Linux, and therefore do not have most of the standard Windows fonts. I wouldn't even have Arial/Verdana/Tahoma if I hadn't installed them Also, it's not a good idea to use many different fonts - three as a maximum, and that should be if they are similar. If you haven't already dealt with the issue of typography, you will be surprised to find out how much effort people put into choosing the right combination of fonts

The colours are good, but you might want to add another colour that would complement orange. This was the web site is monotonous. Now that I'm on that topic, I prefer the gradient used in the second file. I like the rollover box from a coder's point of view, but it definitely need to be designed differently. Also, the solution for the bottom part of the web site is too simple. True, it might be difficult to say when there is no content, but it resembles a site created with a WYSIWYG tool too closely.

Of course, I am not saying I could do any better - this would probably be the best I've got But that's why I'll leave the design of my portfolio (yet to come) to a (semi-)professional in the field. Maybe the one you are working with? It's just that I went through a lot of well-designed (and "ill-designed") web sites so I have learnt not to appreciate my own web design skill. I'll just stick to what I'm good at If you really have no other option, try using a web site you like as a basis, and then changing its parts to suit your needs. Some might call it theft, but if you change it enough, and perhaps contact the original author too see if it's fine to use it in that way, I think there should be no problem.

I'll end this post with a link to a designer's web site that I regularly go back to, just to admire the simple yet beautiful design

http://www.shiftingcreations.com/

Thanks, thats basically what i think too, the header is way to empty and plain. I wanted a sort of semi circle sun with rays coming off, in a very block-ish way (EG not blended or anything just a cartoonish white semi circle with rectangle "rays") but i have the idea in my head i just cant get it on to the screen, which is where that weird crescent thing next to the S came from.

I do also need a logo, which is something i need to think about. But overall you like the colours and the layout etc? Most importantly, would you be willing to pay for a website (based on your designs) from a site that looks like that? Because if it looks too simply and tacky im going to be very poor

As I said, you need another colour, orange + gray is too strong. The corners also seem to me a bit strong, if that's even a good way to describe it. If you can achieve just by clicking some buttons in Dreamweaver, it's not good enough To tell you the truth, I would consider paying you to create me a web site if I had seen your previous work (which you will, of course, display). But bare this in mind - I might know that coding has nothing to do with design, but "simple" people have it connected in their heads

Another thing - do you really need the sidebar? Since it is a personal web site, I don't see what could be put there. Maybe that's a habit, for a web site to have a sidebar But in this case, I think you would just spend time thinking how you could use it. If you alreadt have a clear idea in your head, then I'm sorry

too true...whenever i apply for a web developer job i get the "how strong are you design skills" I dont have any dimwad! Its a programming job not a freaking designer job! Grr....



You are completely right!! It is a habit of mine to have a a side bar, generally a bit of navigation goes in there but ive got that at the top! Doh! (this is why im not a designer ) ill probably delete that. Either that or fill it with a scrolling thumbnail display of my portfolio...

You are also right that it does look very basic in a " i downloaded this from the internet" or "Made in Frontpage" look, which isnt the best for a web developer's site...

I could get my designer to make me a design, but that would probably involve money! Plus i really need to strengthen my skills and this seems a good opportunity to do so. I too like the crescent around the S because the curves go well together, but i wont be using that as the website's name anyway! The font in the header image will be part of the image itself so theres no worries about that not displaying properly on other systems though its a fair issue about font types in the main page. I will have to look at what fonts linux/mac users have by default, i actually assumed they had Arial as thats usually my default font in case my chosen one doesnt display so ill have to remedy that.

Ill take on board everything you said in your first post (i didnt see that when i replied, we mustve been typing at the same time!) and see what i can do, it does look a bit boring at the moment. Ill also stick some dummy text in there too to see how it looks

I agree with having a better logo! Are you going to use any CMS with this site?
My advice is to get cracking on the coding part of the site, the design looks fine for a starter page, u can go on with the coding, then u can theme it up later.
And I preffer the one in wich u put a highlight in white.

In terms of layout need to dull the brightness of the orange just a bit because that sticks out the most and is quite bright. Also I would suggest designing content boxes that way you don't have to deal with repeating the background image when your content expands outside the original layout and I do agree you need to work on your logo just a bit more since it seems half finished.

As for your statement about not being a designer I would say that depending on how people look at it a designers and a programmer can mean the same thing to some while others can seperate the two, but most of the time job applications usually say designer because your doing more then just programming but setting up the layout of what your program as well.

Ok ive modified it a little (still havent chosen a logo because i havent chosen a name the name iw ant is already taken by a name is australia so i dont know how that works but im going to avoid plagiarising their name!)

Ive dulled the orange very slightly, adding an opaque white layer over the top with 5% opacity, i think 10% was too much. Ive also got rid of the content boxes on this one, instead favouring a more open layout with three columns, each column will have a different topic, they wont flow into each other. The grey boxes represent areas where i may put images such as thumbnails that are in the portfolio section, to draw the user around the site rather than letting them sit on the index page all day. Im also thinking a button on that page (in addition to the link in the nav bar) to the contact form, to further drag the user ot the pages i want them to see.

But anyway, i like the brightness of the orange, i think it suggests a fresh approach, a bright horizon to the client, a way they can "wake up" to the internet and become part of it. It reminds me of morning sunshine which is refreshing and new etc.... which i think is good!

But what do you think?

EDIT: SM: I will probably use a background colour for the orange, not an image, probably by using a div set to 800px 100% and colouring that and having the body's BGcolor set to the dark grey. That will minimize loading times and the fixed width with flexible height should make sure i dont get any issues with long content

This post has been edited by shadowx: Oct 27 2008, 12:50 PM

I suggest you lower the opacity of the bevel at the top of the site, and add a nice border to the images/thumbnails. You could possibly add an image to the upper part of the content, *Nevermind, didn't read your edit*. Test out some new fonts and try to make the content attract a little more, and go for a little lighter gray background, and see how that goes.

So, as for the logo, make some space for it, and think of how you could make it blend with your site title. But anyway, good job with it so far, I just really suggest you add some areas for content and/or other options.