Mess website review

Hollister11

Hi

I'm just messing around with some html and css, and would like opinions on this website. It's a website where the header is an entire image, and any information is display on top. I have never tried this before.

Any opinions (positive or negative) would be appreciative.

https://goo.gl/UYYZFh

sheesh

lovely picture

A bit sparse though. I did not see the navigation straight a way and the right hand corner on the nav felt jarring to me for some reason.

Maybe this minimalist look is what is being done these days I am a little out of touch.

You will be told to 'make the logo bigger!' As I only noticed the logo on the left hand side after I noticed the nav.

Hollister11

Hollister11 wrote: »

Hi

I'm just messing around with some html and css, and would like opinions on this website. It's a website where the header is an entire image, and any information is display on top. I have never tried this before.

Any opinions (positive or negative) would be appreciative.

https://goo.gl/UYYZFh

Note this is not responsive yet.

The website is also not near complete

claresmurf

sheesh wrote: »

lovely picture

A bit sparse though. I did not see the navigation straight a way and the right hand corner on the nav felt jarring to me for some reason.

Maybe this minimalist look is what is being done these days I am a little out of touch.

You will be told to 'make the logo bigger!' As I only noticed the logo on the left hand side after I noticed the nav.

I agree the logo needs to be bigger and the navigation needs to be seen easier. I'm not a fan of the writing in the centre. Will that be the only navigation your page will have??

sheesh

Hollister11 wrote: »

Note this is not responsive yet.

The website is also not near complete

thats fine! note that I was looking at it on full screen my eyesight is bad the right eye being particularly bad so your navigation is in edge of my field of vision.

(It might be just me )

Hollister11

claresmurf wrote: »

I agree the logo needs to be bigger and the navigation needs to be seen easier. I'm not a fan of the writing in the centre. Will that be the only navigation your page will have??

Thank you. Yes the logo needs to be increased in size.

Any recommendations for the navigation. I might try increasing the font size by a few points.

Hollister11

sheesh wrote: »

thats fine! note that I was looking at it on full screen my eyesight is bad the right eye being particularly bad so your navigation is in edge of my field of vision.

(It might be just me )

Any suggestions on improving the navigation? The easier it is to read, the better.

M.T.D

Coloured text on a coloured background is almost always harder to read than black on white.
One way to make blue text less prominent is to do as you have, and put it on a blue background
Increasing the contrast is the best way to increase visibility.
Perhaps put your nav elements in a containing div with a background colour.

tricky D

or see if text-shadow can work something out.

Hollister11

New domain @ http://coffeeshop.x10host.com/. If a mod could edit, that would be great.

I have enlarged the logo, and removed the gap between the nav and edge of screen. Nothing else.

I will get some work done over the weekend on this.

DefinitelyMarc

Try testing out bootstrap for some new ideas. JavaScript swankiness is where it's at brah: http://marclaffan.com

I started off with bootstrap and tweaked things I didn't like. Added a few things and changed others too.

Edit:

Free stuff here

Youtube video here that should help

Wheety

Hollister11 wrote: »

New domain @ http://coffeeshop.x10host.com/. If a mod could edit, that would be great.

I have enlarged the logo, and removed the gap between the nav and edge of screen. Nothing else.

I will get some work done over the weekend on this.

I'd use a sans-serif font. It's easier to read on a screen.


Also check out W3schools for some tutorials. Their nav bar one is quite good.


https://www.w3schools.com/css/css_navbar.asp

Hollister11

DefinitelyMarc wrote: »

Try testing out bootstrap for some new ideas. JavaScript swankiness is where it's at brah: http://marclaffan.com

I started off with bootstrap and tweaked things I didn't like. Added a few things and changed others too.

Edit:

Free stuff here

Youtube video here that should help

Yea I know bootstrap well. Used it for a college project last semester.

Tbh I want to get good a vanilla css, and js. So I'm trying to stay away from frameworks and librarys for learning purposes.

Hollister11

Wheety wrote: »

I'd use a sans-serif font. It's easier to read on a screen.


Also check out W3schools for some tutorials. Their nav bar one is quite good.


https://www.w3schools.com/css/css_navbar.asp

Cheers. Trying to improve my design skills.

