Insight Categories: Design

Have you outgrown PDF brand standards?

As your brand grows, so do the challenges of maintaining consistency across teams, channels, and partners. For years, PDF brand standards were the go-to solution for documenting and sharing brand guidelines. But in a fast-changing world, relying on a static document might be holding you back.

So, how do you know if it’s time to move on? Let’s explore why online brand standards guides are quickly replacing PDFs as the new standard:

1. Real-Time Updates: Stay Current Without the Hassle

Brands evolve constantly—whether it’s tweaking a logo, adding a new colors, or updating typography guidelines. Online brand guides allow you to make real-time updates, ensuring everyone has access to the most accurate information instantly.

With PDFs, every change requires reissuing and redistributing the document, which not only wastes time but can lead to multiple outdated versions circulating among teams and vendors.

2. Accessibility: Brand Guidelines Wherever You Go

An online guide lives in the cloud, making it accessible from any device, anywhere in the world. Whether you’re in a meeting, on a photoshoot, or working with a remote team, your brand standards are always at everyone’s fingertips.

PDFs, on the other hand, are often buried in email chains or file folders. Even when you do find them, they may not be compatible with every device, creating unnecessary friction.

3. Interactivity: Bring Your Brand to Life

Modern brands are dynamic, and your guidelines should be, too. Online guides can include interactive elements like embedded videos, clickable links, or live previews of typography and color swatches.

A PDF is static, forcing users to imagine how the elements will look or behave, which can lead to inconsistent interpretations.

4. Instant Asset Downloads: One-Click Access to What You Need

With online brand guides, teams and partners can instantly download the exact assets they need—whether it’s a logo, font file, or image—directly from the guide. This eliminates the frustration of hunting down files in shared drives or emailing someone for the correct version.

PDFs lack this functionality, often requiring users to track down assets separately, which can lead to delays and inconsistencies.

5. Scalability: Grow With Your Brand

Your brand is not a static entity; it’s an evolving ecosystem. Online guides are designed to grow with your needs, allowing you to add sections or integrate new tools seamlessly.

With PDFs, scalability means creating entirely new versions or extensive redesigns, which can be both costly and time-intensive.

6. Cost-Effectiveness: Save Time and Resources

Every time you update a PDF, there are costs—whether it’s the time your design team spends revising it or the effort to redistribute the latest version. Online guides eliminate these recurring expenses, offering a long-term cost-effective solution.

7. Collaboration: Work Smarter Together

Today’s brands thrive on collaboration. Online brand guides can include features like commenting, shared access, and integration with other tools, making it easier for teams to work together.

PDFs, however, are static documents. Feedback and collaboration often require separate tools, creating unnecessary barriers.

8. Brand Control: Keep Everyone Aligned

Online guides are centralized and secure, giving you confidence that everyone is working from the same playbook. They also reduce the risk of outdated versions being used, a common issue with PDFs that can be downloaded, printed, or saved offline.

Is it time to make the switch?

If your brand has outgrown its PDF guidelines, you’re not alone. Moving to an online brand standards guide offers greater flexibility, accessibility, and control—allowing you to focus on what matters most: building a cohesive and impactful brand. Whether your team is local or global, digital or print-focused, an online guide ensures your brand is presented consistently across every touchpoint. It’s not just about keeping up; it’s about staying ahead.

Are you ready to leave PDFs behind? Let’s talk about how an online brand standards guide can elevate your brand.

Check out the example video below showcasing the online brand guidelines we recently built for our client, the National Association of Independent Schools.

In the previous segment of our Web Accessibility Standards series, we delved into the significance of website accessibility and its profound impact on user experience. In this installment, we’ll dig deeper and explore a set of crucial guidelines that can be deployed to gauge and enhance your website’s accessibility, making it a welcoming digital space for everyone.

In May 2018, a pivotal transformation occurred within the landscape of web accessibility. The 508 Standards underwent a significant update, aligning themselves with the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA success criteria. This update encompassed a comprehensive framework of 12 guidelines, each accompanied by testable success criteria, amounting to a total of 61 points. These guidelines and criteria have been thoughtfully grouped into the acronym POUR, representing the core principles that underpin accessibility:

Perceivable
Operable
Understandable
Robust

