ekiminteractive.com

Every project and website is unique in how it is designed, perfected, and built. Below is an exploration into the four facets of my design process and workflow:

1. Learn & Listen
2. Simply Prioritize
3. Learn to See
4. Polish to a Shine

---

Learn & Listen

This is the reconnaissance. This is the gathering of information. This is the discovery of what is to be. All websites can start with a single concept or a justified need, but the details must then be filled-in to strengthen the process. In order to design a beautiful, functional, and accessible website focused on the appropriate audience, I need to understand exactly who the client is and what their motivations and frustrations are. I have to see through their eyes what it is they do and do not want from this partnership. There will never be anything of worth produced without this step.

In most cases, clients will have hundreds of worries, goals and ideas running through their collective heads. Some might say:

Although each and every one of these statements is important, there can be nothing without some kind of order. There can be no chicken before there is an egg. Every need that a client has to fulfill or even every emotion that a client wants to convey in their website is important. However, it is the prioritization of all these bullets against one another that gives the project real focus with real motivations for real end-users.

---

Simply Prioritize

The simplicity of prioritizing a list of items enables both me and the client to focus on a specific roadmap. This will set the standard and become the guiding light through the entire process. The prioritization of every single worry or issue, goal or need, and want or emotion involved with the website will become the benchmark for how it is designed and how it functions.

Many times, someone will say, "I want to have this entire block of text bold and I want it to be in bright red because I need this sentence to stand out!" At this point in the process, instead of designing based on desire, it is much more effective to design based on a need, because every design solution should address a specific issue. The issue in this case is that the sentence in reference needs to be clear and prominent. One design solution might be to bold it. Another solution would be make it bright red. However, these are not the only solutions and in fact, there are hundreds. The appropriate solution however must come not only from the issue it is addressing but also must be in harmony with all other solutions that address all other issues. Every single design choice should be there to either a) resolve an issue or b) become a subtle design element as part of the overall aesthetics of the website.

Another example of this is when a client will want something to zing across the screen so that it is easily noticed or want something to be so bright and colorful that it cannot be missed. Either of those elements might be fine if they were the only element on the page. However in reality, everything in website design must be in harmony with everything else so that the user's eye may have a clear path to travel. Flashy tools like sounds, bright colors, or movement should never be used merely for the sake of employing "bells and whistles". A website should start simply. It should be simple, yet elegant. And it should evolve as simplistically as possible. Later, when a particular issue requires a specific bell or whistle which can be appropriately worked in to combine with all other elements on the page, these more dramatic modifications can be made. Most of the time, it is not the busiest, brightest, or loudest element on the page that gets the most attention, but instead it is the simple, calm, and purposeful element that will command the eye of the user. Designs that are too busy will seem chaotic, unprofessional, and out of focus. This will annoy a user, or worse, it will drive them away. Rather, whitespace around a focal point of a particular page will feel like a Zen experience for the user's eye.

Everything going forward can be boiled down to a specific issue that needs to be addressed. The best way to prioritize all these issues, goals, etc is to get them all into one straight list. What is the most important key task, the second most important, the third, and so on. This gives both me and the client a clear indication of what the purpose of this website is, from the most important key task all the way down to the very least. If after a design is completed I could sit a user down in front of the computer and see that they were able to successfully accomplish all these key tasks with very little difficulty, then the website could be measured as a success. The worth of a simple, organized list of key tasks is immeasurable.

---

Learn to See

Armed now with a detailed roadmap, I can begin the iterative design process of building mockups with concrete design solutions. These design solutions will become my toolkit. The goal of the iterative process is to create a beautiful, functional, and accessible website focused on the appropriate audience. Nine times out of ten, the first few designs will never see the light of day by the interactive public. However, by working through a design with a prioritized checklist of issues, the trial and error building process, and usability results and subsequent modifications, it will eventually attain its desired goal.

There are always design best practices that have to be constant and unfailing. The design has to be consistent and perform as the user would expect. It has to be aesthetically pleasing and it has to be clear and readable. It has to be adaptable to future modifications. It has to be accessible and usable to everyone regardless of their background and environment. And most importantly, all design choices must fill a particular need and work together in harmony. Rarely this can be attained right out of the gate, but usually it will take time and a focused effort.

Consistency of a design is just as important for capturing the attention and focus of the user as it is for enhancing the professional look of the site. There should be a minimal amount of elements in a website that force the user to guess what is going to happen or what needs to be done. You don't want one button to perform an action in one way and on another page, have that same button perform an action in a completely or even slightly different way. A confused user will not be a user for long. They will leave and go to another website that is clearer, before they will take the time to learn a complicated website.

Aesthetics of a design are important for achieving a professional and trusted look, while allowing for a pleasurable user experience. One of the best ways to describe this is to think about any book you've ever read, movie you've seen, or product you've purchased. Every one of those had some type of design treatment. They are each marketed in a specific way, because all else considered, the design of a product is what makes you want to associate yourself with it. A bottle of water in a plain plastic bottle with a plain paper wrapper will not draw nearly as much attention as a uniquely shaped bottle with a well-designed embossed label. In this instance, both design and an addition of a bell or whistle served their respective purposes. Inside those two very different looking bottles is the same plain water. A well-designed, professional looking site will attract and hold the attention of a user much more than a site of similar content which is not designed as well.

