As a designer, I have resisted focusing on one specific style or discipline. Creative use of typography and image editing are consistent throughout my work, and when possible, I love to add illustration. I feel it gives a piece a custom-made and singular quality. I’ve built on my experience with logo design, layout, and production artwork to include web, application, and 3D design. I love the ability to tell a story through diverse media and often look for inspiration outside the design world — in film making, music, and nature.

I have been a professional designer for over 15 years and have worked for large media companies and small-town offset printing shops. One of the most valuable skills I have learned in that time is versatility. My portfolio includes a magazine ad introducing HD in NFL broadcasts, a technical booklet describing roof repair, and a 1–color digital illustration of my dog. While widely different in purpose, these projects all required me to use my design skills to find a solution for each project. Adaptation is key, and one’s personal style may not always fit the given task. As an art professor once told me long ago, “It’s not about what you like. It’s about what works.” 

Sometimes working within certain limits can yield exceptional results. A great case for this is the one page website. It allows the designer to focus their efforts of a fixed space. Working within boundaries can lead to innovative design as techniques are adapted to solve creative problems. Let’s take a look at a few websites that maximize the potential of one page design.

“It’s a wonderful thing… to be given parameters and walls and barriers.” – Neil Gaiman

First up is Rainbow Hunt. This audio-based site generates a variety of ambient rain sounds. The user can choose or combine the sounds of light, splashing, or heavy rain. Options for ‘raindrops hitting a window’ and thunder are also included. Rain droplet animation adds to the effect, making it seem that you are looking out a window during a storm. The site features ‘day’ or ‘night’ settings as well as a minimalist version that forgoes the animation. It does a great job of serving as an in-browser nature sound generator. Moving the cursor around the site makes the view pan around slightly and the top elements collapse upon resizing. A hamburger menu allows the user to show/hide the UI, adjust the number of droplets, and set a timer. The audience in this case would be someone looking to decompress. Rainbow Hunt could be a welcomed respite during a stressful day at the office. The thunder audio can be startling though.

Next up is a site called Best Horror Scenes that collects some of the scariest moments in film history. The static section on the left features the site title and description. Watch for the blinking-eye animation. A scroll-able list on the right is home to a countdown list of creepy scenes. Each film is represented with a large thumbnail in pixelated black and white. This works well with the sparse red/white color palette. Clicking on a thumbnail plays an embedded video of each scene. The user is able to vote on the ranking below. When scaled down, the left sidebar shifts to the top and the list takes up the full width. The site is geared to fans of horror, but as the description says, not all the films fit into that genre. If you are interested in film, there is plenty take in here. An alert before the page loads lets the user know that heavy spoilers lay ahead, but it’s possible some people just want to skip to the scary stuff.

The last site one page design we’ll look at is informational site What Bars? Believe it or not, it lets the user visually compare the specifications of bicycle handlebars. A list to the left displays handlebars sorted by manufacturer. Each set has a horizontal listing of specs. Clicking ‘View’ shows a silhouette of the handlebars on the millimeter grid map to the right. Multiple clicks stack the silhouettes on top of each other in order to compare sets. Scaling down the browser window shifts the grid to the top of the page. Bicycle enthusiasts could possibly love a site like this, though I don’t think it would translate well to mobile due to the tiny increments in the grid. However, What Bars? does a nice job of presenting a lot of technically specific data in an interesting way.

Each of these designs uses the one page layout, and they each take it in their own unique direction. These are just a few examples that reinforce the point that one page designs don’t have to be boring and can in fact be used effectively for vastly different purposes.

 

In this post, I’d like to look into the CSS property known as font-size. This property is very widely used and can be seen on nearly every site. You might have guessed that it allows the developer to define the size of the text, but it can be implemented in a number of useful ways. Let’s take a look.  

Font-size can be specified in several different ways. When font-size is absolute, a fixed size is given to the text. This can come in the form of a keyword such as “xx-small” or “large”, or a unit of measurement. Pixels, inches, points, picas, millimeters, and centimeters are all accepted units. A notable drawback of using absolute font–size is that the user is unable to change the size unless they change it on their browser. Do people do this? As a matter of fact they do. Still, from an accessibility standpoint, this is not ideal. This CodePen shows the static nature of absolute text. Click ‘Edit on CodePen’ in the upper right corner. Note how that when the window is resized, the text size does not change.

