Hey guys working on a new website for a client… This is the login screen to the website - do you think its OK?
To me it looks very nice ! Would love to see what’s next
Thanks I do appreciate the comments
A few things: If your browser isn’t at the max width, the background if off-centered. This is easy to fix for it to look good in any situation.
The title is a bit stuck to the top, I’d put a minimum of 40, 50px.
Same for the popup, you can let its content breathe a bit, I’d apply a 40px padding on it.
the centering of the background interests me… How would you achieve this on a fixed background?
I used the center preset… Does it do the same ? Let me know
Simplified the structure to display it all better. You where right I was over complicating the design! Does this look better now?
Lol, stupid me, I’ve never clicked on this button… but there’s nothing writen on it!
Yes it does the same but also centering in height… it depends if you want to see the exact center of image or if you want to continue to see the head of the guy. In your case, I think it’s preferable to not center in vertical but that’s a subjective decision.
Breathing is better (:
If you want to continue on simplification: your round corners are inconsistents and too wide. Try to stick with one value for the boxes and fileds and one value for the buttons. Maximum value should be 5 if not 4. try 4 on your popup box, 3 on your fields and 2 only on your buttons and see if you like it (:
Also, for popup and title, try to increasing transparency on your shadow, until you almost don’t see it… see if you like it. (Good shadow is one you notice only when passing it on/off/on/off… not one that you immediately spot, unless you’re working on a real 3D thing.) All that is subjective of course.
Yup I used the top center ^ so that it only affects the horizontal
I like what you did for the tablet view, but I’d like to see that “fit” frame also on my desktop.
This not so much [linked due to large image]
If you’d made some adjustments, it could look like this. Something I’d like much more.
Some of my changes:
- Opacity of white background to 0.9 Remove most padding
- Make input fields fixed width
- Texttransform labels to uppercase
- Fixed width (100px) on buttons [I’d change colors for clarity if you can, or opacity if it conflicts with styles]
Yeah I have played with it so much that the background got screwed In fixing that I realise the biggest problem here is the lack of full coverage for media queries. The idea is to have the panel sit in the tablet where reasonable to do so. But the media queries are fixed in webflow.
I wish we had an option for custom media queries as well. Or a way to replicate media queries in the same way as say chrome does… Is this coming (I dont know)
I don’t fully understand as I’m not familiair with Chrome’s replication. We can do something like that by using custom code with @breakpoint right? But you probably mean something else?
do you mean we can add as many media query declations as we like? Have I missed something here as I thought we can only do monitor, tablet and phone?!?!?!!?
Sorry, I misunderstood. There aren’t. Unfortunately. Yet.
But you can manually override it by adding it to the header if you want to do some trics such . But that’s something you probably know. And it’s not nice to do
See the last post in this topic.
I tried that too before,… no luck.
That’s what I thought I am hoping this is going to be implemented in the next revision of WebFlow