So, for this blog I have tasked myself with writing my Artist Statement or my Design Philosophy. In order to do so, I think I will have to get a bit introspective and figure out whether or not I am an artist or a designer.

Am I an Artist?

I don’t think so. I like art. I like all forms of art. I really like satirical art, like some works of Pieter Bruegel the Elder or Banksy. Unfortunately, this does not make me an artist. More of an enthusiast. Sadly, outside of photography, I have never really felt the creative urge to just make art. Have I taken one hundred pictures of tree bark in one sitting? Sure have, but I don’t think that qualifies me as an artist. If I am tasked to do something, such as sketch or make some digital drawings, I can get it done and it will be pretty decent, but I have just never had the calling to create art. It makes me sad to say this because I do enjoy creating art, but because I don’t feel like I consistently have that calling to create something beautiful or original without being guided to, I must say I am not an artist.

Now that I am sad, I suppose I will have to explain my Design Philosophy.

My Design Philosophy

To me, designing something creates a journey for the user. As a designer, your goal is to make that journey smooth and seamless, so much so that the user doesn’t even ever think that what they are interacting with was designed. Almost as if it was summoned from the heavens and everything is in the right place, laid out logically and the interaction goes exactly how they imagined it would and should. That is my goal as a designer. Well, that and to inject humor as often as possible. Humor helps create an emotional connection with the user and connections make things memorable.

My overarching goal as a designer is to create a memorable user experience and seamless user interface. If I haven’t bored you with all of these words yet, there are even more words and some goals just ahead.

At this stage of my life, my work largely focuses on communications, email campaigns and simple website design. My approach to these types of mediums is to always put myself in the user’s shoes. Just because something is logical to me does not mean it will be logical to everyone. For that, your design itself must be logical to everyone. More often than not, being the one creating the work, I have intimate knowledge that the average person may not and really have to step back and pretend this is the first time you are hearing or seeing anything about whatever the topic may be.

Design Goal #1: Whatever you design must be logical to all.

I have also learned that people don’t like reading. They get bored quickly. This gets tricky when you are trying to create anything that is process-related, procedural or informational. It tends to get wordy. To keep the audience engaged, I use imagery and typography to lay out the content in a hierarchal manner that keeps the eyes moving.

Design Goal #2: Imagery and typography can (and should) leave a lasting impression, influence the audience and conjure emotion.

As you read above, I don’t fancy myself as much of an artist. This leads me to approach things from a very technical standpoint and sometimes my creativity will take a backseat. From a design standpoint, that is something that I am constantly battling with that I am looking to overcome.

Design Goal #3: Stay creative, be unique and innovate.

Lastly, and this may seem trivial, but adding Easter eggs (not actual Easter eggs) or jokes your audience would enjoy and understand in a design is a fun way to keep users engaged and yearning for more.

Design Goal #4: Keep it fun.

Some of my work

my Influences

There are a lot of discoveries yet to be made on my journey through design. Right off the bat, I can speak to an influence in the arena of web design. Whenever I think about a well-designed website, it always comes back Apple.com. Bold images, consistent typography, logical layout, clean design. Everything on this page is well curated and they don’t overload you with text. Want to read more about the new iPad Pro? You can click on it to learn more, but they don’t throw it all in your face on the home page. Think back to what I said about people not liking to read. Now if I wanted to create a web-page for a quaint lakeside bed and breakfast, would this page be the first design I thought of? Probably not, but guess what. If you swap out the imagery and font styles, I guarantee you could make this layout work for you and still conjure the proper emotions. The upside is, I highly doubt you will need all of their subpages.

Some of my other favorite designers in modern times:

• Storm Thorgerson – graphic designer known for creating surreal album art for musicians such as Pink Floyd and Peter Gabriel
• Paul Rand – graphic designer with a crazy corporate resume, but known for simple logo design and perhaps this amazing quote “Design is simple. That’s why it’s so complicated”. Amen, Paul
• Mark Trostle – head of design for Dodge (Mopar). Led the design team that has created modern, yet aggressive, retro-styled muscle cars since 2011

Closing

One of the reasons I am studying Digital Design is to find new media to communicate and engage effectively. Hopefully, my Design Philosophy gets honed in and becomes more specific as I advance through my schooling. At this moment in time, this is where I am and I like it here.

So, you’ve read my design philosophy. What designers can you recommend I check out? Who executes a design philosophy similar to mine with ease? Let me know!