For your website to be perceivable, the information and the website itself must be presented in a way that users can comprehend. It encompasses more than mere visibility; it extends to ensuring that the content can be consumed by individuals with varying degrees of sensory perception. For example, some websites include invisible information or code that is not intended for the user: in the past, some websites would include invisible blocks of text that included keywords to boost search engine rankings. This would not pass accessibility standards, as a screen reader may read the invisible text, but anyone visiting that page would not be able to view the invisible text.

Operability, the second tenet of web accessibility, is concerned with the usability of a website’s interface, components, and navigation mechanisms. A website that relies solely on mouse-based interaction is inherently limiting for users who navigate using keyboards, voice commands, or other assistive technologies. To adhere to accessibility standards, make sure that user experience (UX) and user interface (UI) design cater to a diverse array of interaction modes, fostering a seamless and intuitive navigation process that transcends physical input methods.

For your website to be understandable, all users, regardless of their backgrounds or abilities, should be able to decipher the information presented on a website and effectively operate its functionalities. This entails using clear and concise language, intuitive navigation structures, and explicit instructions. Ensuring that complex concepts are explained in a manner that is universally graspable enhances the overall inclusivity of the website.

The final pillar, robustness, underscores the significance of creating content that can be reliably interpreted by a wide range of user agents, including both human users and assistive technologies. In a rapidly evolving technological landscape, websites must be adaptable to various devices, browsers, and assistive tools to ensure consistent and seamless access for all users.

As technology evolves and design paradigms shift, the techniques for achieving web accessibility continually evolve as well. However, amidst these changes, the fundamental principles, guidelines, and success criteria remain steadfast. These principles offer an enduring framework upon which to build a digital environment that transcends barriers and fosters equal access and engagement for all individuals.

If you’re as chronically online as I am, you couldn’t open a social app in December without seeing artificial intelligence portraits of your friends and peers. Many of the portraits come from the app Lensa, which can take a photo and transform it into a variety of art styles, from anime to watercolor to CGI. The app can turn you into a superhero, a fairy, an alien creature and more. It can even adjust the tilt of your head or eyeline from the original photo to better fit the new portrait. 

Lensa has exploded in popularity in recent days, but it is just the latest in a rising wave of AI content and creative generators. Over the summer, a micro TikTok trend saw users submitting increasingly absurd prompts to AI art generators such as Craiyon or the Wombo Dream app to see what kind of surreal images it would produce—and how well the artificial intelligence could hit the mark on what it was asked to create. 

For example, here is what Craiyon produces for the prompt “Boba Fett at a rave with a rabbit.”

Craiyon’s results were often weird (some might say haunting), but AI image generators can be extremely advanced. In fact, over the summer, judges at the Colorado State Fair awarded first place and a $300 prize in the digital arts competition to a piece of art that turned out to be created using Midjourney, another artificial intelligence program that creates images from a text prompt. The win caused controversy and sparked debate about how AI-generated art can and should be measured against works created by humans.

Visual art isn’t the only thing growing in the AI space, either. Writing and text-generating tools are also getting more and more sophisticated. An AI chatbot called ChatGPT is so realistically conversational with its writing that it is fooling humans on the other end of the conversation. 

And while editing tools using some amount of AI have been around for a long time, (remember Clippy?), Google recently announced a new prototype AI called Wordcraft that can whip up creative writing based on prompts. According to Google, Wordcraft is meant to help writers add interest and refine their own writing much as a human editor would, but it is also capable of creating unique stories—and the technology is only bound to continue to develop. 

So, is AI going to take our jobs as designers, writers, and content creators? It shouldn’t. 

For one thing, issues around bias and bigotry can be a big factor. In particular, generators that crawl for imagery or info from across the internet run the risk of pulling unsavory, offensive, and even pornographic material into their works. They also have already garnered criticism for reinforcing sexist and especially racist stereotypes. 

In addition, major questions have arisen about AI programs’ ability to incorporate human-created work, whether it be image elements or an art or writing style, into their new creations without crediting or compensating the sources they are pulling from. Visual artists especially are raising serious concerns about this theft of their creativity and work. 

At the end of the day, AI-generated works lack the forethought, sensitivity, and strategy of a human touch. They can be a great tool to add value, but artificial intelligence cannot create with the same expressive drive and heft as a person drawing on their emotions and life experiences. This technology certainly isn’t going anywhere, but the conversations around what is ethical, legal, and best practices will continue. And in the meantime, artists, writers, and developers will continue to produce the kind of work a robot can’t.

