A Long Process - Website Design

Recently, I had someone ask me about the process I went through to build a website. I thought this information would be helpful to share on the Design Cache blog!

A Long Process

Building a website is a long process. The nice thing about building a website is that you can make it as complicated as you would like. Because I suggest that my clients use the WordPress platform, I will answer your question in this regard.

Wireframe

First and foremost, I create wireframes. Wireframes are sketches/drawings that show what the website will look like. During this stage, it is important to determine the number of pages the website will have. In addition, the nomenclature for the navigation should be decided during this phase. As a designer, I try to have as much of the work done and planned out before actually going to the computer. This often saves my client money while saving me the stress and time of fixing mistakes down the road.

Choose a Theme

Once I have wireframed the website to how my client wants their website layed out, I begin to search for themes. WordPress themes can be found at numerous different locations. My first stop is often themeforest. As I search for a theme, I make sure to note whether the theme has e-commerce capability or other important features that were determined to be necessary from the wireframes.

Once I find a theme, it is time to upload the theme to my server/host and get started. If you have trouble uploading the WordPress theme, I recommend contacting your host provider to see if they can help you. After the theme is uploaded, make sure that you complete the customization section of the website first. This will start to shape your website with a few clicks. After this is done, and you have uploaded content, you may want to install the Yoast plugin or other plugins that allow you to customize the site with widgets, ect.

Customization

Every WordPress theme is different depending on the builder that is utilized. Saying this, as a designer, I often have to just play around and learn the particular builder if I am unaware of its capabilities. However, the more you build websites, the easier it is to learn the building platforms.

Once I complete the website, I will check in with my client and test the site with search engines. In addition, I will make sure that all of the links are connected properly. There is so many ways to customize a site that I cannot possibly explain every aspect. However, if you have any questions, please feel free to reach out to me through my website at Design Cache.

Website Critique by Design Cache

Website Critique

As the owner of Design Cache, I was asked to provide feedback for the website http://www.giftideahq.com. It was an honor to review the code and provide feedback for a new website developer. The designer requested that I provide UI advice along with content ideas. Below I provided an analysis of the website based on each page.

Landing Page

The organization of the website works fine, however, I would make some slight adjustments to the nomenclature of the navigation. My first recommendation would be to create a “home” button in the navigation so that a user can quickly navigate to the landing page. In the header/navigation bar you may want to also create a subheading under the logo so that visitors know what the site is for. Currently, it looks like this website is more of a blog versus a gift suggestion website. One way to eliminate this appearance could be to make the images larger on the website and eliminate most of the writing. In a visual world, people like to see images. I would recommend letting the images tell the story.

In addition to those suggestions, I would recommend making the navigation bar a little larger and making sure that there are no spelling or grammatical errors. It may be beneficial to have a copy editor take a look at your website. At the bottom of your page, I would suggest a few changes in your footer. First and foremost, make sure that the copyright information is in the correct format. I suggest that you look at a well established website to see how the footer is laid out. There is a lot of empty space in the footer so you may want to spread the information across the footer in order to use the given area.

Occasion/Anniversary

This information architecture breaks design principles by confusing the user what falls under each category. I would recommend putting “anniversary” under the “occasion” tab. If you choose to do this, I would recommend putting all of the other gift categories such as “Father’s Day,” “Mother’s Day,” “Wedding Gifts,” ect. under the occasions category.

About

On this page, I would recommend having information regarding what the website is about. Because the website is not about you, the website developer, I would keep information about yourself limited. Instead, you may choose to talk about the different gifts that someone can find on your site or why the website was started. Also, in order to increase trust and credibility, I would recommend making sure that no grammatical errors exist.

Contact

While I understand the purpose of having a contact page for questions or comments, I would recommend having something else on the page to fill the white space. Maybe you combine the “about” page and the “contact” page?

Overview

Overall, the site is coming together! I like that you have made the website responsive, or chose a theme that is responsive. In a world where many people are on their phones, it is important to have a website that people can use on different types of devices. There is a lot of work that can be done on your site, however, I think you are off to a great start. Good luck!http://designcachegraphics.com

Design Cache

Design Cache, a graphic and website design business located in Lancaster County, Pennsylvania has been working on increasing its website's Google rank. With the algorithms that Google has, it can be difficult to increase a websites rank, particularly when you don't know what those algorithms are. So, how did we increase SEO? Well, the first step we took was to optimize Yoast SEO through our WordPress theme. Secondly, Design Cache registered the business on Google. Once the business is registered, then it becomes a game! If you would like some more information about how http://designcachegraphics.com increased its page rank, feel free to visit the Design Cache blog at http://www.designcachegraphics.com/blog/

Not so Fancy Fan

            
       Now that spring has arrived, the fan in my living room will be constantly on to help circulate fresh air that comes through the open windows. However, there are many usability problems with this fan. This fan has two strings, one that turns on the lights and another that turns on the fan wings. Unfortunately, there is no way for the user to know which string controls which feature.

