Jump to content
Sign in to follow this  
Nic727

web design mockup

Recommended Posts

Hi,

 

Following my other topic about my logo here, I decided to make a mockup for my future website. Bellow are all steps that I did to have the final idea of my website.

My website will be more about some travel blog and photography, but also other works I'm happy to share.

I first started with the idea of making a single-page website, but I wasn't happy with the design since it was a bit hard to integrate all the section I wanted seamlessly. Everything had a different design and wasn't happy with that. After that, I tried to go with the same kind of idea, but separating the different section in block like a menu.

mockup1.jpg

The problem is that I though the full screen image was a bit useless since there was already images bellow. So I decided to remove that and only keep the essential.

mockup2.jpg

Wasn't happy either, because I was taking too much space and wasn't really mobile friendly after all. It was just too long to scroll into different section.

I bring back my idea of full screen image and was thinking of a button showing a menu. Was a nice idea since when hovered, you was able to see another image. After that, I thought that maybe all this was a bit useless and was making navigation a bit more harder for everyone.

mockup3.jpg

Finally, I took this "menu" idea and just decided to make it in one beautiful page. So that is my final homepage! What do you think?

mockup4.jpg

 

Do you think I should move the copyright and social icon near the page border a bit more? Was thinking about that, because the actual logo and menu are closer to border.

 

Share this post


Link to post
Share on other sites

Last lay-out is the best, I think (would also do well in mobile, though I haven't actually seen it). The social icons and copyright notice should probably remain where they are, because the company logo and links are in the nav bar, while the site objects form a rectangle (in wide screen anyway), which visually makes sense.

Share this post


Link to post
Share on other sites
13 hours ago, isocult said:

Last lay-out is the best, I think (would also do well in mobile, though I haven't actually seen it). The social icons and copyright notice should probably remain where they are, because the company logo and links are in the nav bar, while the site objects form a rectangle (in wide screen anyway), which visually makes sense.

 

Thank you for feedback :)

 

-----

EDIT: Here is the mobile version mockup.

mockup.jpg

Share this post


Link to post
Share on other sites

 

I'm not sure anymore about the way I show the blog section on the desktop version. I think it would be better to have a full frame picture for the portfolio (with works and photo albums), but I think it's weird to have the blog section as big as the about and contact section. What do you think? Maybe the previous idea with a big portfolio and medium blog was better? Just wasn't sure about how much vertical it was for the blog part.

 

snip_20180325213838.png

 

 

EDIT:

What do you think about something like that? I want to see a bigger image for portfolio which can change easily or having a possible looping video here. I decided to reduce About and Contact section to a simple button. What do you think? Not sure about button color. Should it be darker? Black with white text? Smaller text?

 

snip_20180327163438.png

Share this post


Link to post
Share on other sites

Another change lol. I found a great WordPress template on the internet, but since WordPress template always look good until you mess with them, I just took some ideas from it and design something else for my website.

mockup1.thumb.jpg.fd08794f1deb61927a5a2e8fdf2e1ce5.jpg

mockup2.jpg

Since buttons already make you go to another page, should I remove the navigation bar from the Home Page and only make a fullscreen image? Only keeping navigation bar on other pages but Home? Or I can just have one button to Portfolio and the other one goes in the menu?

mockup3.thumb.jpg.3bfcf5748acdc034cabddffbd82680f4.jpg

mockup5.thumb.jpg.e0a43977ec2d8c8dc6be2ffa41ed11d8.jpg

Not sure where to put the logo/name on this final one.

Here is the template I found http://wp.themedemo.co/napoli/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×