Might look like a simple contact form. And it is, but the challenge is/was to find a style that not only matches the new Lovely visual language, but also make it possible to grow into the future mobile refreshes (wink wink) without looking out of space.
Anyway, less talk. You should see it in action and let me know what you think.
4 months ago
This style started out as an experimentation (as always), but was quickly adapted and improved by the young and talented @Riley Tippetts, so we just, you know, went with it.
Love the close modal icon out side of the modal, im stealing this style!
Looks great, Kerem. Wondering, how will you deal with text overflow in the content field? Are you considering doing a version with scroll, or otherwise?
Thanks @Daniel Vernon and @Jimmy Smutek!
@Jimmy I actually resized the modal a little bit for this shot, but ideally message box scrolls, which is the only textarea with multiple rows.
Just used this in my search for apts and it works beautifully, Kerem. I love that the text fields are flush with the edges of the container and the blue active highlight.
I AM THE ONE WHO CONTACTS!
Love the look and feel of the form, but what about the context of a focussed field? Do you think it doesn't need a label. I know for one that IE doesn't display a placeholder when a field is focussed where Chrome and Safari hide them when you start typing. I recently saw this solution, which is perfect to me: http://webdesign.tutsplus.com/tutorials/ux-tutorials/implementing-the-float-label-form-pattern/
P.S. On the homepage I came across a bug with the search form; It's not possible to enter price values with the numpad of my Apple keyboard.
Nice concept, like it alot!
Love this @Kerem Suer - pushing new boundaries with those field styles. Really like them.
Really like the live version with the white top and bottom instead of the grey.
Nice, Kerem. Great use of negative space while still keeping everything neat/concise. Type setting is purdy.
Heisenberg, I like.
Long live Heisenberg ! Good job man !
@Kerem Suer I really like the way you've done the form fields but I just can't seem to get on board with the position of the close button outside of the modal. I think I'd remove the circle from the "x", make it grey and place it in the top right corner of the modal.
@Travis Libby Thanks. What is your reasoning behind the thought? I'm interested.
I like the x location. You were thinking outside of the box. Pun intended.
Ha! I lived near Walter White apparently. Phew.
@Kerem Suer To me it's just a visual thing. I think it throws off the balance a little. As a side thought, I wonder when we'll end up doing away with the "close" button for modals like this, as it's becoming a pretty common convention that clicking outside of the modal will also close the modal...just a thought.
Beautiful @Kerem Suer!
"I am the one who leases property."
Dude this is awesome! I love the design, really cool.
BTW! You could add a CSS3 animation to the modal's appearance, it could be really cool. Look, at my site I used one (if you go to the footer, you can see a "Digital Ocean" link, click it and see the effect). I used this Cordrops tutorial to achieve the effect, maybe you like one!
Well congrats on the design, really nice ;)
I actually agree and disagree with @Travis Libby. I think the close buttons is awesome actually, outside the modal. I use it myself, and I believe it keeps the modal clean, and looks better on responsive mobile design.
BUT, I agree with him that, soon, this is gonna vanish from desktop version at least, but on mobile, I believe the close button will still be there.
Anyway, well done and thanks for the inspiration.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.