📚 Curious about learning UI Design? Check out our new 4 week Intro to UI Design course. Flexible Learning. Live Mentorship. Figma Fundamentals. Enroll now for 25% off.
Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Get new leads in your inbox every day
Introduce yourself to new clients with Pitch
Learn product design in just 16 weeks...
Learn UI Design Basics and Figma Fundamentals...
Level up your skills with our interactive courses and workshops…
Portfolio creation made easy
Fresh leads in your inbox every day
Build your team’s pipeline or profile
A marketplace of digital assets…
Icons, Illustrations, Patterns, Textures…
Display, Script, Sans Serif, Serif…
Mock Ups, Social Media, Presentations…
Characters, Objects, Textures…
WordPress, Shopify, Bootstrap, HTML5…
Procreate, Affinity, Photoshop, InDesign…
Earn money doing what you love
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
Read the origin story here.
I've been experimenting a lot lately with mobile forms. Left aligned, top aligned, placeholder text only, etc. for client projects and personal projects.
Placeholder text works great for a simple username and password form, but not so much when there is more information. It's easy to forget which field is which once you've typed into all of the inputs.
If you opt for left aligned fields always exposed you end up with much less space. And space on mobile is precious. If top aligned fields are always exposed, it makes the vertical height grow very quickly.
This idea combines the best of both worlds with placeholder text and top aligned text. Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won't forget what an individual field represents.
Tweet examples to @floatlabel.
@jverdi created an iOS prototype here: https://github.com/jverdi/JVFloatLabeledTextField
I wrote a blog post "How the Float Label Pattern Started" http://mds.io/S9Ob
Google released their "Material" design guidelines on June 25, 2014, which contains "floating labels." Pretty cool!