Jump to content
Rinaldi

Section for webdesign wip feedback?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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 post-88-0-93353500-1422533823_thumb.png

  • Like 2

Share this post


Link to post
Share on other sites

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 attachicon.gifScreen 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?

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

:lol:

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Greg Lumley
      Hi! I'm busy building a blog into my first test/learning/free/clients/project 😁

      I've had a look at all the blog examples and there seem to be different ways of doing it. (the point of Processwire, I know)

      It seems this is generally how it's done:
      Master Blog Page
        - Blog Post Child Page
        - Blog Post Child Page
        - Blog Post Child Page What I'm particularly interested in is the Categories. What would you advise?
      Repeater Field?
      Tags?

      I think I've even seen Categories set up as Children of a master Category page too. The pages were hidden containing no 

      What would you recommend? 

      Thank you! 
      Greg. 

      Bare with me, I'm bashing my way through while I learn. 
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By Claudio
      Hey guys,
      this year I started my own company doing webdesign in Karlsruhe Germany and I wanted you guys to have a look at my site and references and give me some feedback about my webdesign:
      Claudio Emnet Webdesign Karlsruhe
      Also I would love to hear how I could benefit from processwire. 

      Edit: It's a year later and i totally forgot about this post! Thanks for your feedback, I made most of the changes. Still trying to improve with every project!
    • By mscore
      Making a minimalist site with Processwire is pure pleasure. Here is one for my photography.
      http://www.mikael.siirila.net/
      Enjoy

    • By Tony Carnell
      Hi all,
      I'm a newbie to PW but can definitely see the power and potential that it holds, but I have a question that I'd like your guy's opinions on to help steer me down the best path.
      I am working on a project to make a searchable catalogue of a certain type of dam, each one having in excess of 20 criteria that describes them, including name, owner, country, dimensions, construction dates, construction methods and statistics.
      I've imported the dam database into PW and it's created a Page called 'dams' with 497 children for all the dams (forgive me if I'm not using the correct terminology, as I say I am a newbie!). It's also created fields for all the different criteria.
      What I'm wondering is if this is the best way forward?
      When I take a look at the backend of the Skyscraper Demo site (which has the same kind of functionality that I'm hoping to employ) I see that there's separate pages for Architects and Cities.
      Is there a benefit in storing the information like this?
      Does it make the search functionality on the front-end more powerful or easier to create?
      Would it be best to have a separate page for Dam Owners and Countries for instance, or is having them simply as fields within the dam page enough to allow me to work with them easily?
      Thanks in advance for any help or advice you have to offer, and if there's any more information you need to know, just ask.
      Tony.
×
×
  • Create New...