As designers, we are taught that our color recommendations and choices influence our client audiences, their interactions with interfaces, how brands resonate with individuals, stand out from their competitors, and more. Color consulting is a big business supported by research psychologists, anthropologists, social scientists, etc. Ask the Pantone Color Institute whose work, according to their website, is focused on “the business of color”.

I’ve neither participated in focus group testing regarding color nor dug too deeply into the research I’ve read about the power of color regarding branding or as it relates to social change. I can say this—color can help tell your brand’s story, help distinguish your brand from the competition, and influence your brand’s personality.

Now, if we all followed the same rules about color psychology findings nearly everything created would be blue. Why? The research says blue is trusted, calming, secure, authoritative, I could go on. In essence—man’s favorite color. So, no wonder nearly every healthcare company uses blue. But, if everyone begins to believe blue is synonymous with healthcare, how will the next new healthcare company distinguish itself? As humans, we all too often make the leap from the emotional attribute to something synonymous with the business area of focus. “Blue is healthcare,” one client recently declared…all I know is we must be blue.” But, if you want to rethink something as new or distinguish it as a new entry into a crowded competitive landscape I’d ask, are you willing to let go of these preconceived rules?

I just went to see the documentary, Summer of Soul (along with my husband and 8 other socially distanced audience members in a newly reopened movie theater in Palms Springs). The movie, as Wesley Morris of the New York Times describes is, “footage from the 1969 edition of Harlem Cultural Festival footage that Ahmir Thompson, better known as Questlove, has rescued and assembled into nearly two hours of outrageous poignancy.” By “rescued” he is referring to the fact that the footage was never picked up by a network and thus—nearly lost.

The movie described the period of the late ’60s-’70s as one defined by a series of tragic assassinations of our leaders post the Vietnam War. It was a period of our history filled with a common distrust in our governing system resulting in riots, and a desire by many not to conform. There’s a section of the movie that elaborated on something you may have heard before—how we came to attribute white as good, pure, enlightened, and black as evil, foreboding, corrupt. It suggests that our society appropriated these terms as a result of centuries of cultural dissonance for our own purposes. Similarly in branding, we often appropriate meaning to colors due to what we’ve learned to associate a color with. Is this for the sake of convenience, or lack of imagination?

What emerged from the anger and despair of the late 60-70s was clothing, music, design, and associated colors intended to redefine, rebel, or share a new dawning. African dashiki prints and burnt-orange sunrise motifs emerged out of the darkness. Psychedelics and tie-died art inspired the drug experimentation of the period also marked the nonconformist spirit of this period. The Fifth Dimension’s song, “The Age of Aquarius” at one point topped music charts. Typography inspired by the organic forms of the Art Nouveau movement reemerged in stark contrast from Helvetica—a font Ellen Lupton, curator of contemporary design at the Cooper-Hewitt, Smithsonian Design Museum in New York once said, “was embraced because of its “lack of personality… Helvetica met our craving for corporate vanilla.” In many ways, color was bold and significant of a new age or a rebirth and a connection to nature. One might say the Art Nouveau fonts that emerged were essentially created as a middle-finger reaction to the conventional norms of the time.

So if you can’t tell by now, I loved this movie. It’s a buried piece of our country’s history that’s been carefully unearthed. Why am I blogging about it here? It’s a telling glimpse at how music, fashion, and design are interrelated and reflective of our national mood. Because in the wake of Black Lives Matter combined with emerging from the pandemic I can’t help thinking, what’s next for design? And, because I just can’t imagine we’ll be wearing gray athleisure wear and elastic waistbands for years to come.

If you’re looking for an easily digestible way to communicate what your company does, consider producing an explainer video. Instead of trying to describe your company’s process or services with plain text, an explainer video uses animated visuals and straightforward language to help convey it all to the viewer, usually within 90 seconds or less. While the style of videos can vary widely, the more popular ones tend to have a combination of infographics, typography and character animation. They also usually include audio elements such as a narrator voice-over, music, and sound effects. Explainer videos are a great tool for helping establish brand awareness, as they are more easily shareable and consumable through external channels like social media than an “About Us” webpage.

If you decide to invest in an explainer video, it would be a good idea to know the steps in the process for creating one. That way you can start out the project with not only an idea of what the finished product at the end should look like, but also the steps along the way.

Briefing – Here is where the overall scope of the project is pinned down. Things like how complex or simple the animations and style will be, will it include character animations or kinetic typography, etc. Determining the purpose of the video also happens here. Whether it is about a certain product your business sells, statistics and achievements of the business, or a more general process of the business, the brief will help determine how linear the story will be. 

