In the first week of 2017, we officially unveiled a complete redesign of our website. The process was very much a team effort, with input from just about everyone in the company. The heavy lifting, though, was done by three members of our design/programming team: Rick Carruth, Joe Payton, and Tim Spencer.
I sat down with them to discuss their design philosophies, the process they followed for the redesign, and the tools they used. Here’s what we talked about.
Functionality and Technology
Why did Obsidian Learning decide to update the website?
Technologically speaking the markup for the site was dated and built on a very bulky CMS. The site was initially an HTML 4 based static site. We needed to create a blog so the site was just ported over as a WordPress template. It stayed in that state for two more years. The site was very static and didn’t fully showcase our interactivity and motion capabilities. It also needed to be updated to current technological standards. We are on the forefront of technology, yet our site was lagging behind. That was not acceptable as our face on the web.
It is good general practice to keep things fresh. We as people are constantly changing and in a lot of ways getting better or more in-tune with our crafts every day. So it is important to give an accurate depiction of who we are as a company right now. When considering this, I feel like our new website clearly represents our vibrant passion for what we do in both the colorful design and the bleeding edge web development.
How do you know when it’s time to update a website?
The standardization of web technologies is a constant and fast moving process. Every day the W3C rolls out new specs for rendering rules which in turn is added to current browsers. Over time capabilities of the browsers advance while other technologies become deprecated or can be slimmed down using the modern markup standards. There’s a site called Can I Use? (http://caniuse.com/), which is well-recognized and consistently up to date, and it allows you to reference to make decisions on which supported technologies are mature enough to be useful. Once a technology has been implemented on all of the modern browsers and is consistent, it can be used.
Think about it like a new pair of shoes: You buy a sweet pair of Adidas at the store and when you first put them on they are clean, vibrant, comfy, and maybe show off a new style and you love them. Then someday you look down at your feet at what used to be the freshest new pair of kicks and they have grass stains, the cushion inside is all matted down and you think to yourself “maybe it’s time I try something different.” That’s kind of how we were feeling about our website. It no longer felt like the new pair of Adidas and we wanted to represent our new outlook with a different style.
What are some of the biggest changes? Why these?
The biggest changes came with the decoupling of the site from WordPress and the change from a multiple page to a single page site. Getting the site out of WordPress allowed for a more light and concise build. This reduced the initial load time for the site from ~20 seconds to ~5 seconds. Also allowed for more control over how the technology was loaded and utilized. Moving to a single page site allowed for a more robust interactivity. The site functions more like an application than a website to give a better feeling of what we do and what our capabilities can deliver. This approach also helps with the responsiveness on mobile devices, again functioning more like an app on the device; which feels more natural in that environment.
There were two big changes. The first big change was the feeling we wanted to get across. I think a lot of times designers mistake the description of “clean” with “sterile.” There is a tendency to strip away anything that gives off an impression because there is a fear that it could be the wrong impression or just something that not EVERYONE can get into. It is important that a general representation of a company’s attitude and values are displayed in an “at a glance” manner.
The second big change is how we organized our content. It was important for us to focus our efforts on cutting down our content and organizing it in a way that is logical and easy to navigate. Every company has a lot to say but sometimes you can say more about how you operate without actual words and instead with clarity.
What are some of the improvements in the pipeline for the Obsidian site?
Improvement for future iterations will include refinement of content. A good site, like art, is never finished. There is always something that can be improved, big or small. New abilities come to fruition. New content becomes available.
There will be a bigger focus on animation in the coming iteration. The current site has bits of animation such as; the badge introduction, the loading icons, the interactive Obsidian Blended Learning Model, the thumbnail hover effects, and the hero banner animation between sections.
These animations are using current CSS and SVG animation technologies. The advantage of this newly supported animation capability is they can be view on any modern mobile device and desktop browser. No more Flash fallback to video or static images. More dynamic, more engaging, and fully supported.
As we continue forward as a team, it is clear what certain strengths lie within certain people. I think it is important to acknowledge who the right people for the job are and allow those people to do what they do. I like working with a group of specialists. When it comes to layout and branding, Rick has the strongest skill set. So for the best results I think it was important to have him take the lead on setting up the layout. And the same goes for decisions about functionality. Joe has a clearly more advanced understanding of web development than I, so ensuring his ideas are taken into consideration and utilized is crucial to developing the best functionality. We have a great team and the key to working in harmony is using our people appropriately.
What are some of the key trends that will be shaping how we use websites (in general)?
Current web trends to keep an eye on in 2017 is the use of more subtle and interactive animations. As I said earlier, these capabilities have matured and are fully supported across the board. Animated visual cues and feedback help to make the site more interactive and the usability of the site is more apparent and easy. As a list, here is a rundown on how the web will be advancing in 2017:
- More concise content. Compact and rich content to convey the message a quickly as possible with the ability to read more in-depth material if you choose.
- The end of flat design (e.g., Google Material) and a favoring of more unique and visual design
- Increased use of animation
Advancements in the way the web works are incalculable. The future of the web as I see it is based on totally immersing the viewer. Entering a website is like stepping into a new world where every consideration has been carefully constructed. Animation on the web has taken a static experience to a more rich, tactile and cerebral one. Animations help bring continuity between interactions. In the past when someone clicked to navigate to a new page and that page would just pop up giving the viewer no reference to what happened or where they are in relation to the page as a whole. Now, with subtle animation, that new page could slide in from one side and give the viewer an instinctual spatial relationship to where they were and where they are now. Interactions feel physical now, bridging the gap between reality and digital reality.
What are some the underlying technologies that were used during the development process?
What was the most challenging part of the project?
The most challenging task was creating a seamless process of maintaining the browser history of the site, and the changes to the metadata for all of the site pages to maintain the correct data crawled by the Search Engine Bots.
Getting started. Getting started is always the hardest part. There are limitless possibilities and choosing that one direction that will inevitably take a ton of time, while always second guessing if that first decision was the right one, is definitely the toughest part.
Is there an overarching philosophy of the new website?
I think it’s the same overarching philosophy of any website we’ve ever had. Our company philosophy has not changed because it’s based on a genuine desire to produce work that enriches company learning environments. The new website is just a new take on how to get our philosophy to resonate.
How do you balance “pushing the envelope” (creative functionality) vs. building on what users are familiar with?
To me, “pushing the envelope” means staying true to the fundamentals and basics of design. Many companies these days try to do too much and rely on trends that will just need to be changed later down the road once a trend has flooded the marketplace and become stale. Good design always remains current and adheres to its rules of Gestalt principles, the Fibonacci sequence, the rule of thirds, the use of grids, and utilizing shape, color, type, and imagery to communicate problems effectively. By practicing and executing this thought of design in your work you’ll seemingly be ‘pushing the envelope’ while the rest of the world fumbles with trend. I don’t believe we’re necessarily building on what a user knows, but restoring what we’re naturally familiar with and in-turn communicating more efficiently.
Design is a truth-based discipline. Certain fundamental design elements need to work together to create a successful product. This does not change. To me, pushing the envelope means creating a design that is outside of my comfort zone but still maintains those fundamental truths.
The same goes for web design. Tapping into what feels like a natural way to navigate should be the basis of the design. Where ‘pushing the envelope’ comes into play is learning the new capabilities and using those in a fun or unexpected way.
I don’t look at it like a balancing act. Good design requires fundamentals. If pushing the envelope uses fundamentals, then it works. If pushing the envelope does not use fundamentals, then it does not work.
We also updated the site’s color palette. What are some of the key principles that apply?
Obsidian Learning’s color-palette was updated to be more representative to the energy and creativity of our company, assist in maintaining user interest and provide a pleasant user experience. Starting off with various groups of color that are grounded in harmony and balance: our primary swatches were cherry-picked, compared, and tested against one another to ensure the proper contrast and value between themselves would hold up in various applications. Once the primary colors were chosen we began developing our secondary and tertiary hues that needed to cooperate with, and support the primary colors appropriately. This took a little more care and attention since secondary and tertiary colors play a huge roll in support, and often can be just as important as their parent. Many of the same tests were performed as before, but now between individual color families (i.e. blues, reds, greens, yellows) until we had all swatches working in unison to complete the solution to the problem.
How does the ”grid” theory apply to the new site?
The grid is a fundamental structure in just about all aspects of design when the design involves any sort of layout. A grid provides you with excellent organization, superior flow of content, and a unified consistency. By utilizing a grid within our site we’re able to achieve comfortable spacing of information and images, while also giving us some room to display highlighted samples, our newest blog post, featured videos, or what makes Obsidian Learning tick. All pages are laid-out to give the user quick, at-a-glance access to main topics such as innovating features, exciting work samples, our learning model, and many other solutions to your business challenges, first. The grid makes this possible while keeping the bulk of the information tucked away until you’re ready to view more. This allows the user to browse at their own pace and find what they’re looking for simpler and faster—and in the end have a more pleasurable experience.
Grids are just a solid way to organize and group related content. Separating content visually helps for quicker navigation and digestion of that information. Using grids in tandem with hierarchy to direct the viewer to what they want/need to see is one of those fundamentals of design.
What are some trends that will influence web design in the near future
I think future design trends in web will begin to focus more on accessibility, interaction, and creating a more personalized experience through algorithms. We’re beginning to see more and more use of algorithms and I think before long they’ll include them in your web experience to give you such things as personalized themes in web pages, and list things in priority to your lifestyle and finances.
Animation and interactivity are quickly becoming essential elements of web design. People don’t only want to get the information they wish to get but they want to be entertained and visually stimulated while doing so. Boredom is the future generation’s worst enemy, and if people aren’t being engaged they are going to move on with the click of a button to something else.
Where do you draw your inspiration? Is there an individual or an organization that has been stimulating your work?
My inspiration is all over the place. There are specific scenes and frames in movies. How a clip is edited in just a way. The epiphany when tuning out to a piece of music. I enjoy poking around in sites like http://ffffound.com/ and http://designspiration.net/ to see a broad range of styles that can light a fire. Spending time on http://littlebigdetails.com/ to see how others have pushed through that fourth wall on the internet to make the interfaces that much more human centric and engaging. My inspiration is a Frankenstein of many people and things, and anything Studio Ghibli.
My current favorite animator who is consistently blowing my mind is Henrique Barone (@henrique_barone). It is almost always obvious to me when I see a piece that he has worked on but at the same time the graphic styles are always changing. He has a signature humanistic approach to the movements in his animation. The way he connects movements together flows so smoothly and brings me such joy to watch. He has an obviously strong understanding of traditional animation and his work is rooted in the fundamentals of good animation such as appeal, overlap and follow through, squash and stretch, etc. He currently works for Giant Ant, which is one of the absolute best studios today. All of the work coming out of Giant Ant reflects the same feelings I have towards Henrique’s work.
A designer that I continue to admire is Michael Bierut (@michaelbierut). His passion and integrity for what he does shows in his work and he consistently impresses me with his ideology. He grew up in a small town, similar to myself, knowing early on that he wanted to be a designer. From there he went on to work with everyone from Massimo Vignelli to being a partner at Pentagram. Michael has proven to be one of the greatest designers of our time and he got there by staying true to himself and to his craft. He’s extremely knowledgeable in a sense that he knows all the rules, guidelines, and history of what makes design work, but he also knows that sometimes design is just a feeling. He understands that sometimes things just work and that there isn’t always an explanation needed. He stands firm in his belief that design can be simple, yet communicate effectively and without distraction.