Some design help needed.

[Allenph9]

Hey guys. This is the portfolio I've been working on. While I'm a decent coder, I'm not that great at design. I can pick colors, etc, but when it comes to making an actual layout, it always comes out nice, but amateur looking. I think it could use a lot more content, but I just don't have anything else to say. 

On a side note, it's a portfolio, but I'm just starting out. My plan was to frame expandable pictures in the navigation bar, but I simply do not have any. Suggestions? Maybe make a few sites for free? 

Temporary URL:

http://hundleyportfolio.bugs3.com/

Thanks in advanced!

Edited June 5, 2013 by Allenph9

[davidannis]

Link not working for me.

[Psycho]

As far as professionalism, I would suggest taking a second look at the content of the text you are using. A few things stand out to me:

 

 

 

If you are interested, I offer 100% free estimates.

 . . . as opposed to 50% free estimates?

 

 

 

Your E-Mail and other personal information will not be shared with ANYONE.

All caps is not appropriate.

 

But, there are many grammatical errors on your main page. I would suggest having someone proofread anything before you put it up. A potential customer could dismiss you right off just from a typo or two reasoning that if you don't pay close enough attention to that what would you miss on their project. Here are a couple others that jump out to me:

 

 

 

I can listen to clients desires without worrying about going over budget

Clients should be plural possessive: Clients' (apostrophe at the end)

 

 

 

I get to work with a few of my favorite things, people, computers, and design.

Because you have a list of items separated by commas, you can't use a comma after the prefatory part of the sentence - use a colon:

I get to work with a few of my favorite things: people, computers, and design.

[Allenph9]

As far as professionalism, I would suggest taking a second look at the content of the text you are using. A few things stand out to me:

 

 

 

 . . . as opposed to 50% free estimates?

 

 

 

All caps is not appropriate.

 

But, there are many grammatical errors on your main page. I would suggest having someone proofread anything before you put it up. A potential customer could dismiss you right off just from a typo or two reasoning that if you don't pay close enough attention to that what would you miss on their project. Here are a couple others that jump out to me:

 

 

 

Clients should be plural possessive: Clients' (apostrophe at the end)

 

 

 

Because you have a list of items separated by commas, you can't use a comma after the prefatory part of the sentence - use a colon:

I get to work with a few of my favorite things: people, computers, and design

 

Thank you very much Psycho. However, I thought my design was bad. The content on that page right now is not much more than filler. More to help me see what it would look like, than anything. Does that mean the actual design of the page was acceptable?

[Psycho]

Just from my personal opinion:

 

Font is too big. Don't be afraid of white space - it can make the presentation more appealing.

 

I would also change the actual font used. The content looks too much like a "default" font for my taste. And the title/navigation font has a very thin serif. It may look odd on some displays (again, just my opinion)

 

Be sure to check your site in different browsers. The Submit button isn't displayed correctly in my version of IE

 

Aside from that, I don't see much to comment on.

 

However, I did notice that when clicking the submit button I got an error about "First Name" being required. That tells me you stop error checking as soon as you find the first error. I think it's a better idea to check all the data and then provide the user with a list of all the errors.

[Allenph9]

Just from my personal opinion:

 

Font is too big. Don't be afraid of white space - it can make the presentation more appealing.

 

I would also change the actual font used. The content looks too much like a "default" font for my taste. And the title/navigation font has a very thin serif. It may look odd on some displays (again, just my opinion)

 

Be sure to check your site in different browsers. The Submit button isn't displayed correctly in my version of IE

 

Aside from that, I don't see much to comment on.

 

However, I did notice that when clicking the submit button I got an error about "First Name" being required. That tells me you stop error checking as soon as you find the first error. I think it's a better idea to check all the data and then provide the user with a list of all the errors.

I had to make it big and bold since the text color does not stand out so well against the background, so now it can fit the color scheme and be readable. Thanks for the opinion, I'm assuming then it doesn't look half bad? Fixed the button. I swear to god I spend 10% of my time writing the page, and the other 90% making it work for the 12.6% that uses I.E.

[cpd]

...text color does not stand out so well against the background...

 

A very dark, grey font doesn't stand out against a very light, grey background? I've no idea how you came to that conclusion.

Edited June 6, 2013 by cpd

[l0gic]

My plan was to frame expandable pictures in the navigation bar, but I simply do not have any. Suggestions? Maybe make a few sites for free?

Make some templates, or mock-ups and fill them out with lorem ipsum and 'your company name/logo here' graphics, use them until you have something to replace them with. Even then simple templates could be kept and re-used for many basic websites.

 