What is A One Page Website?

A one-page website is a single page site, which holds all of the content on, you guessed it, a single page. You won’t find any tabs or links to subpages, though there are often anchor links to different sections of the webpage. All of the content is gathered on one page and visitors typically scroll through the site to discover the content. There is a time and a place to use single page sites and before showing some stellar examples, lets dive into when less is more and when more is, uh, better.

When Less Is More

One of the main benefits of a single page website is the fact that its low maintenance. An awful lot of work goes into creating a well-crafted web page, and minimizing the amount of content to maintain is advantageous. It also helps creators focus on providing quality content over quantity. There is no room for fluff on a single page site and designers can create a scrolling hierarchy that matches the importance of the content. This makes them perfect for sites that want to see higher engagement and/or to showcase a product, themselves (portfolios) or even an event.  Another benefit of a single page site is that they are quicker, more responsive and are very fluid, making for a pleasant user experience. On a mobile device, scrolling through a single page site is much easier than clicking through multiple pages.

When More Is Better

There are times where a single page website does not fit. For starters, people have become accustomed to navigating websites with multiple pages. There is a certain level of familiarity around using a traditional navigation menu. Another drawback to a single page site is scalability. Sure, you can add more content to scroll through, but at some point there is such a thing as too much scrolling. Utilizing subpages allows for exponential growth of your site and content. This is particularly important for eCommerce sites, such as Amazon and sites that are dense with content/information. Multi page sites also have powerful (Search Engine Optimization) SEO capabilities. This means that with more pages and more content equals better search results and more visitors. Lastly, with only one page, its difficult to track visitor activity. Say for instance you want to know which section of the page visitors spent the most time. With multi-page sites, you can track analytics on number of clicks to that section and time spent on the page. Without this data, creating a hierarchy for critical content is very difficult.

Example 1: Columns

As a psychotic list maker, this one-page website for a checklist application called Columns stood out to me. It features an animated demo of the product, some testimonials and highlights the different features of the application. As a newer application, it does the job of promoting the product and getting your attention, without overwhelming you with information. The site scales well and is very responsive while resized. This looks like a great product with potential. My only gripe about the page is when resized, the font on the animated demo becomes almost illegible. Everything else looks great. It’s not bogged down with a lot of images or text and is follows clean and consistent branding.

Example 2: A Single Div

A Single Div is a one-page website showcasing Lynn Fisher’s ridiculous illustration skills, along with exploring the possibilities of CSS. One-page websites are commonly used as portfolio sites, and while admittedly I haven’t visited many, this one is absolutely stunning. The artwork is fantastic and the layout is a smooth scroll through all of it. The illustrations are laid out in front of colored sections throughout, switching scale and grid layout at random. The illustrations range from simple icon style drawings to more complex animations. The site scales perfectly when minimized, switching from the various grid formats to stacked tiles. This page does an excellent job of highlighting her work and her vast range of illustrating skills.

Example 3: Plant 22

The last example is a one-page site created by a co-working solution in Amsterdam called Plant 22. This is minimalism at its best. There isn’t even any scrolling. Everything is right there in front of you, in four colorful boxes. If you want to see some photos of the workspaces, click the “space” box for a carousel of high-resolution images.  Do you want to see the team behind Plant22? Click on “members” to see some perfectly crafted bios nested beneath a consistent color palette and some unique shapes.  There is a membership section to see what amenities the workspaces have, as well as a contact box that has one of the coolest maps I have ever seen. Everything on this page is perfectly crafted and is purposeful. The branding is on point, the animations are simple, there is just the right amount of information and it scales very well. BONUS: If you read my last blog on cursors, you’re in for a pleasant surprise on this page.

Closing Thoughts

As you can see, there is no one size fits all solution for the number of pages on your website. Single page websites are great when you have a specific call to action, a primary focus or a certain task for users to perform. It is also an ideal design for mobile users. Multi-page design allows you to stick to the traditional format, provide greater analytics, unlimited growth protentional and an increased SEO. Choose wisely, my friends.

CSS Property: Cursor

With so many different CSS properties, I had a hard time choosing one to write this blog on. This week, our family took a trip to the beach in Asbury Park, so I decided to document a very small, but important CSS property that I noticed while planning our trip (mostly food related). The CSS cursor property sets the type of mouse cursor while hovering over an element. There are quite a few different cursors to choose from, but I wanted to showcase some that look familiar.