Adaptability of a design is crucial, as a site must have the ability to change with the times and mediums that surround it. Every website will change over time. New ideas come up. New marketing strategies are undertaken. New products or services are introduced. The technology and medium of the internet itself can and will change. Therefore, a website needs to be able to adapt to any and all new driving forces. The implementation of the HTML (or XHTML) and its driving CSS (Cascading Style Sheets) must be clean, organized, valid, and able to shift to meet whatever comes down the road. When a website is designed professionally, it is designed to be coded professionally. It does not matter if the website is built on HTML or PHP or if it is driven by CSS or a database of images and content; the website must be as clean and organized as possible to allow for it to adapt in a clean and organized manner.

Accessibility and usability of a design are important for ensuring that everyone can use, experience, and enjoy a website in the best possible way. There is no way to know who will be coming to a website and there is no way to know what vehicle they will be navigating it with. I don't know if a user will be on a public, text-only terminal. I don't know if a user will be on a slow outdated computer with a small screen resolution. I don't know if a user will be blind (or color-blind). I don't know if a user will have certain functions turned off on their browser. I don't know if the user will be able to use a mouse or if they have to navigate with a keyboard. I don't know if a user will have some other motion-impairment that makes long scrolling difficult. I do, however, know that one or all of these persons could potentially visit a website at any given time.

Past exceeding all guidelines and regulations of Section 508 [of the Rehabilitation Act] and past general web best practices as started by the W3C (World Wide Web Consortium), a designer is obliged to create a site that allows for a pleasant and functional experience no matter a user's background, skill level, disability, or technical know-how. A website that does not take into account someone who is colorblind is, in essence, discriminating against people with visual impairments. A website that forces a user to have to wait an incredibly long time for a page or element to load is, in essence, discriminating against people with older, slower computers. The best way to avoid this altogether is with what I like to call "universal design." When I design universally, I allow a website to be viewable, accessible, and aesthetically pleasing no matter the user's background, platform, browser, computer savvy, disability or impairment, gender or age. A good way to visualize this is to picture a group of categories on a page. If the intent of the page was to explain the different between each of the categories and it was done without universal design, it might say that all items in red are new items and all items in blue are regular priced items and all items in green are sale priced items. If however, a user who is red/green colorblind is viewing this page or a user who has their own high contrast (usually black and white for easy readability) colors set is viewing this page, then the difference between each of the categories will be unreadable. A better, more accessible solution under the umbrella of universal design would be to not only denote each of the categories with a color but also with an alternate indicator, like a symbol. This way, for the general population, the ease of use by scanning for each color will work, but for someone who is colorblind the information is still usable and they can simply scan by the different symbols. This is just one example of the universal design best practices I use. Similar concepts such as scalable text, alt tags behind images, minimal use of images as text treatments, and valid and compliant code all follow universal design best practices, The time it takes to account for this is minimal compared to the worth it holds for the variety of users that might potentially be on the website.

As with any project, a website is a medium that will evolve. In its evolution, the usability of a website should only seek to improve. A website must be designed in a manner that balances the usability between ease of use and ease of learning. The ease of use is how simple and intuitive it is for a user to navigate and understand a website. The ease of learning is how much a user must learn and understand in how a website operates before they can navigate effortlessly. If you make a website too easy to use, you run the risk of a too basic website that is "dumbed-down" to the point that it offends a web-savvy user. If you make a website too hard or complicated to understand, you run the risk of frustrating a user and having them give up too quickly. A balance between the two must be obtained. A website should be simple and intuitive enough that anyone can universally navigate it but it should also be complex enough that some quick-to-understand design elements can be used. The design should be simple and elegant and if it begins to break down because of an outdated computer or a text-only browser that it would fail gracefully and never lose its readability.

A well-designed website is wholly consistent, aesthetically-pleasing, adaptable, accessible and usable. Accomplishing all of these points in a design is crucial in developing a clear and harmonious look, feel, and function to a website. Each point above is crucial and each point deserves the attention it commands.

---

Polish to a Shine

During this process, a lot will be learned about the website project and many of the priorities will evolve along the way. In turn, the design will also evolve and react so that it is the best possible solution it can be. A website is a commercial for the message it is speaking. It can always be available, it is can always be accessible, and it can always be current and flawless. The iterative process will ensure that the appropriate amount of thought and time goes into a particular design or choice of designs. A mockup is done to allow a client to visualize on the screen or on paper what the website might look like. Talking about a menu doing this or that is one thing, but seeing what the menu looks like when it is next to the search bar and under the logo and above the content is a whole other story.

Because a website ultimately belongs to the client and it is meant to show off their service, or product in the optimal light, I want to make certain the client is happy and understands the reasoning for each and every design choice. Once initial mockups are looked at and discussed, changes will have to be made in a normal iterative process to the design so that every element is in ultimate and clear harmony with one another. The next design or design set will improve on the first based upon what the client is concerned about or their reactions to seeing it altogether. The goal at the end of this process is to have a website that accomplishes its key tasks, generates a positive response visually and functionally in both the client and user, is accessible and usable to people of all backgrounds and environments, and is able to adapt to future modifications. Once that is complete, the website is ready to serve. The website is ready for public consumption. The website is ready to have its day in the sun.

In time, the needs of a client and the website will evolve in new, unforeseen ways. In response, the solutions of a website must too evolve and new ideas or motivations must be brought into the limelight. Just because the website is live doesn't mean the website is set in stone. Because it is adaptable, the book can be reopened and the drawing board can be set back up and new design intentions and additional key tasks can be introduced.

---

Download/Print

• Entire Design Process (PDF)