See the Pen
absolute example by Andy Miller (@AndyMiller)
on CodePen.

Relative units are more flexible than absolute units and can be useful when building responsive sites. Keywords such as “larger” or “smaller” set the size of the text in relation to that of its parent element. A percentage value can be used as well. Percentages are always relative to another value. The em unit is based on the font–size the current element. Like percentage units, ems are both scalable and responsive. Here is an example from the Penn State in which text size is set using ems: 

Fun fact: The em got its name from the early days of metal type in which the capital ‘M’ was cast in a square block; its height and width the same.

Another unit, the rem, disregards styling from all parents except the root, or html, element (hence rem, root + element). Here is a CodePen example of the rem in action. Notice how the font sizing in the h3 bypasses its parents’ size and takes its size directly from html element.

See the Pen
rem example by Andy Miller (@AndyMiller)
on CodePen.

Yet another option for setting font-size is in relation to the dimensions of the viewport.  When using viewport height, a value is placed before vh. For example, 25vh indicates the font-size as 25% of the entire height of the viewport.  The CodePen below shows text that has been sized using viewport width. Try resizing the window horizontally and notice how, unlike in the first example, the text changes with the window size. 

 

See the Pen
viewport example by Andy Miller (@AndyMiller)
on CodePen.

So, which is the best way to set font-size on your site? As with most absolute units, it can be seen as bad practice to rely on pixels, as they are static and do not scale when browsers resize. However, pixels can serve as a practical choice if the actual size one is designing for is not known or if text needs to be sized in relation to an image, which would be measured in pixels. Pixels are the most common unit when working with absolute font-size. Save pt, in, mm, and cm for print work. Relative units are great for building responsive sites because they can scale up and down. It is important to keep in mind the sizes of the parents when using them. Inherited sizes can cause a lot of confusion. When your goal is to have font-size scale, it is best to think of what you want it to scale in relation to on your site. 

Designers have long been taught grid-based design in order to organize content. Let’s take a look at some designs that use the grid successfully, break the grid intentionally, and some that fall a little short of implementing an interesting grid use.  

An example of a successful grid use in my opinion is this site for French law firm Quincy Requin Associates. The site is meant to convey basic information about the firm. Who they are, what they do, contact, and address are included. What I think works about the site is its use of white space within the grid. Text is given a lot of room to breathe. A simple, clean design with a minimal color palette is broken up with an image that invites the user to scroll down. The image more or less shows the grid but is broken up with content. Further down the page, text content and images are connected. I think this design is a success due to its ability to use the grid to lead the reader down the page in an engaging way. The lack of spacing between the content also adds to this effect. Since the client here is a law firm, they aren’t going to focus on specific cases as each one is different. What they need is to present basic information about their firm in a simple, attractive way. This site delivers exactly that. 

Next is an example of a site that doesn’t work so well for me is for NMG Group, a global financial firm. The background image is fine on its own but the presentation of the overlapping buildings seems to be at odds with the grid. Besides red, the color scheme is almost entirely in grayscale. A large gray bar with text further obscures the image. The nav bar at the top and the elements below seem to be on different grids entirely and the image between seems out of place. When hovering over the nav elements, the drop-down menus don’t align with the grid at all. I don’t find this to be a successful design because it feels not only disjointed but boring. It seems that the designer might have paid more attention to simply applying content to the page rather than the site’s appearance or functionality. As a relatively new web designer, I don’t feel comfortable giving a scathing review of another’s design. Sites like this give me a good idea of what to look out for and avoid in my own work. 

An example of a site that breaks the grid in a non-traditional way, is this site from Anakin Design Studio. Where the NMG site seemed to not fit together well, the Anakin site embraces the chaos. As the user scrolls down from the main landing page constructed from spliced images that don’t appear to be attached to a grid whatsoever, they are greeted with images, geometric gradients, and typographic elements in motion. The gallery showcasing their work is very unconventional, at times using a clipping mask “X” instead of a standard thumbnail frame. The neutral colors from the first page shift to more vibrant ones. A sanserif typeface is paired with an italicized serif. The composition is exciting and experimental, giving the site a modern and original feel. It’s no surprise Anakin is the recipient of numerous awards and has clients by the likes of BMW. This site is an inspiration. 

