INTERACTIVE ELEMENTS

In-text Link

CSS Selector

.intextlink, .intextlink:hover, .intextlink:focus

Sample Code

<a href="#" class="intextlink">In-text link</a>

Rendered Element

In-text link

Navigation Button

CSS Selector

.nav-button, .nav-button:hover, .nav-button:focus, .nav-button:active

Sample Code

<a href="#" class="nav-button">NAVIGATION BUTTON</a>

Rendered Element

NAVIGATION BUTTON

Text Input Field

CSS Selector

input[type=text]

Sample Code

<form><input type="text" name="Text Input Field" placeholder="Email Address"></form>

Rendered Element

Submit Button

CSS Selector

.subbutton, .subbutton:hover, .subbutton:focus

Sample Code

<a href="#" class="subbutton">SUBMIT</a>

Rendered Element

SUBMIT

TEXT ELEMENTS

Headings

CSS Selector

.h1, .h2, .h3

Sample Code

<h1>Heading h1</h1> <h2>Heading h2</h2> <h3>Heading h3</h3>

Rendered Element

HEADING H1

Heading h2

Heading h3

Paragraph

CSS Selector

.proj-para-style

Sample Code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Etiam at lacus non augue egestas pharetra. Pellentesque a
                consequat urna, ac viverra augue. Quisque nibh velit, facilisis
                eget ligula et, imperdiet convallis erat. Nullam sit amet mauris
                tincidunt, porttitor orci a, egestas nulla. Aliquam vitae congue
                enim, nec iaculis diam. Praesent quis consectetur arcu, at
                semper odio. In tristique est a nulla dictum, vitae tincidunt
                velit gravida. Vestibulum rhoncus fermentum mattis.</p>

Rendered Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at lacus non augue egestas pharetra. Pellentesque a consequat urna, ac viverra augue. Quisque nibh velit, facilisis eget ligula et, imperdiet convallis erat. Nullam sit amet mauris tincidunt, porttitor orci a, egestas nulla. Aliquam vitae congue enim, nec iaculis diam. Praesent quis consectetur arcu, at semper odio. In tristique est a nulla dictum, vitae tincidunt velit gravida. Vestibulum rhoncus fermentum mattis.

Bullet List

CSS Selector

.ul, .li

Sample Code

<ul>
                    <li>Lavender Candle</li>
                    <li>Grapefruit Candle</li>
                    <li>Daisy Candle</li>
                    </ul>

Rendered Element

Lavender Candle
Grapefruit Candle
Daisy Candle

COMBINED ELEMENTS

Navigation

CSS Selector

.ul, .li

Sample Code

<nav>

              <ul class="nav-list">

                <li><a href="#interactive_elements" class="nav-button">INTERACTIVE</a></li>
                <li><a href="#text_elements" class="nav-button">TEXT</a></li>
                <li><a href="enroute.html" class="nav-button">COMBINE</a></li>

              </ul>

            </nav>

Rendered Element

Header

CSS Selector

header, header a, .title-top, .title-bottom, .sub-title

Sample Code

<a href="index.html" class="title-top">HI, I'M</a>
            <a href="index.html" class="title-bottom">NICOLE LO</a>
            <p class="rectangle"></p>
            <p class="sub-title">A UI/UX designer </p>
            <p class="sub-title">in Vancouver. </p>

Rendered Element

HI, I'M NICOLE LO

A UI/UX designer

in Vancouver.

Project Header

CSS Selector

.project-title .title-bottom,.project-title .sub-title

Sample Code

<header class="project-title" role="banner">

              <h1 class="title-bottom">USER INTERFACE PROJECT</p>
              <h2 class="sub-title">ENROUTE : WALKING TOUR APPLICATION</p>

            </header>

Rendered Element

Footer

CSS Selector

#footer, #footer p, #footer a, #footer a:hover, #footer a:active, #footer a:focus

Sample Code

<div id="footer" role="contentinfo">

              <div class="personal-info">

                <p>
                  NICOLE(WAI) LO 301245482 IAT 339 FALL 2017 /
                  <a href="styleguide.html"> STYLE GUIDE </a>
                </p>

              </div>

            </div>

Rendered Element

Role

CSS Selector

.role-content, .role-content h2, .role-content h3

Sample Code

<div class="role-content">

              <h2>ROLE</h2>
              <h3>Researcher, Interface and Expereince Design</h3>
              <h2>TOOLS</h2>
              <h3>Sketch, Adobe illustrator</h3>
              <h2>TEAM</h2>
              <h3>Moran Zhu, Kristine Li</h3>

            </div>

Rendered Element

ROLE

Researcher, Interface and Expereince Design

TOOLS

Sketch, Adobe illustrator

TEAM

Moran Zhu, Kristine Li

Project Image Description

CSS Selector

proj-para-style, persona-text, content-describe, .image-left, text-content

Sample Code

<div class="content-describe">

                <div class="image-left">

                  <img src="img/spotify-persona.png" class="content-img" alt="two slanted persona images with black background ">

                </div>

                <div class="text-content">

                  <h2> PERSONA </h2>

                  <p class="proj-para-style persona-text">
                    We interviewed with beginner and intermediate users by asking their goal and frustrations
                    while using Spotify. In order to understand in depth on user's habits
                    and needs, we created tasks such as create a playlist, find a particular song
                    for user and asked them to accomplish the task with our observation.

                    By combining the results from user interview, the common goals of users
                    are sharing songs with friends and having more common topics with each other.
                    Participants of research also found Spotify is
                    lack of community sense and interactive functions. In order to increase
                    interactions between users, we decided to implement a live concert streaming
                    feature for Spotify.
                  </p>

                </div>


            </div>

Rendered Element

PERSONA

We interviewed with beginner and intermediate users by asking their goal and frustrations while using Spotify. In order to understand in depth on user's habits and needs, we created tasks such as create a playlist, find a particular song for user and asked them to accomplish the task with our observation. By combining the results from user interview, the common goals of users are sharing songs with friends and having more common topics with each other. Participants of research also found Spotify is lack of community sense and interactive functions. In order to increase interactions between users, we decided to implement a live concert streaming feature for Spotify.

Project Thumbnail

CSS Selector

.projects, .spotify-img, .spotify-hover, .spotify-img-hover, .spotify-project-title .spotify-project-title-number, .spotify-project-title-link

Sample Code

<div class="projects">


            <div class="thumbnail-spotify">

              <a href="spotify.html">

                <img src="img/spotify-thumbnail.png" alt="two purple and white iphone with spotify interfaces on a purple square" class="spotify-img">

              </a>

                <div class="spotify-hover">

                  <a href="spotify.html">

                    <img src="img/spotify-thumbnail-hover.png" alt="two colourful iphone with spotify interfaces on a purple square" class="spotify-img-hover">

                  </a>

                </div>

            <div class="spotify-project-title">

              <a href="spotify.html" class="spotify-project-title-number"> 01 /</a>
              <a href="spotify.html" class="spotify-project-title-link"> SPOTIFY</a>
              <a href="spotify.html" class="spotify-project-title-link"> CONCERT</a>
              <a href="spotify.html" class="spotify-project-title-link"> STREAMING</a>

            </div>

          </div>

Rendered Element

two purple and white iphone with spotify interfaces on a purple square

two colourful iphone with spotify interfaces on a purple square

01 / SPOTIFY CONCERT STREAMING