By having strings that look exactly the same, the fan controls lack signifiers. While there is a shorter and longer string, which are supposed to help the user understand what each string controls, users forget time after time which string controls what feature. The strings also look the same, not providing a way for the user to distinguish one string from another. One way to solve this usability signifier problem would be to make the strings two different colors. 

This fan system does not afford easy use to all of its users. Since the strings are relatively high, the shorter user may not be able to reach the strings in order to operate the fan. This fan does not afford a “universal design,” talked about by Norman in The Design of Everyday Things because handicap or shorter people would not be able to operate this system. 

Error is also bound to occur when using this fan. If a user wants to make the fan go faster, the user must pull on the fan string more than once. Since the fan takes time to begin to move quickly, the user assumes he or she did not turn the fan on, therefore making a slip by pulling the string multiple times while trying to turn on the fan. Since the user can not go back, the user must continue to pull the fan string until he or she gets the fan to the intended speed. 

Pretty Hot HotShot

       This HotShot is one of the best designed objects for creating drinks quickly without having to use microwaves. HotShots allow water to be heated quicker than most microwaves. Also, unlike the microwave, the HotShot has only two simple push buttons - "heat" and "dispense." There are many reasons why this HotShot is more usable than microwaves; however, there are also constraints.
       This HotShot affords signifiers that help make heating water easy. The first signifier that I would like to point out is the lip on the top of the HotShot. The tab on the lip signifies that the top section of the HotShot can be opened. Another signifier on the HotShot is the indent where a mug can be placed. This indent, which fits a mug perfectly, signifies a mug is what should be used with this device. Two other signifiers are the words and buttons that heat and dispense the water. By providing labels, users can easily understand what each button does. The red light that lights up when water is heating also signifies that contents are getting hot.
       One may think that from what I have said above, this HotShot couldn't be any better; unfortunately, I would have to disagree. While this HotShot does seem relatively usable, there are a few constraints placed on the HotShot that diminish its use. The first constraint is that only a certain size mug can be placed under the HotShot. Another negative constraint is that the user can not choose how hot his or her drink gets. Unfortunately, when interfaces become more simple, they do not afford many features that experts would like, and when interfaces become more complex, they do not allow unexperienced users to easily use the interface.

Take the Path Untraveled

     
     
       While I was walking to class one day, I noticed students were cutting through the bushes. As I walked into the side door of Lynch, I noticed that a permanent foot path was made by the students who wanted to travel from Lynch to the Neidig-Garber academic building and vice versa. In the photograph in the top left, one can see that the school made sidewalks that went away from the direction of the building in order to get to other buildings, making this sidewalk fairly unusable for students traveling from Lynch to Neidig-Garber.
       From the students' footpaths, one can see that the sidewalks could be made more usable. In class, a similar post was shared about a path created to get around a barrier. However, this situation on campus is a little different, for students are in a hurry to get to class in the shortest amount of time possible. This can be related to task time; users want tasks to be simple and take the least amount of time possible in order to achieve a goal.
       Another principle that can be applied to this unusable path is proximity. In digital communications, proximity is important, for the closer objects are to one another, the more related they appear to be. Clearly, due to the footpath, the school should make a sidewalk that connects Lynch and Neidig-Garber. Since the sidewalk currently is not close to Neidig-Garber when leaving Lynch, students decided to create their own path. A sidewalk would afford proximity by making the walk shorter from one building to another.
       As far as testing goes of whether to create a sidewalk, an observational usability test could be conducted. In this observational study, the tester could record the amount of students who travel from one building to another, and record how many use the footpath versus the sidewalk. Interviews could also be conducted to find whether it would be beneficial to create a new sidewalk.

Outlet Unknown

       Often times I will be working in the library in between classes or in the evening, completing assignments on my computer. When I go to plug in my computer, each time, I run into a usability problem; some of the plug caps do not open, and I often open the wrong plug cap. There are many usability problems with this design.
       The first usability aspect of these plugs is the idea of there being a constraint. The locked plug caps constrain the user from using certain outlets. While this type of constraint my be of annoyance to the user, it may be there for the user's own good. The constraint mentioned is a lock-out, not allowing the user to use certain plugs. Because some plugs may be broken or wired wrong, the janitors may have created this lock-out so students didn't make an error of trying to plug something in a bad socket.
       Another principle in usability that can be examined with these plugs is the affordance of signifiers. Unfortunately, these outlets do not display signifiers of which one is a regular outlet and which is not. Often times, I make the error of opening the wrong outlet cap. Also, another error I make is trying to open a cap that is actually locked. There is no clear indication of whether the outlet cap is locked or not, lacking signifiers.
       The location of the outlets are also a physical anthropometry problem, something Norman takes time to cover in The Design of Everyday Things. The outlets are placed directly in the middle of the table, making the user have to crawl on the floor to get access to the plug. Some handicap individuals would not be able to do this task. Instead of placing the outlets on the ground, they could be placed on the pillars next to the tables.
       There are many usability problems with the outlets in the library. In the future design of the library, new outlet placement should be considered.