Apple Computers, Inc. has been admired for years because of their clean, lean, beautiful designs. In fact, Jony Ive, Apple’s Senior Vice President of Industrial Design, has been called “The World’s Smartest Designer” by CNN Money. Apple is one of the very few companies in the world that actually adhere to all ten of Dieter Rams’ 10 Principles of Good Design.
This post will be the first in a series of Apple-inspired web design.
Here’s the HTML5 code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mac-like Forms</title> <link rel="stylesheet" type="text/css" href="mac-like forms.css"> </head> <body> <div class="contact-form"> <form action="../forms/submit.php" method="post"> <ul> <li><label for="name">Name:</label><input placeholder="i.e. John Doe" type="text" name="name" /></li> <li><label for="email">Email:</label><input placeholder="i.e. steve@me.com" type="text" name="email" /></li> <li><label for="phone">Phone:</label><input placeholder="(123)-456-7890" type="text" name="phone" /></li> </ul> <div class="comments"> <label for="comments">Message:</label><textarea name="comments" placeholder="No more than 50 characters."></textarea> </div> <button type="submit">Send Message!</button> </form> </div> </body> </html>
This is just normal form markup. The real magic comes when you add the CSS3:
/* Styles for Mac-like form elements! */body{ text-align: center; font-family: 'Myriad Pro', sans-serif; background-color: #e6e6e9; }li{ list-style: none; padding: 15px; }input, textarea{ border-radius: 5px; border: solid gray 1px; padding: 2px; font-family: 'Myriad Pro', sans-serif; }input:focus, textarea:focus{ box-shadow: 0 0 10px #3e5bf6; }button{ font-family: 'Myriad Pro', sans-serif; }textarea{ font-size: 12px; height: 100px; width: 200px; }label{ padding-right: 10px; }
Be prepared for some browser quirks, however. Each browser shows forms differently, mainly in the “:focus” category. Give it a whirl! Maybe some JavaScript know-how can banish these problems.
Resources:
Download Myriad Pro here for free.
Download Notepad++ here. Yeah, it’s free, too.
The final result
