Section for webdesign wip feedback?

[Rinaldi]

Hey guys, is there a section in the forum for webdesign works-in-progress, to ask for feedback/critique? If not, can you recommend me a forum with good constructive feedback from strong designers?

I am working on a minimal site for a makeup artist and can really use some feedback. My weak-points are typography (definitely an art) and emotion. The latter probably stems from me being a typical Asian dude who is discrete/private by nature, so expressing emotion doesn't come naturally to me.

http://www.rinaldi.nl/projects/nina/index.html

How can I make this more...alive? The intention is to keep it clean and minimal, but this looks plain dead to me. Anything that comes to mind, let me know. Thanks.

[kongondo]

I think you can use 'Off Topic > Dev Talk'

[Rinaldi]

  On 1/29/2015 at 11:08 AM, kongondo said:

I think you can use 'Off Topic > Dev Talk'

Oh really, sorry. I thought dev talk is for development only. Thanks. 

[kongondo]

In my book, web design is part and parcel of development  ...frontend development...

[diogo]

Looks pretty alive to me, but not because of the design.

Minimal doesn't mean undesigned. You have to be much more careful with the details when there aren't many of them. Don't add more details but pay special attention to the ones you have already. Work harder on each one of them, see very well designed websites and try to figure how they solved the small things, try different solutions for each detail.

From a first glance, I would say, choose a nice font from here —for example— http://www.haritomedia.com/best-script-handwritten-google-web-fonts/ the logo, and make it BIG, also get a nice badge for "new" http://freepsdfiles.net/web-elements/best-free-psd-badges-and-ribbons and get rid of those blocky spans under the images 

[Rinaldi]

  On 1/29/2015 at 12:17 PM, diogo said:

Looks pretty alive to me, but not because of the design.

Minimal doesn't mean undesigned. You have to be much more careful with the details when there aren't many of them. Don't add more details but pay special attention to the ones you have already. Work harder on each one of them, see very well designed websites and try to figure how they solved the small things, try different solutions for each detail.

From a first glance, I would say, choose a nice font from here —for example— http://www.haritomedia.com/best-script-handwritten-google-web-fonts/ the logo, and make it BIG, also get a nice badge for "new" http://freepsdfiles.net/web-elements/best-free-psd-badges-and-ribbons and get rid of those blocky spans under the images Screen Shot 2015-01-29 at 12.14.52.png

Thanks. I think it's better now http://www.rinaldi.nl/projects/nina/ (uploaded 14:15 CET)

I chose two nice fonts, Oswald for the logo, and Fjord One for everything else. Those blocky spans is an experiment, native to foundation so I tried to see how it looks, still playing with that. I chose for a darker background to avoid having that clinical white that everyone else in her industry seems to have, what do you think about that?

[LostKobrakai]

I would say "blocky" hits the overall point. But I've also some small things, which as diogo pointed out, do play a big role on minimalistic sites. 

- Try do find icons which are more balanced in weight / form, currently instagram has kind of a heavy stomage feeling, twitter is a little light and the email icon seems to be slightly off vertical centering. 

- The header can easily be bigger in the beginning (3-6 times of now). Maybe add a transition to the (smaller) fixed state.

- The logo/title of your first version was a unloved, rigid pice of letters. diogos suggestion is quite a nice one. For a make up artist this has to be a alive font in some way. Oswald is better than your first font, but it's still quite solid and in no means playful.

- Avoid all those borders your getting from placing the image into a box, followed by boxes. Let the images be themselfes, if needed just have a background for the tags. 

- The new background gradient looks quite modern. But in my opinion (really just a opinion) it's to widespread from a kinda dark gray to a really light gray. Maybe try it a little mor subtile.

[Rinaldi]

  On 1/29/2015 at 1:25 PM, LostKobrakai said:

I would say "blocky" hits the overall point. But I've also some small things, which as diogo pointed out, do play a big role on minimalistic sites. 

- Try do find icons which are more balanced in weight / form, currently instagram has kind of a heavy stomage feeling, twitter is a little light and the email icon seems to be slightly off vertical centering. 

- The header can easily be bigger in the beginning (3-6 times of now). Maybe add a transition to the (smaller) fixed state.

- The logo/title of your first version was a unloved, rigid pice of letters. diogos suggestion is quite a nice one. For a make up artist this has to be a alive font in some way. Oswald is better than your first font, but it's still quite solid and in no means playful.

- Avoid all those borders your getting from placing the image into a box, followed by boxes. Let the images be themselfes, if needed just have a background for the tags. 

- The new background gradient looks quite modern. But in my opinion (really just a opinion) it's to widespread from a kinda dark gray to a really light gray. Maybe try it a little mor subtile.

Should I use icons at all? Is that still considered up-to-date? I see them everywhere, is it wrong of me to think "I don't want to use them, because everyone else uses them."?

