Personal Web design - what do you think?

Brodzko

New Member
Hello there, new here.

I've just designed my new potential future personal website. I am not a professional (in fact, neither amateur) webdesigner, I like coding much more than drawing. Anyway, I've been in the right mood and spent a few hours drawing. So, I'd like to know, what do you say about this as a design? Any ideas how to make it better?

http://farm9.staticflickr.com/8004/7681023150_5bbd5e1923_b.jpg

Thanks :)
 

Brodzko

New Member
Thank you :) Not yet - first I need to know whether I can use this design (whether it's good enough O:) ) -then I'll code it. Surely will post link :)
 

bermuda

New Member
It has a stylish atmosphere for a personal website and perhaps nothing wrong with it. I just wonder why you have put those big HTML and CSS icons right in the middle though. Are your web visitors all coders and your website is trying to teach them some new tutorials about coding stuff? If that is the case so no problem.

It's a bit difficult to tell how your website will be accessed by search crawlers but if all texts I can see are not embedded into the background and are simple to reach, so your written parts too will be indexed by search sites.
 

Brodzko

New Member
I am offering a bit of coding services and the pictures are just illustrations of what I do. All the headings and "weird fonts" are going to be coded via CSS3 @font-face, so no images - that way they all can be indexed. :)
 

Phreaddee

Super Moderator
Staff member
Its an OK design. first thing for me was those logos.
I have done a lot of html5/css3 designs so far, yet dont ever feel the need to include them into my design. especially not at that size. I just do not think it actually adds to the value of the site much. it means nothing to the average user and its just inviting developers/designers to search your code for errors. fact. You would need some pretty hefty html5/css3 tutorials or information I think to warrant adding them, really.

The second thing was that stitching border effect has been done to death. It kinda annoys me, but that is purely opinion.

the third thing and this is a biggie. justified text. no good. that last line on each paragraph is precisely why. rivers of whitespace in text looks awful. the only medium I know that gets away with it is newspapers. even then it doesnt look good.

the fourth thing is different colours for text links?
this will be a bit of a nightmare to implement, but more importantly it will be confusing for customers. for this to even be remotely worth doing, the colours must identify something, such as a section on your site. even then I would still not recommend it.

I do like the colour set and the overall feel of it but I would certainly look at the above mentioned points first.
 

Brodzko

New Member
Hi!

Text links are not different coloured - the three colours have to symbolize a common link, a hover link and a visited link :).

The justified text looks fine for me, once it is coded - not in PSD I know. But I will think of that while coding :)

By logos you mean all the headings, or the HTML5/CSS3 logos on the index page? They don't necessary have to be there - these are just illustrations to make index somehow interesting.

By the way, here are another two subpages:

http://farm9.staticflickr.com/8289/7681023324_59a3cb9b91_b.jpg - profile
http://farm8.staticflickr.com/7271/7681022972_3ccf8119bb_b.jpg - contact information

What about them? (I'll change the photo, I promise O:) )
 

maxisxjay

New Member
Nice design. It's just perfect. Let us know once you've done the coding part and launched the site. Just a suggestion, I think it would be good if you can add a boarder in the sidebar.
 

Brodzko

New Member
Hello again,

here you can see my progress in coding so far: http://brodzko.cicolina.org/newbrodzko/

Let me know what do you think of that, and perhaps you could perform a little "bugtest" for me? If you think something's not working properly, please post in here what it is, what browser do you use and what you would suggest.

I'm trying to make the web simple, feel free to check both HTML and CSS codes, I believe they are clear enough. The only think that bothers me is that the CSS file is far away from being finished and is over 500 lines long - I don't mind it, it's not too big, but anyway, any experience with that? Is it better to split CSS into multiple files (despite that it increases the number of HTTP requests and thus may prolong site's loading time?)

For now, the web should be loaded pretty quick, all the files are about 950kB large and most of it are just fonts.

By this moment, I have not done the funny animals under header and over footer yet, but I'm going to do that soon :)

And so on.. I'd be happy for any critics and any suggestions you would come up with.
 

Manganix

Member
hey, your design looks awesome, and very professional. A "less is more" kind of design, I'd say.
Wish I could this kind of atmosphere in my website ... I still need to learn A LOT design-wise .. and coding-wise ;-)
 

Brodzko

New Member
Hey!

http://brodzko.cicolina.org/newbrodzko/

check it out again, just added some decorative details (pretty funny to implement those pictures under header and above footer :D) and I changed the basic structure of the web a little bit (for those who would read my source) - I had a problem with sidebar moving down as the quote went longer, so I changed the division of content (I really didn't think it through well when I was beginning, mea culpa). Also, the sidebar is a liiiitle bit wider.

So? What do you think? Any suggestions to optimize the code or to do something differently? :)

Thank you!
 

Phreaddee

Super Moderator
Staff member
I see a lot of designs being shown here, and 9/10 they struggle, are badly designed or badly coded. this design is a breath of fresh air in comparison. nice to see. a good grasp of html5 and its elements (ie not just sticking a html5 doctype on it and calling it "html5")
nice use of css3 too...

maybe if you are up to it, make the design responsive.
that would be my suggestion...
 

benjamin.morgan

New Member
This may just be me but the quote marks seem backwards and the quote might look better without them since it is a different font. It's easy to tell it's a quote.
 

Brodzko

New Member
This may just be me but the quote marks seem backwards and the quote might look better without them since it is a different font. It's easy to tell it's a quote.

It's quite possible our countries use different style of quoting, that would be why you find them "backwards" :) But you're right, they're of different font and I was actually thinking about removing them, cause the quotes are the only two characters I unclude the font for - so it's about 100kB per font file and one bonus HTTP request because of two quotes... I'll see yet.

I see a lot of designs being shown here, and 9/10 they struggle, are badly designed or badly coded. this design is a breath of fresh air in comparison. nice to see. a good grasp of html5 and its elements (ie not just sticking a html5 doctype on it and calling it "html5")
nice use of css3 too...

maybe if you are up to it, make the design responsive.
that would be my suggestion...

Thank you! I'm quite "new" into all this stuff - I more or less quit web coding years ago, when HTML5 and CSS3 were only in our dreams and this is also my first actual design. So this web is being created mostly to recall all my past knowledge of web coding and there's a lot of new stuff (and also stuff I didn't learn years ago) to learn.

Anyway, what exactly does it mean "to make web responsive? :) Sorry for not understanding.
 

Brodzko

New Member
Oh sure, thanks. Will have to learn that yet. :) I suppose using widths in responsive design isn't that good, huh? :)
 

stwordia

New Member
It's a nice design. I found the images loaded a bit slowly, with that rollout effect. IN other words, they should probably saved at a slightly lower resolution so they are >70Kb in size each.
 

Brodzko

New Member
Not really, the icons are coded using CSS sprites, to there's 8 icons in one picture that's positioned on the background of a div. Even this way, the entire picture is about 15kB and All the pictures used on web together are about 75kB large. :)

What bothers me by loading, are fonts. They are much bigger (actually, more than half of the entire website are fonts.)
 
Top