Edit: Since my original post, the Anakin site has updated their landing page.  Sections of orange and light blue watercolor swirls have replaced the diagonal, neutral tone slabs. It looks like the new images were added to the same containers as the first version. I like this version even more! It still works against the grid, but is not as jarring without the diagonal lines. I know it is bothersome for some when elements such as these don’t line up, but in this case, I think it works extremely well.

Don Norman begins The Design of Everyday Things with an anecdote about doors. Not long ago, I was introduced to him and ‘Norman doors’ in this piece by 99% Invisible’s Roman Mars and Vox’s Joe Posner. The confusing interactions these doors signaled were immediately recognizable. The first chapter of Norman’s book goes on to outline an important distinction, one that separates aesthetics from good design. In describing his friends experience with a particularly difficult to use series of doors, he mentions that they were attractive, stylish, and “probably won a design prize”. What was clearly lacking was the consideration of how people would interact with them. Even though the doors may have been aesthetically pleasing, they lacked the two most important characteristics of good design; discoverability and understanding. 

A closer look at the devices around us reveals that many of them are over complicated. Norman’s perspective as an engineer proves very useful in pointing out how some engineers struggle to understand human behavior. As they are trained to think logically, they transfer this mode of thought onto their users. Unfortunately, not everyone thinks this way. Humans can be messy, unpredictable, and illogical. Human error can be factored into design rather than existing in constant conflict with the way things should work. The importance of Human Centered Design which Norman focuses on is helpful for all designers. Good design is not simply functional, but an interplay of tech and psychology. Keeping the Fundamental Principles of Interaction in mind allows designers to think more broadly about human thought and emotion. Creating experiences should be what we are striving for. 

---

First, we should be thinking about how people interact with the physical objects around them. These relationships are known as affordances. A very simple real-world example is a pair of scissors (Fig.1). The holes in the handles afford the ability to insert your fingers and grasp it. The blades afford the ability to cut. The Bubble Level (Fig.2), an extremely handy app, has a variety of affordances. The user can interact with the app by placing it on a surface to measure the alignment or flatness. When the user holds it against a wall it serves as a metal detector to determine whether there are wires inside. With the app’s AR ruler setting, the user can measure the distance between two objects by pointing the phone’s camera. The app also features an inclinometer and a compass, offering affordance in several levels of spatial relation.

Another Fundamental Principle of Interaction involves signifiers. Signifiers are a component of affordances, communicating where the action should take place. Street lines (Fig.3) work as signifiers. They communicate that a given surface is a roadway and can convey different meanings such as two-way traffic, a passing lane, or the shoulder of a road. In terms of applications, the camera icon in iMessage (Fig.4) is another signifier. It visually directs the user to the camera, signifying that the iMessage app allows the affordance of including a photo with their message.

Mapping is another Fundamental Principle of Interaction and describes how the elements of two sets of things are related. A real-world example of this is button layout on Keurig coffee machines (Fig.5). The buttons correspond with the amount of coffee the machine will brew. The larger the button, the larger the cup. In many weather apps, Weather Underground (Fig.6) for example, mapping is used in the weekly forecast. The days of the week are shown in a linear way. The user then scrolls to the left to see temperatures and precipitation for the following days. This linear mapping follows the way we think of the days of the week on a calendar.

The last Fundamental Principle of Interaction I’ll be discussing is feedback. Feedback communicates the results of an actions. An excellent real-world example of this is the Sonic Research ST-200 guitar tuner pedal (Fig.7). A dotted ring of lights spirals around the outside of the note when it is played. If the note is sharp, the dots will spin clockwise. If the note is flat, the dots will spin counterclockwise. The further out of tune with the note, the more rapidly the dots will spin. As you come closer to matching the note by tighten or loosening the string, the pedal provides feedback by slowing or (if you are very lucky) stopping the spin. For example, if I need to tune a B string, I click on the pedal and play the open string. If I see the ring of lights around the ‘B’ spinning rapidly clockwise, I know the string is very sharp, and I need to loosen it to get back in tune to a B. This is very helpful for on-the-fly tuning. An example from an app is the Overcast podcast app (Fig.8), which gives the user instant feedback when downloading a podcast. After tapping the down arrow, a percentage is immediately displayed, showing the status of the download. It usually only takes a few moments but can be a good indicator of whether you have been disconnected from your Wi-Fi network.

Welcome to Sites At Penn State. This is your first post. Edit or delete it, then start blogging!