Using the Design Patterns Methodology for Creatives

Posted on January 13, 2024June 29, 2024 by admin

Who is this for?

UX/UI Designers, Front-end Developers, Web Developers, Web Designers, Graphic Designers, Back-end Developers

What is the Design Pattern Methodology?

The Design Patterns methodology is simply the reuse of general solutions to solve common problems. This same methodology can also be seen in use in Atomic Design. This methodology has provided a systematic approach to design in which the components, or patterns, we use to solve common problems in design can be reused to solve common interface problems.

Frameworks like Bootstrap and Foundation provide reusable sets of HTML, CSS, and JavaScript that are put together to create patterns. These patterns can be further extended using technologies like LESS or SASS and React to create fully functional UI patterns like the ones that are used in the browser that can then be individually included and combined within a full solution and adjusted as needed between projects.

How can I use this as a Creative?

Creatives seem to be placed in a box using templates, widgets, and components. That box has been used to standardize design and, in some cases, replace it entirely. However, by changing the way designers and developers work together within the design pattern methodology, we can use those created patterns and functionalities not only to continue thinking outside the box but also push our design and development possibilities further by improving the accepted functionality.

Designers and developers reuse patterns built into the browser (links, drop-downs, inputs, etc.) that allow us to interact with the websites we visit daily. Some solutions have already been created and are now an accepted standard for using the Internet (accordions, tabs, navigation drop-downs, etc.). These patterns were designed to meet the needs of users, and by thinking of these patterns within this methodology, we can look for ways to expand them and create new, better solutions for users.

Why solve the problems that are already solved?

Think about what you’re designing and developing, and try to create solutions for the problems that have not been solved yet. Push yourself past solving the same issues over and over again. Instead, take the problems you can solve and expand them past what is expected. When you push the norm, you can bring new ideas into the world of creative standards. Never be satisfied with what is — be an innovator.

Define: Sketches, Sitemaps, Style Tiles, Wireframes, and Mockups

Posted on January 7, 2016June 19, 2024 by admin

A rundown of common creative processes.

If you are ever involved in a creative project, you may have heard the terms “Sketches,” “Sitemap,” “Style Tile,” “Wireframes” and “Mockups.” But what do these mean and how are they different? In this blog we’ll go over the role of each and what you can expect to receive from your designer.

Whether you’re involved in a branding project, a website redesign, or an app and software development project, there is a lot that goes on behind the scenes—even for the creative side. The final outcome of your project happens only after the initial discovery, research and planning, ideation and development, and final refinements have been completed. But how did we get there?

Just because much of the creative process happens inside the mind of a creative professional doesn’t mean we don’t have visual pieces to reference. We have sketches, wireframes, style tiles, and mockups to chronicle each step in the creative evolution. Let’s take a look.

What is a Sitemap?

You may have heard the term “Sitemap” used to describe a simple listing out of all pages of a website. While this is essentially what a sitemap is, we take it a step further and use Xmind’s “Mind-Mapping” software to visually map out all pages, content, and global elements of a website or application. We can look at high-level navigation only, or drill down all the way into small blocks of content on each page.

THE BENEFIT OF USING SITEMAPS

Sometimes it’s hard to wrap your head around the entirety of a website or application’s content, especially if it is on a large scale. By mapping the sections out, we can be sure to account for all necessary pieces of information. Once we’ve got everything down, it is easy to review the structure and categorization of the content and make changes accordingly. This ensures that each section’s content is relevant and fits in with the rest of the content in that section. Sometimes we break larger sections down or combine smaller sections together. The idea is that we have balanced, relevant sections that are easy for a user to understand and navigate to. Having all pages of a website or application laid out visually in a sitemap is the easiest way to organize the content.

What are Sketches?

This one is pretty straightforward. In those first brainstorms inside the creative’s mind, sketching is a way to quickly get these ideas on paper. Sketches can happen anywhere—a traditional sketchbook, a napkin, a scrap of paper on a desk…anywhere! The goal is to get as many ideas out as possible. The more sketching happens, the more ideas present themselves. One sketch inspires another. It is truly a creative practice.

