Streaming live at 10am (PST)

Need web design help for new website

Hi,

Here are some mockup I did and I’m very confuse about which design to take :

Design 1 :


Header image going to the top

Not sure about the font. Should I have script font for title or keeping Sans-serif?

Design 2 :

Header image only around title.
Not sure about the font.

So here I have two general question :
What would work the best between header image?
How to better use fonts? (What should be script font and what shouldn’t?)

I also designed my homepage, but I have difficulty choosing what would work better for my website overall design. I want people to see one big background image and I don’t want text all over the place.

Homepage 1 https://postimg.cc/F7H2QbGy
Centered elements. Link for latest blog post. But I’m not sure about this feature since it’s weird to have this link if you didn’t post anything for the last 3 months.

Homepage 2 https://postimg.cc/bSNFp80y
Title and primary links on the left corner. No navigation, but if someone just want to contact me or know more about me, he will need to go in another page to go on the page he want. How can it be improved?

Homepage 3 https://i.postimg.cc/Nf075qwq/Homepage3.png
Same thing as #2, but centered.

Homepage 4 https://i.postimg.cc/yYrhRQVJ/Homepage4.png
Was my first idea to match the navigation on my other pages, but the nav on the right feel wrong when all the other stuff is centered.

I don’t need you to design things for me, but I just need advice on what’s working, what’s not and how it could be improved. The goal of my website is to show my photos and have a travel blog when I travel.

Thank you

Nobody want to help me in my design choice?

The first design with the vertical photo’s is the most appealing to me.
It’s more clearer and I can read the text better (you could add a little text-shadow to it though).

I’m not sure if I like the way you applied the photos. My eyes have trouble focusing on the photos. try to square up your images or use a masonry grid like pinterest does.

Same goes for the text below the header in Islands in Design 2, use it as you did Header image 1.

About your homepages: in homepage 2 the text is much clearer to see… However I like a navigation bar to be on the top of the page.But because your background image is grayish on top, the color white is bad to read… I would either add text-shadow to the nav-links… or add a little gradient on the navbar itself.

About your fonts:

Don’t use script fonts to much, they are hard to read. Especially for older people. I do not know what your target audiance age is. Do not use all caps either.
You have used them as navigation links for your blog, I think a normal font would be better for it. You could however use script fonts as a header on your blog. I do like the script font on the vertical photos, but maybe the subtext should be a normal font (but this is a personal opinion).

If you want to check if your text and colors are readable (also for people with disabilities) then I would suggest this: constract checker

And this one is a bit clearer to your own eyes: constrast-ratio.com

Some things to read:
when-is-it-acceptable-to-use-a-script-font-in-a-design

where-to-use-handwritten-fonts

7-web-typography-rules

pick-best-font-style-for-website

Edit: a tip I would also like to give you The blog image with the date, header and little text: the date looks more like a button to me. Which part of it is clickable?

I do like the amount of spacing you use in your hero’s. This makes it clear and readable!

Also: are these your own photographs? If so: Awesome!

1 Like

Thank you very much for the tips.

For the grid, I will probably square my photos or just add more space between them a bit like this guy did https://schmidchris.com/wildlife

What do you mean by “homepage 2 the text is much clearer to see… However I like a navigation bar to be on the top of the page.” Should I take the navigation bar from Homepage 1 and put it on top left/right corner or I should just move this text and buttons to the top left/center/right?

And script font only for header and the text of my rectangular image. Like in Design 2 with the header Islande with a script text, but with the little text bellow it in normal font. Did I understood it right?

For the blog date, I will change it and not make it like a button. I wanted something that was easier to see, but maybe I went too far lol.

EDIT: Not my photograph yet, but I have some great one that I will put after. Those images are free from pexels or unsplash, but I only use them to make it easier for me to design the website without having to choose the right photos I have in my computer (I have a lot).

Thank you :slight_smile:

1 Like

I think Chris is also using a masonry grid, but with lots of spacing. :slight_smile:

If I would design this: I would have the navigation on top right or center (add a little gradient to the navbar). I do something like this (don’t mind the bad photoshop, the square on nicolas was more to put that content it a bit higher and more to the right.)

And when or if you scroll down i would add nicolas duclos or the logo to the navbar.

Ok I understand the idea here. What if I add a hamburger menu on the homepage instead of repeating the photographie and blog button into the navigation menu? Like that it would be more subtile, but only for this page on desktop/mobile. Do you think it could work?

This is just a homepage without scrolling. It’s just an introduction. Like you arrive here and you see one beautiful image and you want to see more so you click the buttons or go in the nav.

Yes you did.

Hamburgers are more being used on creative websites (atleast in the Netherlands). And you are a photographer and creative, so it could fit you.
I think it could work, but you are also hiding information for your visitor. In a normal navbar your visitor can see what kind of services you provide. Like, if they want to contact you, they can click the contact button immediately. if they would like to read your blog or see photos they can click on it immediately. But with those two pages (blog/photography): With the buttons by Nicolas Duclos on the left you also take care of the fact that they can go to it immediately. You could also add a contact button next to it, so people can contact you right away.

Instead of a hamburger you could also make a ‘menu’ button instead. I’m a fan of those fancy hamburger menu’s but I haven’t added one to my websites myself. Haha :), but that is more because the target audiance are of a higher age and do not know technology like us younger people.

A helpful post about hamburger menu’s :smiley:

1 Like

The first design is great because it is more attractive to any user. The text is also easy to read. The design is simple yet beautiful. Here are some 2020 Web Designing Concepts you can check out and it also helps you out in selecting the design that best fits.

I did some changes. What do you think?

  • Final homepage with a hidden menu to keep other pages accessible and keep a minimalist homepage at the same time.
  • Changed the page’s title to all cap spaced letters instead of cursive.
  • I added cursive subtitle on the photo albums cards.
  • I kept cursive for photo albums and blog titles.


What do you think about those changes and is there something else I could modify?

My problem is with the fonts. I know I only should use between 2-3 fonts for a whole project. I just don’t know how to use my cursive font effectively. It’s a nice thing for the cards, but it was a bit too much to use it as main page title.

EDIT: I may remove all caps for titles. What about using it for the navigation?

This post was flagged by the community and is temporarily hidden.