Just work on your design skills. When transitioning from tables to div and CSS, I spent many (freaken many) hours replicating magazine covers as websites. Sounds easy, eh? Give it a go, learn by doing and practice, practice, practice.

 

Edit: Some spelling, typed up on iPad. Go me.

Edited June 6, 2013 by l0gic

[DaveyK]

From a design practise: I wouldnt make everything float... I mean, why would you?

 

And you should create more paragraphs in your text. This way, its just too much. You want some parts to stand out!

 

Also, I would think that the message textarea is also required in your form, making all inputs required, making the star (*) redundant.

Edited June 6, 2013 by DaveyK

[Allenph9]

A very dark, grey font doesn't stand out against a very light, grey background? I've no idea how you came to that conclusion.

I guess you're right, but because they are both grey it seems to me like there would be less distance in between the colors? I just thought it would make it a bit easier to read, and fill up a bit more of my page. 

 

Make some templates, or mock-ups and fill them out with lorem ipsum and 'your company name/logo here' graphics, use them until you have something to replace them with. Even then simple templates could be kept and re-used for many basic websites.

 

Just work on your design skills. When transitioning from tables to div and CSS, I spent many (freaken many) hours replicating magazine covers as websites. Sounds easy, eh? Give it a go, learn by doing and practice, practice, practice.

 

Edit: Some spelling, typed up on iPad. Go me.

 

Congrats on the iPad type up.

 

What do you mean when transitioning from tables to div and CSS? I never used tables to do layouts. 

 

The template thing was a good idea. Filler for the site, and will take a lot less time than coding a bunch of simple non-dynamic websites like mine. 

 

From a design practise: I wouldnt make everything float... I mean, why would you?

 

And you should create more paragraphs in your text. This way, its just too much. You want some parts to stand out!

 

Also, I would think that the message textarea is also required in your form, making all inputs required, making the star (*) redundant.

Why can't I float things? Makes layout so much easier. 

 

On your second point, you're very right. Like I said i'm much more worried about the overall design right now than the text. 

 

Star probably is redundant, but there's so little content on that page, it just gives it a little extra. 

 

 

Thanks for all the advice, I appreciate it.

[DaveyK]

Sure you can float everything, but Im just saying divs arent meant to be floated (not that that means anything, really.). Also, if you float everything you need extra clear: both or something to make everything act as expected, while if you do something like:

<div class="section_right">
</div>
<div class="section_left">
</div>

.section_right{
  width: 150px; // say its 150px wide
  float: right;
  position: relative;
}

.section_left{
  margin-right: 155px; // 150px + 5px for spacing
}

That will work flawlessly on any page on any width on any browser on any device.

 

Just because you can, doesnt mean you have to. You can also position absolute everything, so why dont you.

Edited June 7, 2013 by DaveyK

[Allenph9]

Sure you can float everything, but Im just saying divs arent meant to be floated (not that that means anything, really.). Also, if you float everything you need extra clear: both or something to make everything act as expected, while if you do something like:

<div class="section_right">
</div>
<div class="section_left">
</div>

.section_right{
  width: 150px; // say its 150px wide
  float: right;
  position: relative;
}

.section_left{
  margin-right: 155px; // 150px + 5px for spacing
}

That will work flawlessly on any page on any width on any browser on any device.

 

Just because you can, doesnt mean you have to. You can also position absolute everything, so why dont you.

 

Hey, I appreciate the help. I'll keep that in mind from now on. 

 

I also took the template idea to heart and knocked out a couple rudimentary ones tonight. 

 

Temporary URLs:

 

hundleytemplateone.bugs3.com

 

http://hundleytemplateone.bugs3.com/two/

Edited June 7, 2013 by Allenph9

[DaveyK]

On your both templates:

 

#1 - First of all, I like that you are focusing on your positiong and CSS right now. Thumbs.

 

- You seem to get attached to setting static heights and width (namely on div.body), why are you doing that? A div, by nature, is a block element and will always be 100% of the width and height of its parent element, unless it is: floated itself, set to a different display value (such as display: inline) OR every child element is floated.

- Because you set a static width, I can scroll and see something like this, even tho my screen isnt smaller than usual (1600x900).

- I dont see scroll bars, which is odd considering you will want your site to expand at some point.

- Because you have static heights and you use floats, your page is FAR from anything dynamic. Say I had you make this site for me, and I added a lot of content, it actually wouldnt show as seen on this screenshot. Are you still such a fan of floats? Do you still think they are "easy" ?

 

 