THE BENEFIT OF SKETCHING

The great part for creatives is that sketches are purposefully rough. Nothing is off limits and nothing is polished. This gives us the freedom to explore, be messy, have far-fetched ideas, and see where we land—without the expectation that these ideas are in any way refined.

Because of their sketchy state, sketches are almost never shown to the client. They serve as a visual cue to the designer who holds the vision of their final form in her or his mind. No one else truly understands what the rough scribbles will become. They are primarily there to serve as a starting point for the next step in the creative process.

What is a Style Tile?

While sketching has been practiced for as long as art and design have themselves, Style Tiles are a relatively recent practice for designers. Similar to a mood board, Style Tiles are a collection of visual elements to inform the direction of the design. While mood boards are typically used in branding projects to show a range of visual styles in a collage format, Style Tiles are specifically used for user interface design on websites, apps, or software.

What’s great about them is that instead of random pieces of visual information jumbled together to create a “mood,” Style Tiles are more concrete and direct. In a Style Tile, we typically pull together a color palette, typographic styles for headings and body text, button styles with various states, photo treatments, and other visual elements that will likely be included in the design. While together these elements don’t create an actual web or app design, they give enough visual information for a client to understand what the final look and feel will be.

THE BENEFIT OF PROVIDING STYLE TILES

Style Tiles are where most of the design direction takes place. In terms of efficiency, it is much faster to design a collection of elements that work well together and reflect the client’s brand than to create a full design comp. For this reason, we ask our clients for revisions and approval on the Style Tile before moving to a full design comp (a mockup of what the final design will look like). Once approved, the Stile Tile serves as a launchpad for the designer into the full design phase.

What is a Wireframe?

Usually occurring simultaneously with the Style Tile are Wireframes. Where Style Tiles focus purely on aesthetics, Wireframes are all about structure and workflow of the design. They are purposefully not meant to be pretty—they’re usually boxes, lines, and text blocks on a page—so that you focus on the layout alone.

THE BENEFIT OF WIREFRAMING

Wireframes are to user interfaces as sketches are to logo designs, only the client gets to review them. They are a quick glance at the overall layout of the page and give you a sense of hierarchy, spacing, and where the content will go. Wireframes are a way to make sure we account for all images, headlines, text areas, and calls to action in the design. It also gives us an idea of how a user will navigate the website or application, and how they will move from page to page. Because they can be made quickly, it is easier for our clients to request changes in this state than in a fully designed comp.

Wrapping Up

All of these steps in our design process are to help you, our client, be well-informed and involved every step of the way as we take your idea from conception to consumption. We hope this post helps you know what to expect on your next project with us. Like what you’ve seen? Contact us to get started on your new project.

The Making of “The Obots”

Posted on March 24, 2015June 17, 2024 by admin

Every designer knows that clever, conceptual work doesn’t just happen. That simple abstract logo doesn’t just come to us, neither does that crazy, detailed illustration. We get there through trial and error. We look for inspiration wherever we can get it, and try out all of our ideas, with different techniques. If one mockup doesn’t work, we move on to the next.

That’s why I’m a strong believer in doodling. Putting pen to paper and simply making strokes can get the creative juices flowing. It will eventually help the ideas to flow, too. That’s how I like to start all of my designs. If I don’t have an initial idea, I start scribbling and something will usually pop up. If that doesn’t work, I then turn to other sources of inspiration, like Pinterest or going for a walk. If even that doesn’t work, then I have to try something new.

This is the process I followed when I designed my first logo for one of our clients. I had an initial idea in mind, but it just wasn’t working. I was drawing a creative blank. Literally. Instead of getting frustrated with myself, I decided to stop thinking about the logo, and I started doodling again. I drew whatever came into my mind, and I had fun with it. This is where Mike Envocski came in.

Mike Envocski