Script – Who writes the narration is up to the client; you can write it yourself, have the studio write it for you, or rely on a combination of both. The tone of the narration should be determined here. Does your business deal with more serious matters, or are you trying to get consumers excited about a product? This will influence how the narration will sound once it reaches recording.

Storyboard and Style – With the final script in hand, the creative and art directors will create a storyboard of the whole animation. Stills of each keyframe will be drawn to show the progression of the story. The look and feel and the animation will be determined here as well.

Animation – The biggest lift in the process! The animators will start animating the keyframes from the storyboard, along with the transitions between them, and any secondary animations that take place. This step can take up to a few weeks depending on how complex the animations are. Usually around three rounds of revisions are conducted to edit any scenes to the clients’ liking.

Audio Mixing – With the edits complete to the animation, the video will then be moved into an audio studio, where a professional will record the narration. Music and any sound effects will also be added.

Delivery – When the final audio has been added to the final animation, the project is now complete! Now is the time to upload it to your website, social media profile, or any other place you want. For an example, click here. 

An explainer video is quickly becoming an important complement or even replacement to an “About Us” page on websites. And a reported 95% of people have watched at least one explainer video, meaning it is an effective way to engage with potential customers.

One of my favorite quotes pertaining to development is very close to one of my favorite quotes pertaining to design:

“The code you write makes you a programmer. The code you delete makes you a good one. The code you don’t have to write makes you a great one.” – Mario Fusco

“A designer knows they have achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” – Antoine de Saint-Exupery

Both advocate for a “less-is-more” philosophy, and are good reminders that behind the sleek designs of iconic interfaces from Apple, Uber, and Google are highly optimized technology stacks designed to quickly get the right information to the right people. Here are a few areas to consider when striving to achieve a sleeker UX:

Text-to-Code Ratio

When a search engine crawls a page for content, it has to sort through way more information than meets the eye. This includes all the structure, styles, behavior, and visuals that are assembled by your browser, resulting in a beautifully orchestrated web experience. The catch-22 here is that some of the prettier, more impressive effects that can be utilized by a site to captivate audiences usually require a lot more code to pull off. That impacts one of the little talked about factors of page performance called “text-to-code ratio”. This metric is the measurement of how much human-readable content exists within a block of code.

While it does not directly influence page ranking in search engines, it is considered a key indicator for opportunities where page performance can be improved. Google recommends a text-to-code ratio between 20% and 70% per page. While on the surface this may seem like an easy goal to achieve, taking a closer look at your tech stack might reveal an abundance of needless complexity and that your pages could be performing better with the right kind of adjustments. This is where designers and developers need to work together to figure out if these effects make sense when keeping your key stakeholder’s objectives in mind.

How Styles Impact Performance

While in-line styles may save time to implement in some cases, they’re also one of the biggest offenders when your text-to-code ratio begins to fall. As developers, we’ve probably all done it at some point in our career, and in some cases it’s unavoidable. Whether included between style tags or as rules inserted into an element’s style attribute, it’s important to minimize these instances as much as possible.

In this practical example, I will show you how to improve your ratio by over 10% with very little effort.

Before:

<h2 style="font-size:21px">Numbered Things</h2>
<ul style="margin-top:10px;padding-left:10px">
    <li style="font-size:14px">Thing 1</li>
    <li style="font-size:14px">Thing 2</li>
    <li style="font-size:14px">Thing 3</li>
    <li style="font-size:14px">Thing 4</li>
</ul>
<h2 style="font-size:21px">Lettered Things</h2>
<ul style="margin-top:10px;padding-left:10px">
    <li style="font-size:14px">Thing A</li>
    <li style="font-size:14px">Thing B</li>
    <li style="font-size:14px">Thing C</li>
    <li style="font-size:14px">Thing D</li>
</ul>

If we take some time to work with a designer to come up with reusable styles that can be automatically applied by utilizing a reusable and cache-friendly stylesheet, we can begin to see some improvements.

After:

<link rel="stylesheet" href="/css/styles.css" />
<h2 class="heading">Numbered Things</h2>
<ul class="things">
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>Thing 3</li>
    <li>Thing 4</li>
</ul>
<h2 class="heading">Lettered Things</h2>
<ul class="things">
    <li>Thing A</li>
    <li>Thing B</li>
    <li>Thing C</li>
    <li>Thing D</li>
