Our new Indie Games subforum is now open for business in G&T. Go and check it out, you might land a code for a free game. If you're developing an indie game and want to post about it,
follow these directions. If you don't, he'll break your legs! Hahaha! Seriously though.
Our rules have been updated and given
their own forum. Go and look at them! They are nice, and there may be new ones that you didn't know about! Hooray for rules! Hooray for The System! Hooray for Conforming!
grand central orikae - Astro Zombies finished, p 8
Posts
Steam
qualities striving for: sleek, functional, professional, subtly raw.
we'll see what he thinks of it. i'm using milkbox for his gallery, which is a grid of clickable boxes that bring up the higher-res version in a neat little in-browser frame. it'll be going where the news is.
http://reghellin.com/milkbox/
i hesitate to even call this design, though, since i really didn't do all that much. i'm new to this stuff!
There are also some minor things I disagree with. For example, if you were going for 'sleek' I think choosing to use a grungy texture in the background was a bad choice - it doesn't convey sleekness at all. Also, the positioning of the text doesn't quite match up. For example, if the heading was positioned slightly to the left, the left-most bracket would be in line with the 'news' section, while if the links on the left were moved slightly up they would also be in line. It seems trivial but small details like this can make a big difference, and if you wanted to suggest 'professional' you'd want everything to be very structured and orderly.
Or I could just be blathering on nonsensically. Either way.
The text alignment has been fixed - I just realized I uploaded an old iteration by mistake.
For a bit of background, this is an artist portfolio site, but the man has refused to provide me with his portfolio. I've been asking him for a month. I have nothing to go on, hence the blandness. Maybe I'm not creative enough.
Big things first, I suppose; I don't like the navigation "bar"; unfortunately, I can't figure just what it is I don't like about it (could be the size, or the centered alignment, but either way, the brackets definitely have something to do with it). I'd play around with it a bit more, if I were you. I'd also agree with Flay about the alignment of the elements. I feel like the background is meant to convey the "slightly raw" feel you mentioned aiming for, so I don't take issue with it, though to balance it with the "sleek," I might consider toning it down just the tiniest bit.
From a more technical standpoint, I take it this is a mockup of the site; have you considered the implementation on different-sized monitors? The proportions look alright to me now, but my screen is a bit bigger than that, and the empty space you'd create if you were to keep the proportions and center the arrangement on the screen might make the design seem a bit too bare. Also, how will the background scale? It looks like the textures extend throughout the design, but for bigger monitors, you're either going to have to tile it somehow, or anchor it somewhere, and fade the background to a single color--unless you go with one of those fancy-dancy script-based backgrounds, I suppose.
Last thing is that I really want to see your take on the other pages of this site, particularly the more text-based ones (CV, About, and Bio), and the Contact section (which, in my experience, is always difficult because there's so little content to fill up the space; though I may just be a bad designer-wannabe in that respect).
Overall, it feels a bit incomplete, but in a way I can't really articulate at the moment. It does look good, though, and I think you at least go a long way to conveying the qualities you seek to express.
EDIT:
You could always just put up some of your own work in the meantime.
Worst possible client. 'I want you to do something for me, and I'm going to give you a vague idea of what I want. But I'm not giving you anything else. No, no matter how hard you ask.' Let him know that if he's not going to show you what the entire site revolves around - what the design needs to complement - then there's no way you can design for him. And if this isn't a paid comission, I see no reason not to tell him right where to stick it (unless, of course, he's a friend, or a friend of a friend or the like).
The other art in your thread says otherwise. I'm gonna put this down largely to the client. I should have said I do like what you have, but it does need a bit of work.
Only in the English language can this make sense.
EDIT: Also, please note I can be really critical when it comes to small details. I'm what you might call an 'asshole'.
i'm going to upload wider formats and text pages in a second.
these are mockups, so i don't have scalable versions, but the text is going to be a fixed-width div at 1000x768 or whatever that resolution is.
if your monitor is higher-resolution than 1280x960, what the hell is wrong with you. seriously. still, it's designed so that there's screen bleed (i think i just made that term up)
flay: be an asshole. i'm a big boy.
gallery is from some other site. i just copied a row and manipulated it a bit.i have no idea how many images he has, so it's just a test arrangement.
e: text is from his artist's statement, the only thing i've gotten form him so far.
ee: oh, yeah, it's a paid commission. i need money.
I really like the way you've got the text going, there, and I agree completely with your decision to fix the div width for the text. I'm just worried about the background. I'm interested to see how you implement the Milkbox app so that it flows with the design of the page (I think that's my only beef with those gallery-viewing apps, generally; they often feel out of place with the rest of a page's design), but I imagine it'll turn out looking fine. The navigation bar still feels off, in my opinion; thinking about it more, I think its essential problem is that the text stands out too much. Either changing the size, or the color (if they're going to be images, you could always consider a bit of alpha transparency, with a solid-colored mouseover), might help tone it down a bit.
Just my two cents, anyway. Either way, it's a good design.
EDIT: Oh, right, almost forgot; do web design programs have hyphenators these days? If not, I can tell you from personal experience that hyphenating that text manually is going to be a bit of a pain, since the three main browsers render text size and spacing differently enough that you'll have to hyphenate for all three of them (using for the discretionary hyphen).
I'll make the nav bar text smaller, for one. I think I just made a typo when I set their pt values, and didn't noticed because I was working zoomed out.
Thanks for your thorough critiques.
and 'great-looking design' makes me extremely flattered.
I'm not normally a fan of grey designs, and I think that's why I like the gallery page the most. The small hits of color really pop.
On a side note, the default resolution of my monitor at home is 1680x1050.
I wonder, also, if maybe your comment about the gallery page might actually work in favor of the grey design, in that it would defer its focus to the art, which is what really matters in the end.
That was actually why I was bringing it up. I guess I just didn't clarify it enough.
EDIT: Also, this is a veiled attempt to just repeat what someone else said.
Gamertag: T0NKKA - Steam: evilumpire Twitter Art blog/Portfolio!HEY SATAN!
In other news, a revised website design, with the client's crits included: distressed name, more focus on central aspect, modified texture in the background.
client some korean dude? what does he do? what is the site for?
www.dongkyoona.com
- I see you changed fonts. while í'm glad because i did not like the previous one (had some odd optical illusion aspect that made it really uneasy on the eyes). This one however screems "generic 3-D shooter menu screen" .
- The outer border does not complement the innner frame at all. The textures clash and the colours don't make for an interesting contrast. Also what is up with the slighly darker bar on top of the main frame. EDIT: I understand it's the same texture but the way it's filtered makes it look like something else entirely.
- It looks like you've got four different fonts on one page, this does not help the sleek look you were going for.
Hope this helps.
Satan, look! (amazon list updated)
Just add line-height:16px to the css.
to bwanie: the font choices, unfortunately, were requested by the client. There's actually only 2 typefaces on the page, but i guess it says something that they look different. I'm not sure what.
The sleek look was abandoned as soon as the client offered revisions. I'm just looking for its success as a portfolio website.
also: what darker bar? i have no idea what you mean.
ems are relative to the end-user
16px is approx 1 em though,
but in your case,
they are rendering at about 15.3367--
try pixy's cascaded style favelet to see: http://www.pixy.cz/pixylophone/favelets/
You should probably redefine one em in your css. Set 1 em to 10 px, it will make the math easier.
Right now you have a lot of fractional font-sizes which is bad news--produces very inconsistent results.
Also the inheritance is going to be a nightmare if you make changes/add anything.
Set the font size in body:
body {font-size:62.5%}
this causes 1em == 10px, which really simplifies the math, and elimiantes the problems you may be having.
looking at your code quickly,
you are running into inheritance issues
the issue with ems is you have to reset them frequently
otherwise, when you say 1.1 em, you won't get 11, you'll get the computed value of the ancestor, which let's say it's 12--so now you're getting 110% of 12
that's why your sizing is off in several places
if you get the favelet I posted, you can test it on an element by element basis
I love the concept of ems and use them, but ultimately, I gave it up because all the modern browsers now do ZOOM by default instead of a simple text size enlargment. The inheritance is just too big of a hassle on a drupal powered site which is aggregating content from dozens of database calls into multiple layout blocks. for a small site like this though it shouldn't be an issue, you just have to go through and check the inheritance.
Also, visually, I really agree with the other posts. I'd drop the outer background! It really hurts the interior.
Keep the interior & just make it stretch 100% height, and make the outer, a soft grey or similar.... or some simple fade from grey to white/black/whatever if you want to keep it interesting but still b&w.
I should've specified that I meant that as an example of how to manipulate line height in CSS. The 16px was just meant as a placeholder.
Orik--site looks good though, just trying to give you the advice you asked for, hope it's not taken personally. The basic structure you are using is very clean & nice (Code-wise) and a great job. You've done some good work here.
LAST thing I'd recommend is making it clear that the CV is a pdf--maybe writing pdf in small letters next to it/etc--or just converting it to html with a link to the pdf document in line with the page.
and Orik, these are problems that every web developer runs into with their early commercial work. I'm sure at times it was and is and will be frustrating, but it is also an extremely rewarding career, and I wish you great luck.
one thing - which favelet did you mean? there's a bunch here.
and, unless I've forgotten something, the only time I used ems was in the p style for line-height, which means it should still work for the purposes of leading, right?
i mean, percentage styling runs into the same inheritance issues, i was just making sure my understanding is right.
The only thing allowed inside ul-s is li-s. You can't just dump a div in there.
The only other thing I noticed is in the text:
You shouldn't really need the <br /> there. By default headings of different numbers will wrap onto the next page anyway.
Anyway, I suppose I'll start with the general and less code-based, and move into the code from there.
I think that's it; hopefully it is, anyway. At the length this thing's at, I hope there's something useful and unique here (I know that at least a couple of the things I've said were mentioned before, and more briefly).
EDIT: Hmm...now that I've seen your CSS, a couple of odd things do stand out.
I actually have no idea why the hover effects don't work - in fact, none of the a.(whatever) selectors seem to be working, which i found out when I tried to do text-decoration: none & change the active/visited links' colours. the only one that does is the overarching a, which I compromised with when I couldn't figure out how to get the rest to work.
EDIT: And while it shouldn't be causing the problems with Calibri, your h1 font-family definition needs some quotation marks.