As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

grand central orikae - Astro Zombies finished, p 8

135

Posts

  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    thanks guys! i'm currently doing studies for my next painting, which I should start next week. Watch this space!

    Orikaeshigitae on
  • RankenphileRankenphile Passersby were amazed by the unusually large amounts of blood.Registered User, Moderator mod
    edited April 2009
    ok.

    Rankenphile on
    8406wWN.png
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    in the meantime, here's a design for an artist's portfolio website.

    qualities striving for: sleek, functional, professional, subtly raw.
    kim_layout_proof.jpg

    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!

    Orikaeshigitae on
  • FlayFlay Registered User regular
    edited April 2009
    I have to say I find that design to be quite bland. A greyscale colour pallet can be used effectively, but to be honest it's kind of boring here.

    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.

    Flay on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    Thanks - no, yeah, that's quite helpful. I think that's really all the critique I need with regards to this design, actually.

    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.

    Orikaeshigitae on
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited April 2009
    A couple of things:

    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:
    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.

    You could always just put up some of your own work in the meantime.

    crawdaddio on
  • FlayFlay Registered User regular
    edited April 2009
    ... 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.

    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).
    Maybe I'm not creative enough.

    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.
    ...no, yeah...

    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'.

    Flay on
  • NotASenatorNotASenator Registered User regular
    edited April 2009
    Have you tried that design in different screen sizes? How will the background texture tile/scale?

    NotASenator on
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited April 2009
    Hey! That's what I said!

    crawdaddio on
  • BetelgeuseBetelgeuse Registered User regular
    edited April 2009
    NAC makes himself sound smart by regurgitating the smart things other people say

    Betelgeuse on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    it's actually originally in a widescreen format (the background, that is.) it's just going to continue off. value-wise, though, it's going to maintain the same.. ratio? the composition works in both formats, is what i'm trying to say.

    i'm going to upload wider formats and text pages in a second.

    Orikaeshigitae on
  • NotASenatorNotASenator Registered User regular
    edited April 2009
    I just make myself sound smart by repeating what other people have said.

    NotASenator on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    ok. wide format gallery and text.
    kim_layout_proof_wide_text.jpg
    kim_layout_proof_wide_gallery.jpg

    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.

    Orikaeshigitae on
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited April 2009
    Screen bleed? I don't mind you having made the term up, just so long as you tell us what you mean by it; that the background goes beyond the screen? Because it's smaller than mine (1440x900), and I'm on a friggin' laptop, so I don't know that resolutions in my neighborhood are exactly rare. You could try centering your background and including a coordinated background color, so that at the very least it still looks decent at apparently-überhigh-resolution screens like mine.

    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).

    crawdaddio on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    I'll probably implement your background colour idea, craw, thanks. I'll meet with the guy tonight, and if he decides to go with the general design I'll implement your crits.

    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. :)

    Orikaeshigitae on
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited April 2009
    Aw, no prob; when I can give crits to a great-looking design like that, it makes me feel like I'm actually a better designer than I really am (the trick is to be really wordy so that it sounds like I'm being thorough).
    Aw shit, I just gave it away, didn't I?

    crawdaddio on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    oh, that's just automatic photoshop hyphenation, which I hate. I'm going to have to figure out how to make that off by default.

    and 'great-looking design' makes me extremely flattered.

    Orikaeshigitae on
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited April 2009
    Well, you might still want to consider some sort of hyphenation, just so that the right side doesn't get too ragged (or so that the spacing doesn't go crazy, if you go justified); really, I wish web design programs did have automatic hyphenation (even though I imagine it would come at the expense of the legibility of the source text), just because the raggedness (or spacing) is something that needs to be considered more on websites, especially with narrower text widths and more textual content; for instance, I don't think you'd have to worry about it for the news page. Something to consider, anyway, if ever you feel particularly masochistic.

    crawdaddio on
  • NotASenatorNotASenator Registered User regular
    edited April 2009
    The hyphenation on the example up there means you end up with "rearranging" becoming "rear-ranging", which I find very funny.

    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.

    NotASenator on
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited April 2009
    NAC, that does remind me of something I read in a book about page design (of the non-web variety), saying essentially that, that especially when it ends up obfuscating the meaning of the words, the optimal hyphenation isn't always the one you should end up going with.

    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.

    crawdaddio on
  • NotASenatorNotASenator Registered User regular
    edited April 2009
    crawdaddio wrote: »
    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.

    NotASenator on
  • TonkkaTonkka Some one in the club tonight Has stolen my ideas.Registered User regular
    edited April 2009
    As good as your stuff may be Orikae, I will never forgive you.

    Tonkka on
    Steam: evilumpire Battle.net: T0NKKA#1588 PS4: T_0_N_N_K_A Twitter Art blog/Portfolio! Twitch?! HEY SATAN Shirts and such
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    Thanks a lot, dickass.

    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.
    kimbgtest.jpg

    Orikaeshigitae on
  • ManonvonSuperockManonvonSuperock Registered User regular
    edited April 2009
    I think the contrast between the text and the background is too low. reduced visibility and all.

    client some korean dude? what does he do? what is the site for?

    ManonvonSuperock on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited April 2009
    He's an artist. It's a portfolio website. He's giving me his portfolio today. I'll work on the contrast.

    Orikaeshigitae on
  • ManonvonSuperockManonvonSuperock Registered User regular
    edited April 2009
    that's cool. That's the hard thing with working with a patterned roughly middle gray background, white isn't bright enough and black isn't dark enough for it.

    ManonvonSuperock on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited May 2009
    alright, guys. here's the website. i want your opinions on it, since this is my first and i want it to be balls awesome to attract clients.

    www.dongkyoona.com

    Orikaeshigitae on
  • bwaniebwanie Posting into the void Registered User regular
    edited May 2009
    Orik, some things i noticed, (i mean you did ask for it right?)

    - 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.

    bwanie on
    Yh6tI4T.jpg
  • HeartlashHeartlash Registered User regular
    edited May 2009
    I suggest you try increasing the line height in those paragraphs a bit. They appear dense and it would make them much easier on the eyes.

    Just add line-height:16px to the css.

    Heartlash on
    My indie mobile gaming studio: Elder Aeons
    Our first game is now available for free on Google Play: Frontier: Isle of the Seven Gods
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited May 2009
    I. are you sure? 16px is 1em, and it looks pretty terrible like that. I used 1.1em and it looks a bit better.

    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.

    Orikaeshigitae on
  • streeverstreever Registered User regular
    edited May 2009
    Orik,
    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.

    streever on
  • streeverstreever Registered User regular
    edited May 2009
    and,
    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.

    streever on
  • HeartlashHeartlash Registered User regular
    edited May 2009
    I. are you sure? 16px is 1em, and it looks pretty terrible like that. I used 1.1em and it looks a bit better.

    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.

    Heartlash on
    My indie mobile gaming studio: Elder Aeons
    Our first game is now available for free on Google Play: Frontier: Isle of the Seven Gods
  • streeverstreever Registered User regular
    edited May 2009
    Heartlash: he's using relative values, so he thought he had 16 px because he used 1.1 em, but that's really a fractional value of the parent size, which is the current font-size--which is about 12.8, so he's getting some weird number instead of 16. That's where the confusion is. Also, he is using line-height in the styles, so he does understand the concept I am sure :).

    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.

    streever on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited May 2009
    thanks! no offense taken, i'm actually really glad you posted - this is exactly the kind of crit i'm looking for.

    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.

    Orikaeshigitae on
  • NappuccinoNappuccino Surveyor of Things and Stuff Registered User regular
    edited May 2009
    I like the site a lot . It might be a touch too grey ( though, i'm seeing this on a 1680-1050 and the far background isn't that interesting). Could you give an two or three options for choosing the basic aspect ratio?

    Nappuccino on
    Like to write? Want to get e-published? Give us a look-see at http://wednesdaynightwrites.com/
    Rorus Raz wrote: »
    There's also the possibility you just can't really grow a bear like other guys.

    Not even BEAR vaginas can defeat me!
    cakemikz wrote: »
    And then I rub actual cake on myself.
    Loomdun wrote: »
    thats why you have chest helmets
  • SporkAndrewSporkAndrew Registered User, ClubPA regular
    edited May 2009
    Looking at your code you can't do this:
    <li><a href="index.html"><img src="home.png" width="255" height="29" alt="Home"  /></a></li>
      <div id="copyright">All text and images copyright Dongkyoon Nam 2009. Design (c) karlpdesigns 2009.</div>
      </ul>
    

    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:
    <h3>Recent News</h3>
    <br /><h5>05/05/09</h5>
    <p>Website is live! Feel free to take a look around.  Make sure to check out my gallery as well!</p>
    

    You shouldn't really need the <br /> there. By default headings of different numbers will wrap onto the next page anyway.

    SporkAndrew on
    The one about the fucking space hairdresser and the cowboy. He's got a tinfoil pal and a pedal bin
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited May 2009
    Man, with crits like these, we're going to have a tough time justifying our "we're not programmers" line in the rules.

    Anyway, I suppose I'll start with the general and less code-based, and move into the code from there.
    • The first thing I noticed is the image-based text; I know he specified the typefaces, but is there any way to make them look a little bit less distressed? The list typeface is kind of hard to read, but I suppose it's passable enough; the typeface for the title, though, seems to go a bit too far, as the G barely reads as such.
    • The second thing is the border background; it's been mentioned before, and I'd like to second the disapproval. My problem is that it's too textural; that is to say, while the inner background seems flat, and works well that way, the outer one has a bumpy look, and it clashes with the inner one. It doesn't help, additionally, that they seem to be roughly similar in overall contrast, but also seem to be slightly different temperatures of grey. I would suggest something perhaps a little more complementary, and a lot more subtle (which, I suppose, might be a bit tricky to pull off).
    • Getting a bit more into the code side of things, I don't like the way you've got the paragraph indents working. I mean, they're fine per se, but they don't work in the places where you've got a single line of text (where the lack of context makes it seem like the whole body is indented, which in turn hurts the sense of stylistic continuity between pages), and look even more out of place in the contact form. You might fix that with a separate paragraph class without the indent for those special cases (and probably by getting rid of the paragraph tag altogether for the form; semantically, it shouldn't be there). Personally, though, I would suggest looking into an unindented first paragraph as a rule for your text (which you could accomplish with a first-child pseudoclass, but since I don't think support for that is very universal yet, you'd probably be better off with a separate class); there's precedence in printed publication (and I know they have a good reason for doing it, but I can't remember what that is), and it would preserve stylistic unity more fully.
    • Other people have discussed the leading; personally, I might look into increasing it even more, and seeing if that further improves the readability. My guess is that it will, especially since your text body is wider than it ought to be for optimal readability (though that itself isn't a crit, since having the proper width is only really practical in books). It would come at the expense of having unified/coherent-looking paragraphs, though, so it's up to you where you think the best balance would be.
    • Something not entirely design-related, but you ought to have something indicating that the CV is a PDF file, as a courtesy to people who want to browse without launching Adobe Reader (also, you might want to consider having it open up in a separate window).
    • Getting into the really nitpicky territory, you might want to at least consider having some of the acronyms spelled out with an acronym or abbr tag and a title attribute, for screen readers. Ultimately, the amount of attention you want to give accessibility is, I will admit, somewhat limited by the fact, mentioned in ND's thread a while back, that those who are going to be browsing an artist's website are somewhat less likely to be unable to see, but it often doesn't hurt to err on the side of caution.
    • In the About section, the hyphen at the beginning of the last paragraph might look better as an ndash or an mdash. Up to you. In the same vein, you could look into ldquo and rdquo instead of quot, as long as you're encoding the symbol.
    • Most of the code stuff has been mentioned, I think (I'm specifically thinking of SporkAndrew's suggestions, which I second), and this omits the CSS, which I haven't looked at, but I would add the exceedingly trivial suggestion that double spaces at the ends of your sentences are unnecessary. That isn't really worth fixing, though, unless you're really hurting for filespace.

    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.
    • You've got Calibri before Arial, and yet the site renders with Arial; can't figure out why, but if I've got time, I'll copy the relavent files and play around to check it out.
    • You've also got a specified hover effect that isn't playing out in the site (though I would advise against making a hover bold, anyway, because it can wreak havoc on the layout). Again, not sure why.
    • Not (directly) CSS related, but your background goes all the way down the page in IE, but not in Safari for Windows or Firefox (there's more space in the bottom with Safari than with Firefox). I don't know if that's intentional, but I thought I ought to point it out.

    crawdaddio on
  • OrikaeshigitaeOrikaeshigitae Registered User, ClubPA regular
    edited May 2009
    oh, wow. thanks, guys. I've got a lot to work through :P

    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.

    Orikaeshigitae on
  • crawdaddiocrawdaddio Tacoma, WARegistered User, ClubPA regular
    edited May 2009
    Ah, that's why; use a colon instead of a dot, because they're pseudoclasses.

    EDIT: And while it shouldn't be causing the problems with Calibri, your h1 font-family definition needs some quotation marks.

    crawdaddio on
Sign In or Register to comment.