When I’m doodling, I tend to think about what I’ve seen lately to help me just start drawing. In this case, I was thinking about office surroundings. That morning, when I was pouring myself some coffee, I noticed how awesome our mug collection was. My favorite was a Monsters Inc. mug shaped like the character Mike Wazowski. I was also thinking about how unique the Envoc name was. The macron “ō” had an interesting shape to me. With these two things in mind, I made a quick doodle of Mike Envocski.

How did this help with the billable work I was stuck on?

Because of my creative block, I had to lessen my frustration. I needed to just make something cool and be more comfortable trying out new ideas. After I drew Mike, I was more creatively free to try new concepts, and I was able to deliver better logo mockups to a happy client. Plus, I had some doodles that were funny, and that never hurts.

The First Obot

When I showed the Envoceans Mike Envocski, they thought it was funny, too. They wanted it to become the Envoc mascot. I thought that was an awesome idea, but we knew we couldn’t have a mascot similar to a Pixar character. Someone suggested that we make robot mascots instead, since we live the tech life. That’s when the very first Obot was created.

Designing the Obot Family

Working collaboratively, we decided that this little guy needed some friends, and started sketching more robots in all shapes and sizes. While we were sketching, we were coming up with ideas for how we could use these robots. We didn’t want to create something cool without sharing it. After consideration, we thought it would be fun to use them during the holidays and make illustrations to post on social media for everyone to enjoy.

When we had a good idea of what we wanted the obots to look like, I began creating their skeletons in Adobe Illustrator. I wanted to make sure each of their shapes were interesting and unique, so I tried different things out for each one. After I had their shapes down, I started bringing them to life with the Envoc brand colors.

When I drew the first robot, I made him a little more dopey. Because they are usually smart, it was fun to imagine a not-so-bright, knuckle-dragging caveman of robots. I followed through with this personality when deciding on his color.

When I think of robots, I usually think of The Jetsons. I loved that show growing up. It influenced the second Obot’s design and personality. Because I had the dopey obot already, I wanted to contrast that by creating an obot that was smarter, more evolved, and a bit feminine. This Obot’s color changed to purple later on because we wanted to use all of Envoc’s brand colors and give it more femininity.

The third robot was an exploration more into the “dark side” of the Obots. Since the first two robots had nice demeanors, we had to add some conflict. No family is perfect, right? When designing this one, I was influenced by some of the big-headed villains I’ve seen in comic books. The idea of a tiny villain is just hilarious, and it’s fun to use in illustrations.

The last Obot that was designed was the hardest one. We knew we wanted one of them to look like the macron “ō” within the Envoc name. So, I worked off what I already had for Mike Envocski, and I started turning him into a fun-loving robot. This one became the leader of the bunch.

Naming the Obots

Once we finished developing the Obots and their personalities, we printed some swag stickers, and we had some fun creating holiday illustrations, like the 2014 Christmas microsite. Our social media fans were enjoying it, too. At this point, we didn’t have any names for them yet. It was hard for us to decide amongst ourselves, so we chose to let social media decide. We picked 5 names for each Obot, and we created short animations to show their different personalities. People could then vote on their favorite name for each Obot through Facebook or Twitter. To give them some incentive, we gave away swag stickers to those who voted the most. Finally, they had their names: DOM, Watson, Vector, and Sprocket.

We still use the Obots to market Envoc in a fun and lighthearted way, and their personalities continue to develop through the holiday illustrations. From what we’ve done so far:

Vector is usually up to something.
Watson is always having some fun.
Sprocket is usually helping everyone out in some way.
DOM is always a little clueless.

Keep an eye out in our next illustrations, and you’ll notice these things playing out.

What I Learned

Looking back now, I learned an important lesson when designing the Obots. You can’t be a designer with a fear of the new. If I didn’t decide to take a step back and try something different with that logo design, I wouldn’t have created something better, I wouldn’t have those silly doodles that turned into the Obots, and we wouldn’t have won an Addy for them.

My advice to any designer with a massive creative block like the one I had is this: just make stuff. Keep trying new sources of inspiration. It may not work out the first time, and it may be outside your comfort zone. No worries. It’s worth it. You never know what you might end up with.

