Apple Does Design Very Well

In the world of design, Apple products still reign supreme. Their slick interface encapsulated in a user friendly environment allots for much of Apple’s success. They may not be the most innovative if you are comparing strictly functionality, but I can’t argue that they make very functional tools into pretty things that are original by ease of accessibility.

apple-login

Tutorialzine does a great job of covering the functionality of their apple login form, but I prefer to focus more on the design elements in their tutorial. The functionality is great, but it is not what is unique about this piece. The stylized elements in the form is what makes the user’s experience more likely to be unique.

I’m going to break down the form code, the form styling, and the auto-magical transformation that occurs.

The Form Code

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="formContainer">
            <form id="login" method="post" action="./">
                <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
                <input type="text" name="loginEmail" id="loginEmail" placeholder="Email" />
                <input type="password" name="loginPass" id="loginPass" placeholder="Password" />
                <input type="submit" name="submit" value="Login" />
            </form>
            <form id="recover" method="post" action="./">
                <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
                <input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
                <input type="submit" name="submit" value="Recover" />
            </form>
        </div>

This styles our forms up to make them pretty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#formContainer{
    width:288px;
    height:321px;
    margin:0 auto;
    position:relative;

    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
}

#formContainer form{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;

    /* Enabling 3d space for the transforms */
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* When the forms are flipped, they will be hidden */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Enabling a smooth animated transition */
    -moz-transition:0.8s;
    -webkit-transition:0.8s;
    transition:0.8s;

    /* Configure a keyframe animation for Firefox */
    -moz-animation: pulse 2s infinite;

    /* Configure it for Chrome and Safari */
    -webkit-animation: pulse 2s infinite;
}

#login{
    background:url('../img/login_form_bg.jpg') no-repeat;
    z-index:100;
}

#recover{
    background:url('../img/recover_form_bg.jpg') no-repeat;
    z-index:1;
    opacity:0;

    /* Rotating the recover password form by default */
    -moz-transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

This is where the magic happens.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Firefox Keyframe Animation */
@-moz-keyframes pulse{
    0%{     box-shadow:0 0 1px #008aff;}
    50%{    box-shadow:0 0 8px #008aff;}
    100%{   box-shadow:0 0 1px #008aff;}
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse{
    0%{     box-shadow:0 0 1px #008aff;}
    50%{    box-shadow:0 0 10px #008aff;}
    100%{   box-shadow:0 0 1px #008aff;}
}

#formContainer.flipped #login{

    opacity:0;

    /**
     * Rotating the login form when the
     * flipped class is added to the container
     */

    -moz-transform:rotateY(-180deg);
    -webkit-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}

#formContainer.flipped #recover{

    opacity:1;

    /* Rotating the recover div into view */
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    transform:rotateY(0deg);
}

A long time ago, Flash was the best way to achieve fluid movement on a website. Now with CSS3 and jQuery, it is easier today to create moving elements on web pages that make the “user’s experience feel like more of a software application than a typical website”. I’ve been saying that phrase for a while now and it is starting to really “grind my gears”. I need to start a new saying that explains the application’s fluidity and experience by not developing long processes to accomplish tasks that make it feel like extra work.

I love keeping a consistent style across all of my elements so while I used specific classes and ids here, I would keep a very general approach when doing a website. I want my form elements, even search, to be represented with the same basic styling. Try not to get too fancy with your ideas because more often than not a simplistic approach is better for a wide audience.