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/

Websighting

MaydayMayday Cutting edge goblin techRegistered User regular
edited July 2012 in Artist's Corner
Hey guys. I'm making a webpage for a cosmetics salon/hairdressers
I got to the technical details (font choices, padding sizes, div proportions etc.) and I'm feeling a bit overwhelmed. Do you have any tips?

(please excuse the moonspeak)
finessescreenshot.jpg

The test page itself can be viewed at http://salonfinesse.pl/galeria.php but the css are a bit messy for now (trying out lots of things...).
The left part will be a list of buttons for some pages and an animated vertical banner for others.

Mayday on

Posts

  • rtsrts Registered User regular
    The drop shadow around the entire thing is a bit too much. I would make that smaller. Remember that as a designer your job is first and foremost to draw attention to the product or service as effectively as possible while still making it look good. Don't try to impress people with how good looking you can make something, impress people will how effective you can make something.

    Typefaces that are difficult to read are not a great choice. As for the what I am assuming is Polish... it makes it really difficult for me to give a real critique. Have you ever gone to a Chinese or Japanese website? It almost always looks like complete shit. But to people who can read it fluently it probably doesn't look so bad. The way our brains work we really need to be able to read text to know how it truly affects our subconscious.

    The top swirly stripe thing looks nice, and I think your colors are probably pretty good for this purpose (restaurant?).

    skype: rtschutter
  • MaydayMayday Cutting edge goblin tech Registered User regular
    edited May 2012
    @rts
    Thanks for the comments, cake! I've translated the text quickly.
    Some of the elements were not really my choice. The client insists on reusing the typeface from his logo (despite my protests regarding its legibility).

    It's for a beauty shop/ hair stylist - those photos are just placeholders. I came up with a bunch of colour schemes but they insisted on using the colours from their studio- black and beige. Not being sure if it works, I tried shifting it a bit, but this is as far as they agreed to.
    You're right on the shadow... I looked at the no-shadow version and thought it was too sharp, but then I went overboard I guess. Here's both versions (small and no shadow).

    less.jpg

    none.jpg

    And here's a little something I'm working on for my personal website:
    artgoblin-nobackgr.jpg

    Initially I was aiming for something with a more visible background texture ( http://artgoblin.pl/upload/artgoblin-backgr.jpg ...go free deviantart textures? no, not really...). Now that I'm done, I'm starting to think that it's too cheesy.
    I hope the design works, but I also can't help the feeling that it's very... stiff? Not sure how to describe it. Should I get rid of the frames?

    Mayday on
  • NibCromNibCrom Registered User regular
    You made the grid, which is good, but now I would suggest that you break it. Maybe something like this:

    maydayweb.jpg

  • MaydayMayday Cutting edge goblin tech Registered User regular
    edited May 2012
    That looks good! How about this one? http://artgoblin.pl/upload/grid.jpg
    very similar, I just wanted to have something on the top to close the composition.
    I tried messing with the content boxes but looks like removing any of them makes things worse.

    Mayday on
  • bebarcebebarce Registered User regular
    I'm far from your talent in design, but it would feel like closing the composition with empty boxes would be a large waste of top vertical space which is in high demand on any website.

  • amateurhouramateurhour One day I'll be professionalhour The woods somewhere in TennesseeRegistered User regular
    Bebarce, those boxes are for advertisers, they (most likely and hopefully) wont just be empty boxes up there for the finished product.

    Not that I'm trying to speak for mayday, sorry about that.

    I like the updated grid you linked to mayday.

    are YOU on the beer list?
  • MaydayMayday Cutting edge goblin tech Registered User regular
    edited May 2012
    Hah, yeah, I'd find something to put in there.
    However, considering the humongous headers you can find on sites recommended as "great design", 250px of header looks pretty timid...
    I'm gonna try a few different designs anyway, I'm discovering great and unexpected fun in this work. Thanks for your input, guys!

    Mayday on
  • MaydayMayday Cutting edge goblin tech Registered User regular
    While I'm rethinking those dumb designs, how about a dude you're all fed up with? I'd like to turn it into a finished piece so some critique would be appreciated. I tried to focus on tips you guys have given me before (especially AoB) but it might be I've forgotten some crucial stuff, so feel free to hit me.

    sketch3.jpg

  • FANTOMASFANTOMAS Flan ArgentavisRegistered User regular
    It may be early in the development, so what I say may not be really useful, but here is all I can spot.

    The black lines look pretty unfinished, for example in the left hand knuckles, and the left leg, above the boot.
    The other thing, that could be a matter of personal taste, and maybe its just part of your design.... but... maybe the hoodie could bend a bit, it looks like its heavy and made of cloth, so you could try to make it "rest" more... you know, look at the Cry3 engine video for physics reference :O (I am totally obsessed about it since I saw it, sorry). But.. cloth=bendy.

    Hopefully someone else will come and give proper advise on the more complex stuff.

    Yes, with a quick verbal "boom." You take a man's peko, you deny him his dab, all that is left is to rise up and tear down the walls of Jericho with a ".....not!" -TexiKen
  • MaydayMayday Cutting edge goblin tech Registered User regular
    edited July 2012
    Ehhhhhh... shortly after starting that picture I lost all energy due to being swamped with work. I should go and finish that this week.

    In the meantime... another website, sadly it's in moonspeak once again :/
    winasolar_style1.jpg
    I might have been a bit trigger happy with the colours. This is a sketch for now (the fonts, margins and paddings aren't finished).

    After incorporating the client's wishes (and a few more of my tweaks) it became... bland?
    winasolar_layout8.jpg

    I think that column shouldn't be so dark? (that's a remnant of trying different versions out, so I could probably change it).
    Any comments on these?

    Mayday on
  • srsizzysrsizzy Registered User regular
    Yeah, I'd lighten the dark bar. I like that the colors match the pallet in the photo of the solar panel, it translates a theme really well. It's definitely an effective enough layout for the business.

    BRO LET ME GET REAL WITH YOU AND SAY THAT MY FINGERS ARE PREPPED AND HOT LIKE THE SURFACE OF THE SUN TO BRING RADICAL BEATS SO SMOOTH THE SHIT WILL BE MEDICINAL-GRADE TRIPNASTY MAKING ALL BRAINWAVES ROLL ON THE SURFACE OF A BALLS-FEISTY NEURAL RAINBOW CRACKA-LACKIN' YOUR PERCEPTION OF THE HERE-NOW SPACE-TIME SITUATION THAT ALL OF LIFE BE JAMMED UP IN THROUGH THE UNIVERSAL FLOW BEATS
  • NightDragonNightDragon 6th Grade Username Registered User regular
    edited August 2012
    These all seem a little...dull? In color scheme and layout. I think you could make them look much nicer by introducing more white space, and dropping the cell borders that you seem to have everywhere. Try checking out some "website design" sites - sites that show galleries of nicely-designed webpages. They can really be inspirational in terms of layouts, and give you a better sense of when/why designs work.

    I went through some of my bookmarks and then Googled some additional references...try these:

    http://creattica.com/css/latest
    http://www.webcreme.com/
    http://www.cssheaven.com/
    http://cssline.com/
    http://www.cssmania.com/
    http://bestwebgallery.com/

    How many fonts do you work with, also? Looking at the script font you have, it looks very...standard/basic/free, I suppose? The letter tails don't even line up. There are a huuuuge number of free font websites out there where you can download fonts that look much more refined and unique. You also seem to be recycling the same layouts and same base font for all your designs, when you could change them up quite a lot and make each look unique and engaging.

    When you're looking at the references, also think about what the design is saying about the website's subject. How does a website about a fashion line define itself? Does it exude a sense of elegance, wealth, grace? Is it funky, hip, and fresh? How does it relate to what it's trying to sell? Same goes with things like "green", nonprofit, earthy sites. What color schemes are they using on the websites? What is the psychological impact of those colors? If you research things like logo designs, there are usually a set palette of colors that designers use for certain industries, and there's a reason for that. Same thing goes with fonts. Different fonts that are in the same "family" can still give you different impressions of the brand/topic of the site.

    Script-Fonts-Samples2.jpg

    The "cheap-looking" fonts often have design elements that don't feel very polished - like bad kerning between certain letters. It's worth it to look at a bunch of examples before you settle on one that has the proper "feel", and looks well-made.

    For color schemes, the examples you find should be a nice start, but you might also want to look at the site http://kuler.adobe.com/ ...which can be good for inspiration, if nothing else. :) Sometimes the schemes are a little too intense or subtle to use exactly, but they can be a good starting point. Just be sure to use the left-hand side to look up "most popular" and "highest rated".

    NightDragon on
Sign In or Register to comment.