Personal Portfolio Website-Feedback requested

Good evening

I’ve got my personal page nearly finished: link-to-page
The code is still a bit messy, due to several developement changes, but I think it’s time to get some feedback mainly for everything concerning the layout-design, the use of fonts and images and the usability before going further.
Off course a part of the images and texts are only placeholder for the moment.

Here some questions as starting point for some feedback:

-What do you think about the layout-design?

-Is it in general a good, appropriate layout for an artist website?

-What do you think about the very simple color theme?

-Are the fonts legible?

-Do they match the simple and minimalistic layout?

I’m not sure if it would be better to have 1 or two more fonts for better highlighting difference in navigation, image-captions and info-text.
What do you think about that? I’ve already tried with a serif font for the info-text parts, but i didn’t feel very happy with.

-Does the layout work properly on different browsers and screen resolutions?

-Even on mobile devices?

Thanks for your time!

2 Likes

Hi mimac,

I think you have a good start here. Here are some initial thoughts going through your website:

  • Has a nice simple color theme and design
  • The grey letters are difficult to read. You can use Webaim’s color contrast to see if the contrast is at a good standard.
  • Apple also uses a dark background on their product pages, so you could also use them as inspiration.
  • Make sure your logo in the top-left corner links back to your home page
  • If you want more differentiation for your text and hierarchy, there is a list of visual design concepts that can help, like typography, contrast, color, and scale.

Hope this help!

2 Likes

Hi athomasg
thanks for viewing, for your thoughts and for the links. They seems to be exactly what i needed in this stage of development, with my questions concerning these themes.
The logo-link was off course in my plans, I just forgot it. But things like this are also a reason to show the own work to somebody else.
Have a good night

1 Like

Overall, I like the site.

Just one thing though, gray on black is difficult to get right.

I believe the color of body text and other elements like the nav could be brighter, I find the body a bit uncomfortable to read and the nav a bit gloomy.

The nav and body could be in the range of #aaa and nav hover #ccc. The nav hover could be bright in the range of the logo.

I think so. :slightly_smiling_face:

1 Like

Hi Erik
thank you. You are right. I really need to play around with some body/text/nav color-combinations to reach better readability. i think the header with the topic link on top of this page could also be a good reference.

1 Like

Happy to help!

improved the contrast:

before: TEXT+BORDERS: #7c8089 : BG:1A1A1E -> CONTRAST= 4.38:1

new: TEXT+BORDERS: #99A0A3 : BG:1A1A1E -> CONTRAST= 6.53:1

1 Like

Try that for the nav too, then maybe brighten hover a little. :thinking:

changed nav-color to logo-color and hover-color to somewhat brighter.
Better now?

1 Like

Much better, if not perfect, IMHO. :slightly_smiling_face:

Side note:

What is the purpose of the ruler/line between the pictures and their captions?

Is it a misplaced divider to the text below?

I’m a bit confused by it. :blush:

The ruler should be an optical divider between pictures and captions.
Maybe it should be either closer to the pictures (10-5px instead of 15px) or then as you mention be a divider to text below.
Or totally let be out?

Seems contra productive, could rather connect the caption to the picture if used as a divider to the text.

Yes, as some pictures lacks a similar caption and some pictures doesn’t have the ruler, I think it could be totally left out.

Ok, I’ ll try without ruler.
My original logic was that the ruler should divide but also connect the caption to the carousel-pictures, like something appended, belonging to them and off course only for the carousels, because of the pictures-related animation of the caption. For all others pictures there is obviously no need for a ruler.

1 Like

What made it hard to understand the function of the ruler, was the Lorem Ipsum meaningless nature. It gave no hints to if the texts were connected to the carousel pictures or if they were unrelated.

I still can’t decide if there could be a use for a ruler to keep the texts divided. So maybe keep the ruler possibilities in mind. :thinking:

The placeholder-text “Lorem…” is planned to contain further explanation on the content of the carousels, e.g. for the first in index.html about current and forthcoming exibitions, the second would then be for current, new works and some more informations about them, as a kind of supplement to carousel-pictures and captions.

Then there’s really no need for the rulers to separate the texts from the carousels. :slightly_smiling_face:

So, now:

  • everything is without rulers (they are still there, but in bg-color, taking them away will cause some adjustments to other things too, will do this later).

  • made distance-adjustments to captions in galery, to be similar to all other captions.

  • improved, brightened the hover color in nav a bit more.

Are these things ok now?
Something else remaining?

Not sure if in “Galerie” the ** + **icon is enough to signalize there is a function on it or if it needs a hint/note to make it clear.

Also not sure if the tables-layout in “Biographie” is ok or if there could be possibly a better solution.