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.

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.

Late: Technical Debt Interest Payment

Posted on February 21, 2011June 29, 2024 by Calvin Fabre

Your Technical Interest Payment is due.

If you have ever been involved in the development of something as simple as a Microsoft Excel macro, as normal as a public-facing website or portal, or been a part of a full-blown enterprise software application, you are most-probably guilty of ringing up “technical debt” which must be serviced. While national and state spending, deficits, and debts are the first things we hear about when we rise and shine, your technical debt may be accruing in quiet solitude.

What is Technical Debt?

“It is the extra effort technical people will need to make in the future in order to pay for quick-and-dirty design choices of the past.”

Who is responsible for this charge?

Remember the hot-shot programmer’s code that your team is constantly going back to fix? Remember the programming from the low-cost, overseas shop who didn’t code to your company standards, language or dialect? Remember the boss that “needed the project no matter what” who made you cut corners and who promised you could go back later and “do it right?”

Principle and Interest – Where is Dave Ramsey?

In this metaphor, “interest payments” are the countless fixes made and support calls taken to service the debt of a production system. With a large technical debt there is so much time spent “supporting and fixing” that there is no time for adding new features. If you think this frustrating, try getting approval from your client or boss for budget money or time to “go back” and improve the design by paying down some of the interest or principle. Be sure to explain that there will be no real difference the customer or user sees .

I thought some debt was good

One could argue that, in business, you might incur some debt to get to the market quickly, race to a trade show, or beat some deadline in order to grow your business. If you agree with this, you have to agree that very debt will someday come due. The same is true with technical debt – it will come due, with interest.

What can I do? I have Technical Debt!

With any problem, the first thing you need to do is acknowledge you have one.

Second, you need to include time and money in your budget for paying it down. How much depends upon how deep in debt you are. Third, set debt ceilings on future projects by committing to standards, procedures, and the absolute best people you can find. Lastly, manage your debt with periodic reviews logging them into a “debt backlog” and use a “debt snowball” to pay them down with any item over 90-days treated as “critical.”

Debt Assessment

You would not believe some of the projects we have been asked to fix for clients. To protect the guilty, we will not name names. We will however, give you a 30-minute, remote assessment of your technical debt and identify short and long-term risks. Why not schedule at 30-minute discussion with me, Calvin to see how we can help you? You can book me using this booking link. Or, give us a call at +1 225 384 5549.