Let’s Hit the Road – Cursor: Text

Of course, I use Waze once we hit the road, but I still wanted to see where our hotel was in conjunction to the local eateries and of course the beach. My first stop was to Google Maps to check out the area. This property is something that you probably use frequently and never gave a second thought. I had to enter text into the search box (highlighted below) to choose our destination. This element is utilizing a “text” property. The cursor itself changes from the standard arrow into a bracket and this is how you know you are in the correct area to key in your text.

.text { 
   cursor: text; 
   }

Dinner Anyone? – Cursor: Pointer

Is there anything better than pizza? I think not and Porta has some of the most delicious pizza I have ever had. Living in New Jersey, this is quite the accomplishment. This cursor property is probably the most common you will see on websites. When you hover over most clickable elements, you will see the “pointer” cursor appear. The subtle change from the standard cursor to the finger pointer lets you know that this element will take you somewhere else, either within the same page or a new page. As you can see highlighted below, the “pointer” cursor is next to the “Locations & Menus” drop down.

.pointer { 
cursor: pointer; 
}

The Most Important Meal of the Day – Cursor: Grab

We had some beautiful weather this week, so a nice early morning walk to Toast along the boardwalk was an amazing way to start the day. On their website they have some featured articles and instead of utilizing the standard carousel navigation arrows, they utilized a “grab” pointer property on the cursor to cycle through the articles (highlighted below). This is a very subtle touch that I enjoyed. There is something gratifying about rifling the articles to the left or right. By the way, their food is remarkable.

.grab { 
cursor: grab; 
}

Closing Thoughts

Believe it or not, there are about thirty different cursor properties in CSS. While it may seem like an insignificant property, they are important part of conveying the underlying functionality of the elements. On my code pen below, I featured a few of the more common cursor styles you likely encounter. Why are they important you ask? If I see the “progress” cursor shown below, I am patiently waiting for something to happen. If I see the “not-allowed” cursor also shown below, I know that I am trying to go somewhere or do something that I probably shouldn’t. It’s amazing to me how just by spending so much time on websites, we have become conditioned to understand exactly what the different style cursors mean.

Play around in my Code Pen:

If these standard cursors are too boring for you, check out some of the amazing cursors featured on awwwards.com.

I encourage you to go digging for these different cursors and once you find them, hopefully you remember reading this blog and understand how they got there and why they are important.

When building most things, it’s important to have a good base. For a car, it’s the frame. For a house, it’s the foundation. For pizza, it’s the dough. A grid layout for a website works the same way. It is a tool that provides you with the foundational properties to appropriately size your sections, images, objects, etc. and layout a clean visual for your viewers. Last night, while looking for the end of the internet, I stumbled upon a lot of websites that make good use of grid-based design, some that missed the mark and others that “don’t need no stinkin’ grid” and successfully (also literally) thought outside of the box. Let’s review some of my findings.

Well Done

The internet is a vast and scary place, so initially I wanted to just look at automotive manufacturer websites, and from what I found, they all follow the same recipe. Some do it better than others, but I couldn’t find any companies doing anything earth shattering or next level, so I decided to expand my reach into the depths. While I was perusing auto websites, I paid a visit to Tesla. It’s no surprise that this company has a clean, intuitive, well designed website. This site has no flashing ads, no videos, no nonsense. Just clean, large images of their cars (and some other products), a consistent font and some weird auto scrolling feature that I have never seen before. The site gets even better once you click into the sub-sections, but I won’t spoil it all for you.

While I wouldn’t say this page follows a grid in the traditional sense, it doesn’t exactly break any rules either. This is a clean and organized structure that captures your attention with images and some text/buttons overlaid. Technically the large scale images are on a grid, they just go the distance. The header and footer fall into a traditional grid and the header follows you as you scroll. The site is extremely easy to navigate and is laid out logically.  Because the landing page doesn’t follow the traditional grid layout to a tee, I wanted to share a subpage. The design is consistent on each model (or product even). The subpages use what looks to be a two column format. Column one on the left occupies about 80% of the page and column two on the right, the remaining 20%. In the subpage example below you see an image of the vehicle occupying the majority of the page, while the right-side column scrolls through your options. As you scroll down, the image changes to represent the option you are viewing.

