Streaming live at 10am (PST)

The start of my website


#1

Hi all,

I hope you don't mind me posting this here, I was hoping you would give me an insight into if I am on the right path with my design. I've used Wix previously, so very basic stuff, I'm getting my head around the rules of CSS.

My old website is www.penguinsuithire.co.uk and my public site is http://penguin-suit-hire.webflow.io

Any feedback in this early stage would be much appreciated, whether I've missed certain elements or important structure rules you think I need to implement?

You can see the re-brand in progress! It will likely take the form of a few pages and be a lot clearer to see on mobile devices. No prizes for guessing which tutorial I watched a few times!!

Many thanks!

Mark


#2

Hi, thanks for sharing. And felicitations for not imposing a self starting video on you new site, I'm sure it will make people not hate you wink I'm joking a bit but you get the idea.

The new site is simpler in design, and fresher, wich for the market you address is a good thing.

There are two things you can work on. The first section is a bit confused, too many elements that fight for your attention, and too many styles. Also a lack of really defined primary call to action. Do you want visitors to browse the suit or call you? I guess browse the suit. So make this button bigger, and give it a solid color, for example a green you'll pick in the background and make a little brighter. Then behind the button, but closer, adn smaller, write something like "... or call us directly at 0800 666333".

Try to work the following block for it to appear like one block, one element. It means boldness, shadows etc must be quite the same.

Then the section below has a gray background, this is not festive, nor positive. Try to bring a little color, a little texture maybe (subtletextures.com ?). The last section is gray also, try to make it white with a sublte texture, or just white, or a bit cream, but not gray. Wedding site, nothing gray, but white, cream, egg...

I hope this helps smile


#3

Hi Vincent,

Thank you so much for taking the time to reply and give some really constructive feedback.
Awww I was just about to put the video on! wink In brief, I was asked to place the video on the homepage by the owner (the old school tailor in the video). I hate that video... two old-ish guys and it's a market for pre-dominantley 25-40 year olds! I am taking the business on as my own, hence it needs a big re-brand and making fresher.

I love the point about the call to action, that will definitely be changed, and thank you for the link to subtletextures.com, that's a GREAT find!!!

Is there a way you can add shadows to transparent .png icons without it boxing the whole block, or do I need to add the shadow in on Photoshop?

I'm glad I asked for feedback early, it will keep me thinking into the rest of the site, I didn't quite expect such a thorough reply and again, it's very much appreciated.

smiley


#4

Not really. You either chose to add a specific font from google font for example, and shadow it, or you do that in PS.

Yes, I'm convinced it is never too soon to ask for feedback smile


#5

You're welcome, great things need to be shared. And subtlety is the most difficult thing to achieve in design.

You'll maybe love this one too http://www.transparenttextures.com/

Use them on top of enlarged videos, for example... great effect.


#6

That's a good one also, thank you. I purchased the Photoshop plugin for subtle, and already made some changes.

Need to keep at the tutorials as there are lots I want to implement, but not sure how to do them yet, I've found some great stuff on the forums, but the coding side is waaaay over my head!


#7

Hello @markos84uk!

I like the general style of the site smiley And I guess you did use some textures already, which is really looks good. Keep working, and feel free to ask on the forum how to recreate some effects, that you can't understand yet.

P.S. Only pink font on menu on hover effect looks weird wink

Good luck,
Anna


#8

Good start! I think I would reduce some of the shadows/outer glows on the buttons. They seem a bit large, and in general I find that subtle is better with shadows. It shouldn't be readily noticeable, but should make it feel material. It's a delicate balance!


#9

Thanks Jordan and Anna.
I'd listed to change the pink hover links, they matched in with the original design a bit better.

I don't like the glow on the images at the bottom and buttons. I'd like the images at the bottom to have a grey transparent box over them on hover with some text in and link them to a gallery, but I don't know a way of doing that yet. Maybe a pop up gallery would be good, or just link to a second page, easy enough to continue navigating. If anyone has some examples they could point me to that would be great.

Thanks again smile


#10

Hey @markos84uk. I did something similar on my portfolio site at http://newanglecreative.com, under "Portfolio." It's simply an overlayed div block, set to absolute positioning and to 100% width and height. Then you can include any text and align as needed.


#11

#12