Website mockup

[Nic727]

Hi,

 

I will start my website from scratch using webflow really soon, but for now I'm just making the overall design in Affinity Designer (illustrator alternative). I was thinking about getting a WordPress template first, but WordPress is not that good when you want something specific and codes can be a mess when you change a lot of things. That's why I think webflow is a good idea (but unfortunately, I will have to host somewhere else than my current website ). I'm creating a website about some design/web work, but also some of my best photography.

Well, here I start and I would like your feedback about if it can be a good user experience and what could be improved.

 

HOME

Option 1

Option 2

The first option is much more about the overall look of the website (you will see images bellow), but I thought it could be nice to have a good landing page with a fullscreen image instead. What do you think?

PORTFOLIO

Here is a page of my works/albums. 

After that here is what an album page will look like. Just no sure if I keep square image, masonry style (like mockup) or masonry with spacing. What do you think?

I also thought it was a great idea to add a little description on top about where it was shot and when.

Also, when you click on an image, not sure if I use a normal lightbox or something else. Don't know if Webflow allow custom lightbox. Was thinking about a full white background with a camera icon that show you some infos about the camera and location. Do you think it's possible? Not sure how different page for each image could work since it have to load them every single time...

BLOG

For the Blog part, I found a nice template with this kind of style and I thought it was looking very great. So I decided to inspire my design from that. I think it's easy to understand that most recent is on top. I'm thinking about making my own pages for blog or redirecting to a subdomain using Exposure.co which is good at making clean and minimalist blog pages.

 

Maybe I will make images a bit bigger and every informations on the bottom-left side? Or keep it like that, but remove the green color and keep white?

ABOUT

Was thinking about using a colored button matching the logo and the current page indicator, but should I just make a black and white button?

CONTACT

Same thing about the button. Not sure...

Edited April 1, 2018 by Nic727

[Nic727]

Here is another homepage.

Waiting for your feedback before starting the real thing!

 

Personally, I really love the template this guy used thierry-bonnaudet.com/ but I want to create my own thing. Just need to figure the lightbox I would like to have... If you know a plugin or how to do that, I would appreciate that. My idea is to click on an image, it show in fullscreen into a lightbox, but you can click on a small camera icon to show a bubble with informations (Or blur the image and show informations over it).

[Nic727]

I made some ajustements to my design.

So here is my very final home page design. I will keep this one, just not sure if I add a Works section. I know I will add photography to my website, but I don't really have a lot of works to show. Most videos (if I do some) will be in my blog or inside albums. 

 

Here are two ideas for the albums page. First idea was to make an almost full width album with parallax scrolling, but I think it will just be a bit annoying since my idea was to have a hover effect to show name of the album above a blurry pic. So I think it wasn't great, but what do you think? Should I just keep the hover effect always ON (with or without blur effect)?

 

The other idea is to make two columns with albums, but wasn't sure if I was keeping a parallax effect or not.

 

[OzzyTheGiant]

I like what you did with the home page adjustments but if there's one thing that keeps getting my attention is the home page buttons (album, works) on the middle of the page. Yes they match with the rest of the theme but from a user experience perspective, it's usually a good idea to make these buttons as noticeable as possible to persuade the reader to click them, so if it was me, I would make solid colored buttons instead of the lines, or if you want to keep them that way, then another alternative, but a bit less recommended, is to put the title, call-to-action, and buttons inside of a semi-transparent, white box with some padding. Again, don't recommend this too much as it may take away from the photo if that's what you're trying to showcase. Just my 2 cents.