User Experience vs. User Interface

Posted on March 11, 2015June 29, 2024 by admin

With the rise of User Interface design, there has been some confusion about the difference between it and User Experience design. Both are important when designing an application or website, but each brings a different aspect to the finished product.

User Interface: how the user and a computer system interact, particularly the use of input devices, visual controls, gestures, and software.¹

User Experience: the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.²

Many times, User Experience design is confused with User Interface design because of how closely they work together, so to explain both and the differences between the two, I’m going to tell a story.

The Journey to the Door

Once upon a time, there was a small town in the shadow of a mountain. The land was used up and desolate, so the people of the town had to travel to their neighboring towns to get food each week. This was a special town because in the mountain that shadowed the town was a door. This door was the entryway to a magical world that was rumored to have a magical power to grow things that were planted in the ground with a snap of a finger. Everyone wanted to explore the world but the door was high on the edge of a cliff and there was no path to get to the door. One day three people decided they would try everything they could to get to the door, so they gathered all their plans and ideas, and each began his or her journey to the door.

The first person decided to climb the mountain from the bottom up to the door, but on the first day had to turn back because he got a hole in his shoe.

The second person decided to take the long path on the far side of the mountain and repel down the cliff to the door. When he made it halfway down the cliff, he realized he didn’t pack enough rope so he had to turn back.

The third person decided to build a beautiful staircase up to the door so he could come and go as he needed, so he hired a team to come help him build his staircase to the door. When he made it through he found a place in the magical land to plant his garden. As soon as the seeds were planted – SNAP – all the seeds instantly grew into full plants covered with fruit and vegetables. The town rejoiced and never had to leave town for food again.

Journey to the Door: Explained

This is a story about the different experiences of three other people.

The first person never checked his gear, so he wasn’t prepared for the journey and had a bad experience.

The second person checked his gear but didn’t know how much rope he would need, so the gear was right, but his lack of planning negatively affected his experience.

The third person took his time and built a way to get to the top without interacting with the mountain. This provided a better experience not only for himself but also for anyone who wanted to get up to the door.

All three deserve credit for designing a trip; each had a user experience and developed a user interface to help them accomplish the journey. Two of them failed because the user interface (shoes, rope, etc.) didn’t fit the task at hand, which made them have a poor user experience and caused them to give up. The third not only considered the user interface (mountain, stairs, etc.) but considered the future users’ experience and came up with a good user experience for the town’s people to easily make the trip to the door without having to take long journeys each week.

Simply put, User Interfaces are the tools a person uses to accomplish a task or set of tasks, and User Experience is how a person feels when using those tools.

Wrap Up

Simply put, User Interfaces are the tools a person uses to accomplish a task or set of functions, and User Experience is how a person feels when using those tools. Based on this definition and the story, we can see that anyone can design a trip (an interface and an experience). However, only the design that accomplishes the goals and considers all aspects will let the user experience something magical.

Are you in need of the proverbial staircase to the magical door?

¹“Google Definitions: User Interface.” Google Search. 3 March, 2015.

²“Google Definitions: User Experience.” Google Search. 3 March, 2015.

Trust Your Designer

Posted on June 24, 2014June 19, 2024 by admin

The thought of trusting your project’s entire visual identity with a professional graphic, web, or UX designer can be scary for someone who has never worked with one. This post was written to ease your anxiety and help you understand what’s going on behind those trendy, thick-rimmed glasses. Here’s why you can breathe a sigh of relief:

There is a great quote that I like to refer to now and again: “Designers are meant to be loved, not to be understood.” As a designer myself, I have come to terms with how true this statement is. Most of my friends wouldn’t laugh at the joke, “I shot the serif,” or go on a rampage about how awful the font “Papyrus” is (ick, just typing it makes me cringe). My husband, who is a Medical Physics Ph.D student, is just about as far away from having the “eye” as you can get. So trust me when I say that I know how foreign designers can seem to a non-creative person.