Bigger header? But still avoid the "Can you make the logo bigger?" syndrome, correct?

Yes, the default font of Foundation is Helvetica without any styling

So no border at all? I did that before and it felt the images were floating in air, does that sounds weird, I dunno :S

I will remove those small blocks, both out of aesthetics and the fact that on tablet and mobile, it shifted locations.

It even goes to white I will play with that more, I understand what you mean with having it more subtle. By the way, the gradient doesn't work on tablet nor mobile, is this normal? Ehhh...is this related to adding extra lines in the CSS with something -moz etc?

Thank you

[LostKobrakai]

You can still use icons. For social media links it's kind of standart. That's neither wrong nor is there a need to do it different. 

A bigger header has nothing to do with the statement "make it bigger, because we want to look great to the customer". You're currently pinching the most important thing on the website into a tiny headerbar. And if you choose to give the logo more care and it looks nice, than of course make it big, so everyone can see it. It's not that it would displace anything from importance. 

About the gradient: Fixed backgrounds don't play well with mobile browsers. 

[diogo]

  Quote

Bigger header? But still avoid the "Can you make the logo bigger?" syndrome, correct?

That syndrome belongs to clients, not designers don't let it influence you and make the logo as big as the design asks for.

Look at the size of the logo here, for example http://www.chicagolshirts.com/. The client didn't ask for it for sure

[Rinaldi]

  On 1/29/2015 at 1:56 PM, LostKobrakai said:

You can still use icons. For social media links it's kind of standart. That's neither wrong nor is there a need to do it different. 

A bigger header has nothing to do with the statement "make it bigger, because we want to look great to the customer". You're currently pinching the most important thing on the website into a tiny headerbar. And if you choose to give the logo more care and it looks nice, than of course make it big, so everyone can see it. It's not that it would displace anything from importance. 

About the gradient: Fixed backgrounds don't play well with mobile browsers. 

Ok, found out that styling the Foundation top-bar is a hell. Unfortunately, I am not skilled yet to change anything about it (haven't tried sass yet), I even can't get the font-size of the bar h1 to be bigger

I removed the gradient.

I know it's not a valid excuse, but I started learning code last month, and still trying to find my way and get into a good rhythm of doing a bit of coding every day.  

[Rinaldi]

  On 1/29/2015 at 2:03 PM, diogo said:

That syndrome belongs to clients, not designers don't let it influence you and make the logo as big as the design asks for.

Look at the size of the logo here, for example http://www.chicagolshirts.com/. The client didn't ask for it for sure

Haha yeah. Well, I have visited a gazillion websites in this beauty/fashion/model industry, and can't remember seeing anywhere a logo or navbar that is pretty big. Hence the reason for choosing to keep it small but readable. One of the references I took are them: http://www.clmuk.com/ small logo, small social icons, the images are most important. I can of course do it differently, just to be different, but styling that top-bar showed to be a hell. I started learning code only last month and still trying to find my way in all the related languages.

To be fair, I just remembered, I forgot to mention that I might replace the mail icon. The other two link directly to her social pages, but the mail icon would link to a new page with info about her, bio, etc. So that would not be using the icons consistently. Still thinking how to solve that nicely.

[pwired]

  Quote

The client didn't ask for it for sure

Just click in the menu on Home / Shop / Faqs / About / Contact

you will see that they all show up with the same size, font and

white color. It's been clearly made part of the design.

[diogo]

Just had a quick look at changing the height of the top bar. You're right, it is hell.

[Rinaldi]

  On 1/29/2015 at 4:44 PM, diogo said:

Just had a quick look at changing the height of the top bar. You're right, it is hell.

I also tried slicknav, the problem with that one, it will not be told to play nicely within my column structure, it will take the full viewport width even-though placing it inside a container with 80% width. I also wasn't able to put anything else in the bar.

I don't want to get ahead of myself, but to style that topbar, I might have to deal with sass sooner than I wanted lol.

[Rinaldi]

Yeahhh I got rid of that topbar, using a fixed hamburger instead: http://www.rinaldi.nl/projects/nina

I think this looks way better than earlier, and also the menu items looks nice with the Fjord type. 

[diogo]

Looking much better already

Edit: but the open menu occupies way too much space. In my screen I didn't see the social icons for instance, and I didn't tend to scroll down because I thought it was an overlay.

[Rinaldi]

  On 1/29/2015 at 7:50 PM, diogo said:

Looking much better already

Edit: but the open menu occupies way too much space. In my screen I didn't see the social icons for instance, and I didn't tend to scroll down because I thought it was an overlay.

Thinking of mobile-first, a visitor will scroll anyway

Changed the logotype, added some color, created a single-page test templ. which can be see by choosing it in the menu.