</ul>

In our CSS file we have the following rules:

.heading {
    font-size: 21px;
}
.things {
    margin-top: 10px;
    padding-left: 10px;
    font-size: 14px;
}

Our first example fell short of the 20% recommended minimum text-to-code ratio. However, making just a few adjustments to how we apply these styles resulted in an improved ratio by more than 11%. While Google won’t favor one over the other, it’s pretty clear to see that the second example is a lot cleaner, more organized, and because fewer characters are involved, will arrive to a user’s browser faster.

Another reason this becomes important is for those agencies who use utility-based pricing for hosting sites, where every byte transmitted by the host translates to an expense. While these are only small examples to illustrate the idea, you can probably begin to see the impact at a larger scale.

How Scripts Affect Performance

JavaScript. Love it or hate it, it’s deserving of respect. Without JavaScript, the web would not be the same. We would be bombarded with page refreshes, bandwidth issues, and general usability limitations. At Grafik, we standardized on jQuery for its backwards compatibility and polyfills for older browsers, namely IE11.

Our agency utilizes a design pattern called “atomic design,” which essentially turns page features into smaller individual apps that are integrated together on the back end. These visual components allow a content author to construct pages from scratch without touching a single line of code. This helps provide control over the design without detracting from the overall approved site design.

Sometimes, these atomic components introduce configuration-controlled interactions driven by auto-generated scripts. Where this begins to become problematic is when the same component is used multiple times on the same page, or even in conjunction with other components, adding needless bloat to the document itself.

Let’s take another look at a practical example which approximates an atomic component, much like what we would use on a production site. This might include using a button that does something cool when the viewer interacts with it, placed on page a couple times.

Before:

<div id="component-0" class="component cool-text">
    <p>Check it out, I’m the 1st component on the page!</p>
    <button type="button">Click Me!</button>
    <script>
        ( function( $ ) {
            $( function() {
                $( '#component-0 button' ).on( 'click', function() {
                    $( this ).html( 'Yay, I was clicked!' );
                } );
            } );
        } )( jQuery );
    </script>
</div>
<div id="component-1" class="component cool-text">
    <p>Hey, I’m the 2nd component on the page.</p>
    <button type="button">Click Me!</button>
    <script>
        ( function( $ ) {
            $( function() {
                $( '#component-1 button' ).on( 'click', function() {
                    $( this ).html( 'Yay, I was clicked!' );
                } );
            } );
        } )( jQuery );
    </script>
</div>

Even though the content of these components is unique per-use, it’s pretty easy to see that an almost identical copy of the script is created to control each instance of the atomic component. Let’s make some adjustments that allow us to run a single script that can do the work of both, without sacrificing functionality.

After:

<div id="component-0" class="component cool-text">
    <p>Check it out, I’m the 1st component on the page!</p>
    <button type="button">Click Me!</button>
    <script type="application/json">{ message: "Yay, I was Clicked!" }</script>
</div>
<div id="component-1" class="component cool-text">
    <p>Hey, I’m the 2nd component on the page.</p>
    <button type="button">Click Me!</button>
    <script type="application/json">{ message: "Hooray, I'm Clicked!" }</script>
</div>
...
<script src="/js/scripts.js"></script>

Instead of writing JavaScript dynamically, we structure our scripts to instead output JSON payloads which only contain the bits of information that previously made each script unique per use.

( function( $ ) {
    $( function() {
        $( '.component.cool-text' ).each( function( i ) {
            var Component = $( this );
            var Config = JSON.parse( Component.find( 'script' ).html() );
            Component.find( 'button' ).on( 'click', function() {
                $( this ).html( Config.message );
            } );
        } );
    } );
} )( jQuery );

The migrated script we place into /js/scripts.js then becomes the unified brain of the operation, serving all the functionality without needing to be dynamically generated. Only the HTML necessary to include the script is counted against the ratio, not the entire contents of the file.

Again, our first example fell well short of the recommended minimum density, but the improvements we made brought us within range to nearly 22%. The effects of this approach can vary widely since the nature of JavaScript is very different from application to application. In our example, we have a button that changes its own text when clicked, which by comparison to a real-world application is fairly simple. More intricate features will net a greater benefit since more code is typically involved under that scenario.

Key Takeaways