Wheety

Hollister11 wrote: »

Cheers. Trying to improve my design skills.

That's a good site if you're starting out. Will give you a good idea of the basics.

Stackoverflow is good if you have any particular questions. Or here too

Graham

Hollister11 wrote: »

Any suggestions on improving the navigation? The easier it is to read, the better.

You're looking for a css scrim or css scrim filter. It should ideally put a soft grey gradient around the text to provide visual separation from the text and image.

Done properly you'll barely notice the scrim but it will be instantly obvious if it's removed.

Take a look at the bonus method in method 4 in this article: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

Hollister11

Updated the site a bit. It looks ok, nor great buts its heading in a decent direction.

If i can ask for a update opinion that would be great. Be brutally honest, that's the only way i'll learn.

Link to site

Graham

It starts off quite promising, I think the Nav links at the top of the page are too small.

Moving below the fold it almost looks like a different site compared to the top of the page.

Title 'The Cafe' looks out of proportion.

I'm not sure what's up with the latte art photo, something just doesn't sit right. Not sure if it's the size/position or adjacent content.

That content looks out of place too. For the style you have at the top I'd expect it to be larger, much more white space.

Content isn't responsive, it just floats over the latte art when the screen is resized.

The 3 reference blocks at the bottom look like they've been lifted wholesale from somewhere else. Not even remotely in keeping with the top half of the page.

On the plus side, the reference blocks appear to be responsive something that can't be said about the rest of the page.

Hollister11

Graham wrote: »

It starts off quite promising apart from the Nav links at the top of the page are too small.

Moving below the fold it almost looks like a different site compared to the top of the page. Did you complete it in a rush?

Title 'The Cafe' looks out of proportion.

I'm not sure what's up with the latte art photo, something just doesn't sit right. Not sure if it's the size/position or adjacent content.

That content looks out of place too. For the style you have at the top I'd expect it to be larger, much more white space.

Content isn't responsive, it just floats over the latte art when the screen is resized.

The 3 reference blocks at the bottom look like they've been lifted wholesale from somewhere else. Not even remotely in keeping with the top half of the page.

On the plus side, the reference blocks appear to be responsive something that can't be said about the rest of the page.

Thanks for feedback.

My design isn't good so I'm trying to improve it. If i was writing the code with the site already designed, I would be fine. but i'm trying to get good at designing sites from scratch on my own, which is where i'm having trouble.

The site is finished, and yes I see that the it looks like two different sites. i'll spend more time until I get it right.

Graham

You might find you make faster progress if you split the learning exercise in two.

1) put together your design. Using whichever graphic/mock-up tools you're comfortable with (or you'd like to be comfortable with). You can tweak this to your hearts content without having to fart around with html/css.
2) convert your design to html/css.

This also has the benefit of mirroring the approach taken by many (most) professional web shops.

You might also discover you prefer one aspect over the over. Maybe coding rather than design.

I know that's the case for me. I'd struggle to come up with a clean-sheet design.

Hollister11

Right, made some changes today. Before I didn't touch the project since I posted. I hope to have it completed and launched by the weekend

Hollister11

OK, i Have put some changes live. Site can be found here.

I still need to do the following.

Link nav to site
Add in footer/Map/Menu
Make 100% Responsive

Does the site feel a bit bare? Something just doesn't feel right, thoughts?

DefinitelyMarc

Try making the register section have an image that's the same size as the first image you see on screen and change your last section so that the text blocks are more centered.

Looking good so far!

Hollister11

DefinitelyMarc wrote: »

Try making the register section have an image that's the same size as the first image you see on screen and change your last section so that the text blocks are more centered.

Looking good so far!

Is that not overkill on big images.

Both text blocks, or just opening hours?

Hollister11

I'm absolutely lost in terms of how to further this design.

I have to finish the footer. But the site look very basic, and I have now idea how to enhance the design.

https://coffeehouse1.000webhostapp.com/

DefinitelyMarc

Hollister11 wrote: »

Is that not overkill on big images.

Both text blocks, or just opening hours?

I was gearing more for consistency than anything else, but if you think it wouldn't look good then don't change it of course.

There should be a few places on Reddit you can get better feedback from too.