Responsive wireframing is the process of creating wireframes for different breakpoints or screen sizes. Because you’re creating multiple wireframes for different screen sizes, wireframing one page will produce 2-3 different wireframes which show different breakpoints. Although it may take more time to complete a wireframe, I feel that responsive wireframing is an important step in the process that can’t be skipped. It can help you simplify the hierarchy of the content and can force you to think about what’s truly important to the user. On desktop, we have more real estate to work with so we tend to fill space with less important content. When you drastically shrink down the screen size, you realize that most of the content is what I like to call “fluff” and some of it has precedence over important information that the user needs to know. This can be solved fairly quickly in the wireframing phase since you’re just moving around boxes. Responsive wireframing also encourages exploration of UI and how it can breakdown or change for different screen sizes. How will the navigation be handled at desktop, medium and narrow screen sizes? What about filter and sort menus? These questions can all be worked out more quickly in the wireframing phase when compared to the design phase.
Your work space can play a large role in defining your work day. We spend 8+ hours at our desks, working, communicating and problem solving. The small area that surrounds you should be taylored to how you work to help create a comfort zone to keep you focused. Personable items can often help spur creativity and ease frustrations.
Multitasking sounds like a good thing. You’re working on more then one task at a time, so you’re bound to finish more in less time, right? Actually, multitasking is not as efficient as it seems. Study’s show that as humans, our brains are not hardwired to multitask. Trying to focus on more than one task can actually decrease your productivity by increasing the amount of energy spent to complete a task. Every time you focus on a new task, your brain has to disengage from the old task and reengage in the new task. When multitasking numerous items, your brain is doing a lot of work just to try to keep up. This in turn rapidly reduces your energy and can create frustration and inhibit the feeling of failure. At the end of the day, you may feel like you got nothing accomplished. Instead of multitasking, try focusing on a single task for a certain amount of time, or until it’s finished. Also, try minimizing distractions by only checking and responding email at during designated time periods. You should also avoid spending time on websites that are not related to the task at hand and try to avoid other external distractions that can interrupt you and throw you off course. Hopefully, you’ll feel like you got more accomplished at the end of the day.
Who are your users? Why would they come to your website and what would they want to do once they’re there? These are just a few basic questions that you should be able to answer before starting a project. Designing without doing at least a little user research beforehand is like flying blind. You’re just guessing and most likely, you’re going to crash and burn. Knowing your users allows you to make educated design and UX decisions that are specifically taylored to them. Not all users want to accomplish the same thing when visiting your site, so it’s important to identify each type of user and create a persona for them. The best personas are created based on facts gathered by user surveys or interviews. Once complete, personas can be used to help guide you through difficult decisions and validate your designs.
There’s nothing to help keep you on your toes then teaching a class in design. While creating lectures, exercises and projects, I’m constantly researching and writing to make sure that I’m teaching my students the most up-to-date practices and giving them the knowledge they need to know to be successful in the field. I also encourage my students to ask questions and start discussions on topics that they would like to know more about, or interest them as a designer. I’m always prepping for these talks, making sure I ask the right questions to engage critical thinking and will often contribute to help keep the discussion going. If you want to better yourself as a designer, there’s no better way then to teach.
A couple of weeks ago, I saw a tweet that compared the company sites of 5 of the top design firms. Although colors, logos and imagery was drastically different, they pretty much followed the same formula for design and functionality. It was almost as if they all used the same template. I’ve been seen this trend now for a while and quite frankly, it scares me. It seems that there’s no originality when it comes to web design. Either everyone wants to play it safe and they’re afraid to try something new, or we’re getting lazy as web designers. Here’s a rundown of what we see on the homepage of “most sites”. Large image with copy on top that rotates through (ugh, don’t get me started of carousels), body copy below that may explain the company a bit more, 2-3 columns that either callout services or a used for social media, news or events. Of course, there’s plenty of variation with the components but most of the time, that’s what you see. The web is pretty boring, yet we have all this new technology to experiment with. We need to make it interesting, interactive and create engagement for the users.
When you hear of web accessibility, you may think that a lot of the techniques used to ensure good accessibility are implemented by the front-end team. However, there’s plenty that you can do as a designer to help create accessible websites without knowing an ounce of code. I feel that two of the most important aspects of a design that can drastically improve the accessibility is color and typography. Color blindness effects 1 in 12 men and 1 in 200 women. That’s a lot of people. A couple of quick ways to ensure that important content doesn’t get lost to this group of users is to make sure that there’s enough contrast between colors and to double check your design through a color blind simulator such as vizcheck It take about 5 minutes to do and you’ll be amazed at what your design may look like to color blind users. Good typography can also drastically improve the accessibility of a website. You want to make sure that typography is large enough to read for those who may have poor eyesight (16px + for body copy) and has a high enough contrast between the color of the type and background. Line-height can also help increase the readability of copy. Copy should feel open and airy and not tight and crowded. A good rule of thumb to follow for line-height is 1.5 times the type size, although this may vary depending on the font stack.
What’s the reasoning behind the use of tiny buttons? Is it so it doesn’t take up too much room on the page? Or they fit better with the overall design? Is it just pure laziness and the thought that they’re “good enough?”. Not sure what the answer is for Google.
I scrolled past these buttons twice, and it took me awhile to find them, even though I knew they were along the bottom somewhere. Even their logo and footer information takes precedence over these major action items. A simple color change, adding some padding to the text, or creating some space around them are all pretty simple solutions. My thoughts are that Google is just being lazy and quite frankly, they probably have more important problems to fix.
The design process should be ever evolving, never rigid but alway flexible. All projects are not created equal and need to be treated as such. What may have worked on one project might be an epic fail on another. Timeline, budget and clients can all have an effect on how the design process is implemented, what parts are the most important and how quickly something needs to get accomplished. The design process can help aid you in completing your goals, but only if it’s flexible and the designers are prepared for changes in direction. Plans often change based on unforeseeable factors, and so should the design process
I’m fairly new to the BEM movement when it comes to organizing and naming css classes. Before BEM, I was on the band wagon of reduction and minimization when it came to CSS. Block elements and header tags wouldn’t have any classes assigned to them and you would try to avoid assigning classes to tags if possible. I then attended a workshop last year at SXSW where the leaders basically said that was a bullshit movement. They felt that by trying to avoid assigning classes, your structure becomes less solid and becomes more difficult to update. And yes, I felt those pains and I often asked myself, why am I doing this? So, I’ve slowly moved away from that method and have started embracing BEM. At first, I was taken back by the sometimes long strings of names that would make up a class. But afetr spending some time with it, it started to make sense and reasoning became more clear. I found that BEM helps create a more rock solid structure that was easy to update. It also helps a ton with nesting in SASS and it’s a lot easier to reuse classes. So far, I’m a fan of the BEM method. I’d still consider myself a beginner when it comes to BEM, but hopefully, I’ll work myself up to expert.
I’m a big fan of weather.com. It’s one of my go to sites to check the weather. A while back, they recently made some small design and UX updates, including how the weather is displayed on the site. Although small, these changes really bother me because I feel that the system they now have setup misleads users on where the information is going to be displayed. They have a navigational panel setup below the main weather component that allows the user to tab through the different choices.
Because of it’s proximity to content and its placement on the page, my instinct is telling me that when I click an option, say for example 5 day, that the content below the tabs will refresh and show the 5 day forecast. That’s not the case. It actually changes the content above.
The first couple of times I used this, I was confused. Every now and then, I forget what the behavior is and relive that feeling of confusion for a few seconds before I remember that the site doesn’t have the best UX. It seems that this could be easily fixed by just exploring the placement of the choices so that they’re above the content that it refreshes, or redesigning the tabs so they’re more integrated into the overall design of the component that displays the weather. Overall, I’m a little perplexed on why they went with this route in the first place. I thought the behavior of the old site worked great. Maybe I’m the only that see a problem with this update.
Up until a few years back, web typography was tiny and boring. The typical font size for body copy was usually between 12-14px and you had your limited choice of 15 fonts, half of which you would never use. As a web designer, I got sick of Arial, Helvetica and Georgia pretty quick. Then came font replacement techniques such as Cufon and sIFR which allowed you to use a variety of different fonts that weren’t deemed “web safe”. Although this provided a breath of fresh air to designers, there were many disadvantages of using these techniques including dependencies (Flash), text not being selectable (Cufon latest update has added this feature) and the copyright legality of the fonts themselves. Shortly after, CSS and HTML supported @font-face which allowed font foundries to sell web fonts for purchase. We also have font subscription services such as Adobe’s typekit which not only provides a large variety of web safe fonts, but will also host them for you. Yay for more variety! The size of body copy has also generally increased to 16-20px. Not only does this reduce eye strain and make a better reading experience for the user, it also makes the content more readable to those who have poor eye site without them having to manually increasing the zoom of their browser. With the increase in the variety of fonts comes the practice and experimentation of good web typography, which makes me happy.