Pages are only as good as the content they contain, and I don’t think that will change any time soon. What will affect your ranking is how many people leave your site prematurely due to being frustrated or because they’ve had to sift through too much bloat and not enough substance. Paying attention to your text-to-code ratio can be one of many ways to achieve higher performance benchmarks on your pages.

It’s also critical to set yourself up for success from the beginning. One of the best ways to achieve this is by having designers and developers working and collaborating together more closely so that design challenges are solved with the greatest level of attention possible. Take a look at your text-to-html ratio, your styles, and your scripts.

Hopefully you’ve got some great ideas on how to improve your page performance after reading these strategies. If you’re interested in seeing some of these concepts in action, please check out our Technology offerings to see how we can bring your vision to life, or you can look through our Case Studies which are all fine examples of how we’ve helped others actualize their visions.

For a lot of content authors, designers and even tech-savvy marketers, the prospect of taking ownership over a website’s content management system (CMS) can feel like a nightmarish task that’s better left to developers. I often hear people say, “I don’t know what I’m doing!” or “I’m afraid I’m going to break something!” But the truth is that being beholden to a development team to make any and all significant changes to your website is not only inefficient and risky in this day and age, it also negates all the benefits of using a CMS like WordPress, Drupal or Pimcore in the first place. 

At their best, CMS platforms have out-of-the-box (OOTB) features that allow for a more streamlined and intuitive administrator experience. But customizations and complexity are inevitably added to the system over time by teams with various content management processes and workflows, rendering the back-end unrecognizable and truly terrifying to some. Here’s how you can minimize the fear factor and take back control.

TAKE THE TIME TO UNDERSTAND CONTENT DEPENDENCIES

Sometimes one type of content can depend on data from a few different sources within your website (these are called dependencies). For example, let’s say that on each blog post, the author’s name should appear next to her image, as well as an author summary. But when you publish the post and check it on the front end, the summary is missing. The next logical place to look for it would be where all the “authors” are kept to see if there is an empty summary field waiting for content. Once you understand the universal dependencies within the system, it will make for a less stressful administrator experience.

FOCUS ON WHAT YOU CAN CONTROL 

There likely will be a few things in the website admin experience that will be out of your control, so focus on what you can: keeping content organized. Let’s take media files as an example, which can include image, video, and PDF files. If your CMS has a folder structure, make sure you use it consistently and avoid uploading to the main media folder if there is a more specific home for something. Not doing so can result in duplicate uploads, a very messy library, and zombie files! In some CMS’s, media is ordered by the date in which it was uploaded, which can be handy but doesn’t always feel very organized. One thing you can do to ensure a clean CMS is make sure your filenames are accurate representations of the image (EX: jane_doe_headshot.jpg as opposed to “image_024.jpg”). Now when you’re faced with the horror of an unsortable media library, you can do a quick search for “jane” or “headshot” and get appropriate matches.

PREP YOUR WORK

By preparing your content before logging in, you can get right to work and knock off all the “to-do” items. Paste the title, paste the content, set an image (already uploaded with the appropriate naming structure 😉), assign an author, and hit publish. Check your work on the front end of the website and voila ⁠— you’re done! You are now the ghostbuster webmaster.

Content management can be an overwhelming task. By taking a few simple steps to better familiarize yourself with the content, focusing on what is in your control, and prepping all your files before entering them into the CMS, you are moving in the right direction.

ANY QUESTIONS?

via GIPHY

Channeling Tom Hanks’ character David S. Pumpkins, if you have any questions about your website or want to make your administrative experience better, we’re here to help!

According to Thomas Edison, genius is 1% inspiration and 99% perspiration. But finding that 1% can be challenging. As a creative, I’ve always been perplexed by the way “ah-ha” moments manifest themselves without warning. But through my career, I’ve learned a few helpful tips to prepare and guide me on the right track to finding my inspiration.

Tip #1: Creativity must always find you working. 

Good designers make it look easy, but don’t be fooled. There’s always a fair amount of blood, sweat and tears behind any successful idea that takes place in the preliminary period before you even start designing. This phase is often referred to as the “incubation period,” and during this time designers are encouraged to research, gain knowledge and soak in as much as they can regarding the client or topic at hand. Because knowing the subject matter will ultimately help foster and create more insightful connections later on in the process.

Tip #2: Get over your fear of rejection. 

Putting yourself out there and not caring what people think of your work can have significant impact on your own personal growth and be very beneficial to your team. As shame and vulnerability researcher Brene Brown says, “There is no innovation and creativity without failure. Period.” While sharing your ideas without hesitation may be easier said than done, studies have shown that vulnerability can help people connect on a creative level and has proven to lead to increased collaboration, productivity and cohesiveness.

