Archetyping: Make a Widget

Creating Prototypes with HTML and CSS (for Designers).

Step 1: Storyboard an Interaction

“Archetype: a perfect example of something.”

In the previous post, I outlined the reasons to use HTML prototyping. If you’re still reading, congratulations on having the patience to learn coding prototypes! If you tried and failed, hit me up on Twitter and I’ll help you out.

This time around, we’ll make an interactive widget:

The Finished Product

You can follow along by downloading the source files and Sketch file from github.

Step 1: Do Some Design

This is the easy part. Storyboard an interaction by laying out a few artboards in Sketch to describe the states of the interface. Mine’s above.

Step 2: Create a Skeleton

Since you have already created a local environment in the last article, it will be a snap to start a new prototype. Download the ProtoBoiler template to a location on your computer. Open terminal, type “cd ”, drag your prototype’s folder onto the terminal window, then press return. This will navigate inside the folder:

Type c, d, hit spacebar, drag folder onto terminal then hit return

Type “gulp watch” in the command window to launch your prototype in the browser.

Step 3: The Basic Widget

Now that the prototype is in place, let’s build the basic structure of the widget. Open Sketch and Atom (text editor for code) or similar. Open your project in Atom and open “index.html,” “styles.scss,” and “app.js” from your “Prototype” folder in an Atom window. “index.html” is where you will start building your layout and structure. Paste this into the body of your index.html (remove the placeholder content):

<div class="box">
<!-- this is the big gray box -->
</div>

This is the basic scaffolding of the widget. Now to style it: Sketch has a nifty trick that will help us build the styles.scss file. Make sure your base element is selected (not grouped), then click Edit > Copy CSS Attributes to copy css code to your clipboard. Paste the contents into styles.scss. The “Copy CSS Attributes” function does not copy the width and height of an element, so you will add that manually. Go into sketch and note the width and height of your object. The final css declaration looks like:

.box {
  background: #F9F6F6;
  border: 1px solid #ECECEC;
  border-radius: 6px;
  width: 220px;
  height: 218px;
  padding: 9px;
  position: relative;
}

Save both files and your browser will update with the changes. Cool! We can see something happening:

Magic Being Made

Step 4: Contents

Let’s add the widget’s other elements: a checkbox, title, image, heart icon, and number of likes. Copy the following markup and paste it inside the “box” div:

  <!-- checkbox & artist name -->
  <div class="checkbox"></div>
  <div class="artist-name">Albert King</div>
  <!-- image -->
  <div class="artist">
    <div class="artist-image"></div>
  </div>
  <!-- heart icon and likes -->
  <div class="likes">
    <div class="heart-icon"></div>
    <div class="likes-count">7.2 billion</div>
  </div>

Now that you have your structure, update your styles by adding to styles.scss:

.checkbox {
  width: 13px;
  height: 13px;
  background-color: white;
  border: 1px solid #E4E4E4; /*the border color and width*/
  display: inline-block; /*displays elements in a line*/
}
.artist-name {
  display: inline; /*displays elements in a line*/
}
.artist {
  margin: none; /*clearing the default margin between the image and the container*/
  height: 170px;
  width: 100%;
  padding-top: 10px; /*padding between the image and artist name*/
}
.artist-image {
  position: relative;
  height: 100%;
  background: url(http://innocentwords.com/wp-content/uploads/2016/04/albert-king.jpg) no-repeat center center; /*the image url to put in the image area*/
  background-size: cover; /*don't stretch the image in its container*/
}
.likes {
  position: absolute; 
  bottom: 8px; /*along with position:absolute; places the likes 9px from the bottom of the container*/
}
.heart-icon {
  width: 10px;
  height: 10px;
  background: url(img/heart-icon.png) no-repeat center;
  background-size: cover;
  display: inline-block;
}
.likes-count {
  display: inline;
}

I commented the code so that you can start to learn what is going on here. The basic idea: create and name containers (“div”s) in index.html for each separate element, then reference the name to style and position the element in the .scss file.

Step 5: Adding Images

To add images (such as the heart icon for likes), create a folder inside your css folder and name it “img.” Export your icons (such as the heart icon) from Sketch directly into this folder.

Name your icon “heart-icon.png” when exporting from Sketch. Since you have already included the icon title in your css above for .heart-icon, the icon will appear in the prototype when you reload it. (Note that you can also add images directly to your markup, but I prefer to use css because it will give you more interactive flexibility later.)

Great! Looking pretty good:

But it lacks that “pizazz” and “umpff” that your stakeholders are always asking for. Next, let’s visit the pizazz factory (or pizazzeria, if you’re so inclined) and spice up this prototype a bit.

Step 6: Adding Pizazz

Add a webfont. This is pretty easy if you’re using Google Fonts or another CDN, a little more difficult if not. Here are some good Google font combinations if you need some help getting started. I chose Rubik which is really nice and not played out yet.

Add the font to your prototype by including this line in your “index.html”:

<style>@import 'https://fonts.googleapis.com/css?family=Rubik:400,500,900';</style>

Then you can add it to the text by adding this line to the <div>’s that contain text (.likes-count and .artist-name):

font-family: 'Rubik', sans-serif;

Now, style the text by adding the following to your current css declarations:

to .artist-name:

font-size: 14px; color: #797979; margin-left: 8px;

to .checkbox:

margin-top: 1px; float:left;

to .heart-icon:

float:left; margin-top: 5px;

to .likes-count:

font-size: 10px; color: #737373; font-weight: 500; margin-left: 4px;

Step 7: Add a Hover State

The interaction I created has a play icon over the artist image on hover. To achieve this, we need to create the icon and text first, then we can hide it until a user hovers over the image.

Add three containers to index.html, inside the “box” div right after the “artist-name” div:

 <div class="play-icon"></div>
 <div class="play-icon-selected"></div>
 <div class="play-text">PLAY</div>

Add both the transparent play icon and the green play icon (from the states in our comp above): first, export the two images from sketch into the “img” folder you created earlier. Name them “play-icon.png” and “play-icon-selected.png.” Next, you can reference the images as you style your css:

.play-icon, .play-icon-selected {
  width: 36px;
  height: 45px;
  background: url(img/play-icon.png) no-repeat center;
  background-size: cover;
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -14px;
  top: 90px;
  opacity: 0;
}
.play-icon-selected {
  background: url(img/play-icon-selected.png) no-repeat center;
  background-size: cover;
}
.play-text {
  position: absolute;
  font-size: 10px;
  color: white;
  font-family: "Rubik", sans-serif;
  left: 50%;
  top: 140px;
  z-index: 1;
  font-weight: bold;
  margin-left: -12px;
  opacity: 0;
  letter-spacing: .6px;
}

View your project after saving and reloading it. The play icons are there, but they are not visible yet. Can you spot the css declaration that is causing this? Yep, it’s “opacity: 0:”. We will target this property in our hover state.

Now we just need to show the elements when the user hovers over the gray box. We do that by utilizing the “:hover” selector. Add this to your css:

.box:hover .artist-image {
  filter: blur(10px);
  opacity: .5;
}
.box:hover .artist {
  width: 234px;
  height: 154px;
  margin-top: 8px;
  margin-left: -9px;
}
.box:hover .play-icon {
  opacity: 1.0;
}
.box:hover .play-text {
  opacity: 1.0;
}
.play-icon-selected:hover {
  opacity: 1.0;
}

Save it to see that the hover state is working!

The final step is to add a css transition animation to add some smoothness to your interaction. Target all elements by using the “*”, then add a transition to the top of your styles.scss file:

* {  
  transition: all .33s ease-out;
}

Check out a site like this to create your own transition, then paste it inside the brackets above to see the results.

Conclusion: “But it isn’t Perfect 😭”

Have you ever shipped software? It’s never perfect! Getting those imperfections out earlier in the process will help you design for them ahead of time, avoiding headaches later. Here’s a comparison between the two screens at the end:

Side By Side Comparison

You’ll notice that Sketch doesn’t render your designs perfectly (the weight of fonts), nor does Sketch’s “View Actual Size” accurately estimate your rendering on the web. C’est la vie! Iterate!

Have a request for an article? Ask me here or on Twitter! A few ideas for my next article:

1. Play songs through this widget with Soundcloud API.
2. Track analytics with a Firebase backend and javascript.
3. Scaling small prototypes into bigger projects.

If you like this article, hit the heart button and I’ll know to keep writing things for you. Hit me up on Twitter with any comments or questions.

Subscribe to The UX Blog