I would say the designer was going after a clean, consistent user experience that feels on brand with the customer’s perception of the company and they nailed it.

Bonus: After visiting Tesla, I checked out the websites of the other companies Elon Musk owns. SpaceX, The Boring Company, OpenAI, Starlink and Neuralink all follow a similar design theme and they are all pretty awesome. I would check them out. OpenAI pushes the grid a bit and is really nice.

Nope

I feel like I am constantly going back to AOL to see if they got with the times and updated their site. To my surprise (the last time I looked was in February) it has actually gotten worse. This isn’t the first time I have used their site as an example of bad design.

Let me first state what I think makes the site painful to view from an aesthetics standpoint. The layout in general is confusing. There is to much to look at and nothing that draws you in. The image carousel has 65 images in it. That’s right, 65. Do they honestly think people are going to click through 65 images? There are embedded videos that either lag or don’t work and I found a number of dead links on their page as well. The fonts are inconsistent in style, weight and size and the further down you scroll, the worse it gets. A cornucopia of images and lists. Square images, rectangular images, rectangular images with rounded corners. They couldn’t just throw some circles and triangles in there to check all the boxes? 

Good golly, the grid. So I get that the use of white space helps in certain scenarios, but please tell me what that large blank area in the upper right hand corner is accomplishing? You could easily slide everything up and not doing so actually does a disservice to your attempt at using a grid. Now you have text intersecting with images or tables and lists. The gutters are all different sizes. Another thing that haunts you as you scroll is the search bar. Why doesn’t it run the full length of at least the carousel? I would be happy if it lined up with anything, but it doesn’t.

I’m really not sure the look that the designer is going for with this page. My guess is at some point they made an attempt to modernize their page to stay relevant and then forgot about it. It’s just too much content to scroll through, read through or even too many images to flip through. And remember, the madness follows you on the subpages. I can’t imagine having so much content that you need to have a landing page this hectic and have enough unique content for subpages. A quick study of “less is more” would serve them well.

Rulebreaker

Finding a website that really breaks the conventional design is difficult, unless you are specifically searching for them. Being that artists typically like to break the rules, I checked out a number of museum websites and stumbled upon this beautiful masterpiece. Behold the Brussels Museums website.

What’s not to like about this page. A carousel of images that you can pause, if you please. Text overlays. Great use of typography. Consistent/clean fonts and a unique mustard colored theme. Links that are typically reserved for a header, are turned vertically and overlay the main image carousel. Like a header, it follows you as you scroll and even better, those options slowly become highlighted when you hover over them. The main real estate on this page just doesn’t follow any traditional grid rules at all. What’s important here is that even though it doesn’t follow the grid, it feels cohesive and the elements above help tie everything together.

As you scroll down, it switches from the landing page to some cards with clean images and text that direct you to the different museums in Brussels. Not only do these cards not conform to a grid, but when you hover over them, they overlap the adjacent card. The subpages are equally stunning and also have overlapping text and images.  There are some minor things that don’t work for me on the main page. There is a logo all the way at the bottom that doesn’t land on the grid (one of the only grids they use on this page) with the other icons and I don’t quite understand the thumbnail image that pops up when you over the title of the news articles.

I feel like this designer wanted to grab your attention and try some new things and by using typography, consistent color and overlays they accomplished just that. 

Closing THOUGHTS

I hope this gives you some insight on grid layouts as a foundational tool. There are ways to use them well, ways to try to use them and fail and ways to break them with grace. They are merely guidelines, after all.

Don Norman’s Design of Everyday Things has been in my Amazon “Saved for Later” cart section since I started at Penn State last Spring and took Digital Multimedia Design 100. In that course, Robert Grudin’s Design and Truth was the required reading and I recall that he quoted Norman and it turned me on to this book.

Let me start off by saying that I am thrilled that I am not the only one that has trouble with doors. I have personally planted my face in a door that I thought was a push, that turned out to be a pull door. Maybe I have an aggressive approach to opening doors, but regardless this is something that just shouldn’t happen. I wholeheartedly agree with Norman that when it gets to the point where you have to put instructions on something as simple as a door, you have failed in your design. It seems simple, but clearly it’s not.

Designers often focus solely on functionality or aesthetics and fail to think about the user experience or ease of use. Something that is well designed should bring pleasure to use, be easy to interpret and understand. Be it a physical or digital object, they should possess visible cues on how to use them. In this chapter, Norman provides guidelines that will assist in designing easy to use and intuitive devices. Below we will be diving deeper into those guidelines.