We are an interesting breed and we know it. We get that you don’t understand how we think, why we care so much about tiny details you didn’t even notice, or how important “white space” is to our sense of well-being in this cluttered world. But behind those inquisitive gazes and trendy outfits, we are actually really smart—just in a visual way. And guess what? We want to help you and your business. You can trust us, and here’s why:

A lot of people assume that designers are complete artsy-fartsy types—super emotional, irrational, and impractical. The kind of people who would sit around painting and writing poetry if they could (not that that’s a bad thing). And some are. However, we by and large do not consider ourselves to be fine artists. This is for a few reasons:

We want to actually make a living (haha… but really)
We like using our creativity in the real world, not only on a canvas
Our preferred medium may be in print or pixels, not with pencils and paint
We consider “art” to mostly be “for arts’ sake” whereas “design” is a means of problem-solving—with objectives, goals, and a clear purpose (It’s a long discussion.)

For these reasons, designers tend to land closer to the middle of the right and left-brain spectrum than on the far right. This is great news for you, our client. Why? Because we will give you:

Creativity with rationale behind it
Order, organization, and clarity
Something people WANT to look at (and keep looking at)
A clear message delivered in a strategic way
Visually engaging material that your customers will keep interacting with

Those things sound great, right? So don’t fret. We understand that it’s hard sometimes to let go of the familiar. For instance, we recently had a client that was having a hard time letting go of their preconceived design expectations for their website. They were set on a particular color and typeface that didn’t necessarily appeal to their ideal audience. They were hesitant to allow “white space” (empty space for design purposes) on their website and were adamant about filling up every open spot with their company tagline. But, with a little trust and a leap of faith, the client was able to let go of their preconceived notions about design and let us flex our expertise. With a few design comps and a couple of revisions, we were able to show the client that we had their goals in mind the entire time, and brought the project further than they could have ever imagined. The end result? A successful website and a happy client.

So whether you are working with a print designer, web designer, or user interface designer, know that you are in good hands. Our goals are your goals. You can sleep soundly knowing that we are professionals with knowledge and experience under our belts. When we do what we do best, our clients are always happy with the outcome. It’s ok to trust your designer, you will be glad you did!

Need to build a new or update an old website? Beginning a new company and need help with brand identity? Need a rebrand?

TRUST OUR DESIGNERS

Envoc Branding: A History

Posted on May 20, 2014June 29, 2024 by Calvin Fabre

Envoc Branding: A History

Trust us, Envoc didn’t always look this good. In fact, the new Envoc brand evolved over several years before landing on what it is today. It was a slow (and sometimes painful) process, but it was worth it. We finally have a brand that speaks to our diverse expertise and brings us into the modern tech and design world. As a huge bonus, we’re finally proud to show it off on our new website without having to disclaimer it with “just wait, we’re building a better one.” In this blog post, we are going to take you behind the scenes to see the good, the bad, and the in-between stages of building our better brand.

Envoc: an Idea

Let’s go back. Way back. Back to when Envoc was just a thought in our CEO, Calvin’s mind. He had established High Power Consulting as a software consulting company — which had its success.. But Calvin wanted more than just to consult—he wanted a true partnership with clients that would allow for collaboration as well as education. The word “invoke” is defined as “to call on for support or inspiration,” which is exactly what we wanted our clients to be encouraged to do. And thus, with a little twist to the spelling of the word, Envoc came to be.

Envoc 1.0

We were primarily a development/tech/software shop in the beginning, and the first Envoc logo gave us a great starting point. The colors and sans-serif type spoke to the tech industry at the time, and the tagline “a better reality” gave our brand its purpose for us internally and more importantly, for our clients. This first iteration established us as a company, but was not fully refined—yet.

Envoc 2.0