Tip #3: Please do not disturb.

At Grafik, we’ve recently dedicated a spot in our office where work meetings are off limits. It’s a space intended to be a safe zone where anyone can go to think, wonder, and be left uninterrupted. Admittedly it can be challenging to find downtime on a regular basis thanks to tight deadlines, internal meetings, emails, and whatnot; but even in small doses, some quiet time can have a big impact on your creative thinking. According to a survey conducted by Invision and the IDC, 77% of respondents reported that communication failure as a result of a disconnected design workflow had significant impact on one or more customers. If you’re in a rut, try to find a space where you can be uninterrupted.

Tip #4: If all fails, put on some running shoes.

Some people prefer taking a walk during lunch, but I’m more of cardio girl. When my schedule permits, I’ll hit the nearby gym or go for a quick run to clear my thoughts. Studies have shown that exercise can improve certain types of cognitive efforts involved in creativity. And on a personal level, my creativity thrives when there is an emotional balance. Nothing feels as healthy as nice dosage of endorphins right in the middle of your work day.

The most frustrating (and also refreshing) thing about a good website is that it is never truly finished. Just as your business or organization continues to evolve over time, your digital presence should evolve to meet changing user preferences, content needs, design and device trends—without having to reinvent the wheel each time. 

As we prepared to launch a new website for NIH’s National Human Genome Research Institute this past year, we at Grafik were particularly focused on this idea of “perpetual beta.” The NHGRI site houses thousands of pieces of academic research and educational resources related to the field of genomics, serving as a comprehensive library for scientific concepts ranging from evolution to adaptation and DNA. On their previous site, there was a prevalence of content that was outdated, uneditable or impossible to find. Our challenge was to build a more scalable site—one that could disseminate the Institute’s groundbreaking research and information to target audiences within the scientific, education, health, and public communities for generations to come.

Here’s how we ensure a site like NHGRI’s will be sustainable and adaptable over time: 

Think beyond the traditional information architecture. Because our research showed that NHGRI’s many different types of users had a broad range of intersecting information needs and vastly different levels of expertise, we decided that a traditional information architecture (often oversimplified and visualized as a tree, with nice, neat categories of content) would not be a scalable or user-friendly solution. Instead, we recommended a search-first site, with a system that directs users to type in their queries on the NHGRI home page to find the results most applicable to them. We added in the ability to refine search results by audience, topic, subcategories, and more so that users can easily access decades worth of research and tools without having to navigate through an overly complicated navigation menu.

To best organize all the different types of content on the site, we used a content management web platform to ensure content was updated, rich with images, and categorized to appear in search queries. Achieving this experience required a heavy strategic lift during the content strategy and SEO phase of our project to understand and recategorize the content from research abstracts and papers to webinars, symposia, videos, fact sheets, educational resources, and more.

Consider a flexible website development strategy like atomic design. For a site of this magnitude, Grafik designed various components to act as lego blocks that could be mixed and matched to allow NHGRI’s content editors maximum flexibility while ensuring that each individual page could be customized for its own character and content flow. An atomic design methodology supports breaking a large website into its smallest pieces to maximize efficiency throughout the site. This flexibility and efficiency allows for effective customization without the added costs and parts.

Build a site that’s within the capabilities of your technical team to maintain. Grafik and NHGRI’s Development teams worked together to build the site, implementing various integrations, bridging references throughout the site to one another (something that we refer to as “interstitial tissue” here at Grafik), and checking for compliance, readability, and optimized user experience along the way. Our teams mapped all of the old pages of the site to new pages, ensuring that each old page would have an updated mate on the new site.

During the Implementation phase, Grafik and NHGRI migrated content, tagged each page with keywords and terms for search functionality, user tested the site with a network of supporters at NHGRI and Grafik, updated and fixed bugs, and ran the gamut of edge case test scenarios to ensure that the final site would fulfill the vision that we all imagined more than two years ago.

And because we co-developed the site, the NHGRI team is well equipped to call this site their own as it grows and evolves with NHGRI and new technology. The site continues to evolve as we monitor user interactions to inform decisions on incremental growth. This analysis is just a part of how we’ll continue to help NHGRI audiences find answers to their questions in even faster, better, and easier ways. After all, we’re never really done growing, improving, and evolving.