#2 - This is the kind of fluid layout that is being increasingly popular (in my opinion). I would suggest you look at google+ since they really rock it.

 

- Floats floats floats. I suggest you look at G+, they pull it off without any floating. Learn from the big guys.

- THe design appears fluid, but it actually isnt. A fluid design would mean that the page changes depending on the current page width. I wasnt expecting it to be, but I am still putting it out there.

Edited June 7, 2013 by DaveyK

[cpd]

... Im just saying divs arent meant to be floated...

 

Since when?

 

 A fluid design would mean that the page changes depending on the current page width.

 

So a fixed width design isn't fluid? 

 

 

Floats floats floats. I suggest you look at G+, they pull it off without any floating. Learn from the big guys.

 

1) Go to https://plus.google.com/_/scs/apps-static/_/ss/k=oz.home.1drl9boq6bg3u.L.W.O/am=AAFwDADwsoEQDBBiAAEAAA0AoIFQRIBgvtcEAAAAIA/rs=AItRSTOmkJBpcmDiX5rOVnt-KDjaBzU0bg. 2) Hit CTRL+F. 3) Type "float". I count 533. I think you'll find they take control of positioning using JavaScript and not just CSS...

Edited June 8, 2013 by cpd

[DaveyK]

Since when?

 

 

So a fixed width design isn't fluid? 

 

 

 

1) Go to https://plus.google.com/_/scs/apps-static/_/ss/k=oz.home.1drl9boq6bg3u.L.W.O/am=AAFwDADwsoEQDBBiAAEAAA0AoIFQRIBgvtcEAAAAIA/rs=AItRSTOmkJBpcmDiX5rOVnt-KDjaBzU0bg. 2) Hit CTRL+F. 3) Type "float". I count 533. I think you'll find they take control of positioning using JavaScript and not just CSS...

 

 

Count how many floats they use for the columns and rows (which is the only relevant stuff for template #2) they use. You will find none. And even if you find them, I also have a column design, much like template #2, which use no floats. You are free to point out anything that is untrue but to expect that I would suggest that they use 0 floats on the entire page is absurd. I was talking about the layout with columns which he was trying to achieve and they dont use a single one there. I dont even see how that link is relevant OR how you are helping the OP with it.

 

Also, I am pointing out that, in my experience, a layout based solely on floats is BOUND to go wrong. If you see that differently, I respect that but at least share why.

 

Care to share more of your profound knowledge, especially how fixed width designs can be fluid, or are you just here to judge? In my experience a fluid design is responsive and adjusts to the screen size as best as it can. I know you are much more experienced, and I mean that, but I have no respect for anyone who will judge anyone like that without at least sharing a like. To me, your last post was offensive and I would easily consider it trolling. I am trying to help the OP and I dont think anything I said was unheplful.

Edited June 8, 2013 by DaveyK

[Adam]

Sure you can float everything, but Im just saying divs arent meant to be floated (not that that means anything, really.). Also, if you float everything you need extra clear: both or something to make everything act as expected, while if you do something like:

<div class="section_right">
</div>
<div class="section_left">
</div>

.section_right{
  width: 150px; // say its 150px wide
  float: right;
  position: relative;
}

.section_left{
  margin-right: 155px; // 150px + 5px for spacing
}

 

Mmm.. You do realise you're floating a DIV there, right? Not that I'm saying there's anything wrong with your code, I use similar tricks myself, but I just think you have some mixed up views regarding floats and you're pushing them onto people pretty aggressively. There's nothing wrong with using them, so long as you understand why they have the side-effects they do. Saying:

 

a layout based solely on floats is BOUND to go wrong

Is complete bollocks, to be honest. If in your experience you've had that happen then it's down to something you did wrong. Also using inline-block like G+ is great, but there's still one or two quirks you have to be aware of. Plus support in earlier IE versions is a bit dodgy.

 

All it comes down to is knowing the different techniques and picking the right tool for the job.

[DaveyK]

Hey Adam,

 

- to be honest I cant be bothered by older version of IE

- I still float FAR less then the OP did. In my case, the page will actually increase in size if you add content, which was not the case with the design the OP posted.

- Whether using all floats is good or not is some discussion I am not willing to go into. I personally dislike it, you may think its great. Thats not why this thread exists. It wasnt working dynamically in the design the OP posted and I pointed out a solution.

 

Feel free to have criticism on the critique, but at least have a saying on the TOPIC at hand, which is the design the OP posted.