Fast forward three years and Calvin had yet another brilliant idea. What if we could take the power of software development and pair it with beautiful interfacing? Enter the Marriage of Maxon Media, a creative design firm, to Envoc. With the addition of designers into the mix, the first Envoc logo needed to be revisited. With a fine-toothed typographic comb, the next iteration was a tightened-up version of the original. The kerning (an industry term for the spacing between letters) was adjusted, and the proportion of the logotype to tagline was altered as well. It was more of what we like to call in the industry, a “logo refresh,” and not a full redesign.

Other than the logo and a few letterhead templates, there still was very little branding that had been established. A logo is not a brand. Who the company IS, is its brand. This new chapter in Envoc’s history was still new, and we were still learning who Envoc was (we’ll just call this the teen years). The Envoc brand needed more thought and care than it had ever had before.

Concept Time, Back to the Drawing Board

After the creative Envoceans were nice and settled into the groove of the development environment, they went to work on concepting. Hard. There were several ideas that were tossed around, and even “a civil war” over the macron (the line over the “o” in the logo) broke out briefly. It was a rough time. None of the concepts seemed to fit Envoc just right.

Finally, the ideas started to come together for there to be a representation of not what we do, but who we are. We realized that what sets us apart is the wide variety of skillsets under one roof, all coming together to make beautiful and functional products. The concept of “the prism” stuck. Multi-faceted and visually dynamic, the prism scheme represented our team perfectly. We went to work hunting down reference images that would serve as an inspiration to the budding brand.

Building the Brand

We then started drawing with pencil and paper shapes that could be used with this idea. And they were terrible. So, we called on our resident genius, Matt Vid, to help us build an interactive tool we could use to make the shapes we were longing for to make our branding dreams a better reality (how very Envoc of us…).

Bringing it All Together

With a way to execute our “prisms” perfectly, we were finally on the road to something big. Next was color. We developed a broad color palette, with our green and blue being primary and adding in several complementary colors that would represent our diverse abilities. Once these colors were applied to the prisms, the result was a thing of beauty.

With a beautiful backdrop in place, we were ready to finalize the new logo. We kept the blue and green from the original Envoc logo and pumped up the saturation so the colors would pop. We updated our logotype font to the much-more modern and web-friendly “Geogrotesque,” perfected the typographic nuances, and voila. We had the new face of the company.

We Have Standards, People!

Finally, we had some pieces to work with. As with any of our branding projects for clients require, we made our own brand book that outlined specifics for using the various pieces. We have standardized the typography, logo usage (including what NOT to do), color usage, and how to use other elements that are brand-appropriate, like icons and patterns. The brand book ensures that the elements are always used properly, consistently, and appropriately. We want to make sure we have the same message going out in any of our branded material.

Like we mentioned earlier, a company’s brand is so much more than just the visuals. It is behind everything a company is, does, and even says. That’s why we wrote out a document defining Envoc’s Voice and Tone as well. Think of it as a standards manual for any writing that is sent out through Envoc, be it blog posts, emails, newsletters, social media posts, and the like. It is so important that a company has a consistent “voice” that can become as easily identifiable as their logo. The “voice” is the “person” that Envoc is.

Apply that Brand All Over

Now that we had our visuals and persona standardized, we were ready to rock and roll. Business cards, mousepads, desktop backgrounds, social media pages… everything we could get our hands on we re-designed using the new brand as a driving force.

Website FTW

After all of this, we were ready to take on the biggest internal project of them all: the company website. The new envoc.com is the crowning jewel of our new brand (and, as you can tell, our pride and joy) and we are mighty proud of it. Another long and enduring process, but one that was more than worth it. After we launched it in early April, we finally felt that the new Envoc had matured and was ready for the all to see.

Fin.

For some reason, it’s almost more difficult to design for your own company than for a client’s. Maybe it’s because you have complete control and feel such a personal connection to it that you won’t stop until everything is perfect. We definitely had our struggles and put in tons (hundreds?) of hours, but having a brand that fits exactly who we are makes us proud to be a part of it.

We hope that you have enjoyed reading about how our brand came to be what it is today. If your brand needs some love (or needs to exist), we would love to talk to you about it. Invest in your brand. Spend the time. It is so important.