Admittedly, my brain acts much like an engineer when it comes to logic and more specifically expecting others to understand everything that I understand. This is something that I have learned to be problematic, specifically when it comes to creating communications or processes, which are examples of both experience design and human-centered design. Everyone interprets words and instruction differently, so often times I find myself having to put myself into other people’s shoes to make sure what I am writing works for a broader audience. I have seen the firsthand impact of a poorly design communication and have learned “we have to accept human behavior the way it is, not the way we would wish it to be (Norman 6)”.

Affordances

Affordances describe the relationship between a person (or other type of user) and an object. They signify how an object may be used. Affordances describe relationships, not properties, and determine what actions are possible. Let’s take this book for example. People see a book and know that they should open it and read it. They know where the book starts and where it ends. The book “affords” being opened and the text “affords” reading. Hand this book to my almost two-year-old and she will see it “affords” her to make confetti or it “affords” her a place to doodle. A dog may see this as a chew toy. Affordances are all about perception.

Photo by Steve Veit

Digital affordances are conceptually the same, however the relationship shifts from something physical to something visual. Below is an iPhone screenshot from the “Books” app. You can see the thumbnails of the book covers and know to learn more you will have to tap the photo. The book cover thumbnail “affords” a tap. The perception of what to do next is understood and this is a concept that even my almost two-year-old can grasp. It’s interesting how the user’s perception of the affordances shifts in the physical and digital world, but both provide similar end results. You will see there are affordances to see additional titles under different categories, however they have signifiers, which we will talk about next.

Screenshot of Apple Books App

Signifiers

While affordances are about relationships, signifiers flat out tell the user how to perform certain actions. Below are two remote controls that are riddled with signifiers. These signifiers are buttons with either symbols or text (or both). You will see some common signifiers, such as the power button and home button. Take note that the power buttons are both red, and that is a signifier as well. The Roku remote has signifiers for shortcuts to open certain streaming channels, which is pretty cool feature. They allow you to bypass the main menu and jump right into frequently used channels.

Photo by Steve Veit

Digital signifiers are everywhere. I’ll admit that I was embarrassed to screenshot my actual Gmail account, so instead this is my mailbox specifically for education. I wanted to provide screenshots showing two different examples of signifiers. On the top, you will see signifiers (above the grey bar) to perform a number of tasks once an email is selected. These signifiers are icons. Gmail provides the option to either use icons or text. The screenshot on the bottom is using the text signifiers. They each signify an action.

Screenshots from Google, Gmail app

Mapping

Mapping is the relationship between a control and its results. It is an important aspect of design and the best mappings are intuitive. In a car, the steering wheel creates a mapping with the direction the wheel is turned. The wheel is turned to the left, the car turns left. The wheel is turned to the right, the car turns right. There is a clear mapping of the controls and the function of the object.

Photo by Steve Veit

An example of digital mapping can be found on the screenshot below from WordPress. This is an image carousel or MetaSlider and it has straightforward mapping. The arrows navigate throughout the images and the dots let you know where you are in the gallery.

Screenshot from WordPress, Metaslider builder

Feedback

Feedback seems fairly self-explanatory. It is an objects way of letting you know that something is working or not working. Typically, feedback presents itself either via visual or audible cues.  We have a Bosch dishwasher and the company prides itself on how quiet the machine is. That being said, Bosch designed this machine to allow users to see the machine is running by projecting a small red light on the floor.  The machine also has a multitude of audible cycle alerts, but the simple light on the floor lets me know to stay away or get greeted with the delight of hot water and foggy glasses.

Screenshot from Bosch Youtube Video

An example of digital feedback is the “Haptic Touch” feedback feature on the iPhone. It provides a quick vibration when performing certain actions on the phone. For example, if you hold down an app button, you feel a slight bump on your touch and a new menu pops up. The same thing happens if you long touch a photo that came through a text message or turn the flashlight on or off. For some reason, it’s extremely gratifying.

Image courtesy of Shutterstock

Closing THOUGHTS

I think the term design is often pigeonholed for creative people in fields like graphic design or those who make “things”, when the truth of the matter is there is design in everything we do, right down to the way we manage our time. From what I have read thus far, I highly recommend this book, as well as Design and Truth by Robert Grudin.