– by Steven C Diaz –
A few years ago, while on a family vacation in Southern Utah, we were enjoying a nice short hike at Kolob Canyon, and learned a lesson that I have reflected on in many instances of my life.
As we approached a nice overlook of the canyon, I saw a rock that fit perfectly in my hand about the size of a baseball. Without my kids or wife seeing what I was doing, I went to the edge of the lookout and channeled my inner Clayton Kershaw, and let the rock fly as far as I could down the canyon. Because that’s what boys do, we have to show off and try to impress those around us.
Being Eagle Scouts, both of my boys yelled at me as if I just committed one of the worst acts in humanity. “Dad! What are you doing, you don’t know who or what is down there”. Of course, I knew better and I shouldn’t have thrown that rock. As I was trying to correct my dumb decision, my wise 14-year-old boy at the time said something that pierced my soul.
“Dad, even the smallest of rocks can move the biggest of boulders.”
And since that fateful day in July, I have always tried to keep those words alive in different aspects of my life. Sometimes the smallest things we do can have a large impact on things. Recently I jumped into a course from the Interaction Design Foundation course, “Agile Methods for UX Design” presented by Laura Klein, and the same lesson was learned that my son taught me years ago. Designers at times, need to force themselves to keep things simple and design small, and sometimes our deliverables don’t need to be perfect.
Keep Things Simple and Design Small
Designers who work in agile teams can feel a tremendous amount of stress and pressure to deliver what is expected, and sometimes with that pressure comes the lack of skipping research, cutting corners, and jumping straight to execution. Laura Klein stated, “If designers want to work agilely and still design great, user-centered products, we need to stop designing faster and learn how to start designing less.” To be able to do this, agile teams and designers need to change their mindset from designing everything at once to designing and focusing on the smallest thing possible that can have the biggest impact. (Queue the quote from my son)
But why start small if the project is so large in scale? I think we have all been in the position where we have put so much time and effort into a product or feature only to roll it out and fail. Think about how nice it could be to ship a smaller version of a feature, and hand it off to users for testing to make sure it is effective. Delivering small features early gives you information that can help your team decide whether the rest of the feature is worthwhile.
Delivering smaller chunks of features and information, allows you to deliver early and more often to get the feedback before assigning a ton of resources to something without knowing if it’s going to be a successful feature or product or not. The takeaway from this thought is, if designers want to get more agile, they should learn how to make small things, get feedback, and embrace experimentation, iteration, and refactoring.
It doesn’t have to be perfect
I have a background working in various corporate teams that have an agency model in the department where it is expected to push many different deliverables out quickly with short deadlines. This can become something that creates burnout in designers and teams, and I have been there many times. Moving over to an agile team and methodology I held on to the same mindset that I needed to create and push out perfect polished designs in those short sprints. This caused a lot of stress until I realized that sometimes it’s okay if I wasn’t pushing out the whole product or feature at that time.
Being a designer on an agile team required me to adapt my work to a new way of thinking. If I thought I was going to be able to push out major features and products in those sprints, I would for sure burn myself out in a short time. I knew I couldn’t skip or miss any part of research or discovery, but also wanted to design polished-looking prototypes, so I had to find a balance. But one thing that helped me was remembering the outside world doesn’t have the same definition of perfect that I have.
Being able to adjust my thinking and letting go of being a perfectionist is something I am still trying to learn. I can push out designs that aren’t perfect, but I also need to hold others accountable to make sure that we revisit and address polishing up those features I had a better vision for. And ultimately that’s what an agile team is expected to do.
Conclusion
This course and certification offered some very good ideas and best practices to put into place to allow designers to be as successful as they can in Agile teams. We want to contribute, we want to deliver, and we want to make an impact. And for at least myself, I realized I need to change a few ways of thinking.
Continuing to collaborate and get input from team members will help everyone understand the motivation behind suggestions and take the next steps accordingly. Being able to share progress early and often with small features and designs will help speed up your work and effectiveness, and involving and understanding customers early will allow you to receive data to make sure you are delivering the most effective solutions. Delivering small chunks and small low-fidelity features can help you and your team receive customer feedback and make sure you are not going down the wrong path.
And never forget that the smallest of rocks can move the biggest of boulders.
By: Neal Jenks – Design Consultant and IxD Practice Manager at Software Technology Group
You know the story: Boy meets Girl (or Girl meets Boy, Boy meets Boy, Girl meets Girl…), Girl falls for Boy, but Boy doesn’t fall for her because, in short, he’s an idiot.
Maybe he’s blind, distracted, or both. He pursues someone else who is clearly not right for him or he follows some other less worthy dream.
If only he’d wake up! The answer is right there, waiting with open arms, ready to love him the second he shakes off his stupor.
Thankfully, in the stories we love the most, redemption comes! The Boy opens his eyes. He sees this Girl for the first time-the one who has meant so much to him for so long-and discovers that she is the one!
In a moment of blissful awareness, he holds her and whispers fervently, “It was you all along.”
The end. Roll the credits. We can leave the theater happy now.
We’re All Idiots
There are a lot of companies looking for the One that can make their product happy. Unfortunately, a lot of companies are idiots. False conceptions and misunderstandings about what they need in a product designer blind them to incredible personnel discoveries.
Of course, I sympathize with these poor, lost souls. They’re trying to catch a fish in the world’s most dynamic, constantly-shifting ocean. As I’ve noted before, the user-experience design field is still attempting to define itself. In that chaos, employers can find it tough to identify those who are, themselves, experiencing an identity crisis.
I know. I’ve been there. I’ve interviewed a lot of UX designers. Heck, I’m a UX designer myself, and I still let far too many diamonds-in-the-rough slip through my fingers. Idiocy, it seems, applies universally.
Fortunately, I’ve stared into the static long enough to see certain patterns emerge-enough patterns to help you (hopefully) avoid the same mistakes I’ve made.
The good news is that UX talent is out there -often much closer than you think. Most of the time, your new UX Designer is only a few emails lower in your inbox, or even a couple of cubicles away. The trick is to recognize them for who they are.
So how do you get to your, “It was you all along,” moment? Let me be your Traveling Pants.
Here are a few guiding principles.
1. They Come from Anywhere
I quote cartoons a lot. Get over it.
In the animated classic, Ratatouille, food critic Anton Ego has his world turned upside down after learning that his outstanding meal was created by a rat. After much soul-searching, he finally concludes that, “Not everyone can become a great artist, but a great artist can come from anywhere.”
UX designers come from anywhere and everywhere. The field is still relatively new. As a result, almost none of us leave college with “UX Design” on our diploma. More commonly, we enter the workforce in a related field and spend years developing problem-solving abilities. Then one day, we discover, to our delight, that we now possess the right set of tools for the UX world.
Here are some common fields in which UX designers germinate:
-
- Visual design (including print, interior, industrial, and digital design, illustration, animation, and the like)
-
- Multi-media production (including video game production, video production, and the like)
-
- Front-end coding/development
-
- Business/functional analysis
See what I mean? Your UX match can come from anywhere.
Of course, an obvious match would be someone who has worked on products with an active UX title for several years. But that line of thinking will frequently lead you away from diamonds-in-the-rough.
Thank goodness someone possessed enough foresight to see beyond my less-than-traditional UX background. At the time, I did a horrible job branding myself as a UX designer, but they were prescient (or merciful) enough to understand how my visual design and marketing background could translate into product design.
Your next UX designer will most likely NOT match your mental image, so don’t try to shove them into a box. Their background doesn’t matter as much as their ability to solve problems, so focus on determining whether their background will help you solve your problems.
2. Thought Process Reigns Supreme
Sarah Doody, publisher of the weekly UX newsletter, The UX Notebook, wrote an article called, The UX of Hiring for UX Positions. I consider this the Bible for hiring UX talent. Seriously, you have no business trying to find a user experience designer until you’ve read this.
Like the UX designer she is, Sarah learned how to hire UXers by conducting user research. During that process, she unearthed some mind-boggling pearls of wisdom. Here is one of my fav’s.
“ Jess Brown, Director of UX at Vice Media, [said], ‘If we just look at background, we may miss out on great thinkers in UX.’”
Too often, when thumbing through resumes, we over-obsess on background. As I’ve already noted, doing so is counter-productive. What IS productive is figuring out the way a designer thinks through problems.
Allow me to emphasize: Learn how UX designers think. When it comes to UX ability, nothing is more telling.
And remember that this all-important X-factor almost never surfaces on a resume. Eliciting this info from candidates requires digging. Good for you I have an awesome shovel :).
My brother, Joel Jenks, is Executive Recruiter for the City of San Antonio. He once told me that the most impressive candidates tell stories about their professional past, and the very best stories answer these questions:
-
- What problems were you seeking to help your employer overcome?
-
- What solutions did you present, and how did you arrive at those solutions?
- What were the results of those solutions for your employer?
Few questions help you understand how designers, or any professionals, think through problems like the preceding.
So ask! You don’t need to ask those questions verbatim, but get your candidates talking about problems they’ve have faced, how they’ve faced them, and how their solutions brought solid returns. Keep asking follow-up questions until your candidates are cornered into specificity.
I’ve used this technique with candidates in the past, and their responses quickly paint a vivid picture.
Vocational skills constitute a mere fraction of the whole UX designer.
3. Real Skills Are Indispensable
Seth Godin’s outstanding article, Let’s Stop Calling Them Soft Skills, underscores what I’ve turned into a bedrock principle:
Quoth Mr. Godin:
“Let’s call them real skills, not soft. Yes, they’re interpersonal skills. Leadership skills. The skills of charisma and diligence and contribution. But these modifiers, while accurate, somehow edge them away from the vocational skills, the skills that we actually hire for, the skills we measure a graduate degree on. So let’s uncomfortably call them real skills instead. Real because they work, because they’re at the heart of what we need today.”
“Hire people, not skill sets.”
From henceforth and forever, soft skills shall now be called real skills. So let it be written/said/done.
Sarah Doody re-enforces this principle. The sentiment shared by Amy Jackson, a UX and design talent agent, is shared by many in Ms. Doody’s research:
In my experience, real skills are not merely the difference between a good UX designer and a great one; they are the difference between someone who can do UX design and someone who cannot.
In short, a candidate without significant real skills is an organism without a heart.
At the heart of UX design lies the user. And designing for the user demands empathy. And acquiring empathy requires a host of real skills: Listening, setting others at ease, kindness, patience, yada yada.
In addition, a candidate’s ideas are nothing until they can sell them. Their designs are meaningless until they can stir up stakeholder zeal. Final deliverables are worthless until they employ balance and diligence when working with the dev team.
Here are a few real skills that I consider indispensable for UX designers.
-
- Leadership. In my mind, UX design and leadership are one and the same. UXers are generals, not foot soldiers. We don’t wait for some higher-up to provide neat and orderly instruction. We grab our bayonets (or, you know, MacBook Pros), charge to the front-lines, and rush into the cacophony of battle-doing research, making proposals, and shouting, “To me, product team!” the whole way. If you’re interviewing an obvious order-taker, take a hard-pass.
-
- Flexibility. Kenny Rogers said it best. UX designers have to, “know when to hold ’em, know when to fold ‘em.” Product design requires constant give and take, and you need someone wise enough to understand when to fight tooth-and-nail and when to relent humbly.
-
- Extra-mile mindset. UX designers are the ultimate self-starters and hard-workers. Solid products require endless amounts of diligence, dedication, and willingness to step up-to-the-plate-even if doing so means stepping outside of set job descriptions.
-
- Empathy. See my “At the heart of UX design…” thoughts above.
- Thirst for learning. In this constantly evolving field, those who aren’t keeping pace with blog articles, newsletters, podcasts, tweets, product design organizations, and product updates will quickly fall behind. No UX designer knows all that they need to know, but no UX designer ever stops trying.
As the employer, recognize the critical role of real skills and focus your interviews accordingly.
Believe me, I know: Finding your UX design match can be a daunting prospect. So allow me to close with a few words of comfort.
Mr. or Ms. Right is out there! We’re all idiots when it comes to recognizing true UX talent, but not only does it exist, it is often much closer than you think. So use these principles to help uncover those great UX designers. Your company’s happily-ever-after awaits.
Happy hunting, you romantic devil, you.
By Josh Porter
Custom CSS Properties are now supported in all major browsers except IE 11.
Custom CSS Properties used be called Native Browser Variables. They have since changed the name to distances the Custom Properties from SCSS variables. Lets dive in and see them in action.
SCSS vs. Custom Properties
You can see the top left example is SCSS and the bottom left is using Custom Properties. They render the exact same result on the right of each example.
Why Use Them?
- No pre-processor necessary
- They Cascade: You can set a custom property inside any selector to set or override its original value
- When their values change the browser repaints as needed (i.e. media query or other state)
- You can hook into the custom property via JavaScript
Drawbacks and Benefits
| Drawbacks |
Benefits |
| IE Doesn’t Support it&elipsis;yet |
- Custom properties exist at runtime
this means that their values can update in the browser and it will be updated in real time |
|
They can have a fallback inline with the value separated by a comma |
DEMO TIME
bit.ly/css-cp
In this example I am setting the custom properties to :
--width: 25%;
--margin: 20px;
--background-color: #177C9C;
In this codepen I am setting media queries to change at 600px and 400px max width so on window resize the custom properties are changing on the fly and there is no need to have the page rerender.
A better example of custom properties being scoped is bit.ly/css-cp-1.
In this example I am setting the font size to 5rem but scoping the property by class and it is scoped within that class. For example:
So class .block__highlight redefines the custom property of –block-font-size as well as .block
Something else you can do is just assign a property on a pseudo class:
So I am assigning a new value for –bg-color in div.red:hover but I am not assigning a property(in this case background) it is inherited by the div.red class.
Changing Custom Property via Javascript
In my opinion the coolest thing you can with these is access custom properties via javascript. Once you do the page doesn’t need to be re rendered. It live paints the changes. Here is an example: bit.ly/css-cp-2
I have a event listener on change and setting the custom property to the value of the input
CSS GRID
CSS Grid is the future of website layout…. In my humble opinion of course.
What is it?
Flexbox vs GRID
“Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together).
Grid is for two-dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power.
If you only need to define a layout as a row or a column, and you would like the flexibility to respond to the content of that row then you probably want flexbox. If you want to define a grid and fit content into it in two dimensions – you need grid.” – http://gridbyexample.com/what/ – Rachel Andrew
Given the above image to code this I would use Flexbox by doing this :
I would set the wrapper to display: flex and flex-flow: row wrap; I then have to set the children elements to have a width, height and margin.
The Grid way:
Before I start showing the way to code it in Grid. I want to go over some new terminology that comes with CSS Grid.
 |
Grid Lines are the lines that make up the grid. These can be horizontal or vertical. We can refer to them by number, or by name. |
 |
A Grid Cell is the space between 4 Grid Lines. So it is the smallest unit on our grid that is available for us to place an item into. Conceptually it is just like a table cell. |
 |
A Grid Track is the space between two Grid Lines, either horizontal or vertical. |
FR(Fraction Unit)
Fraction units, or fr, represent 1 portion of the available space left within the grid. Think of it like Flexbox’s flex-shrink and flex-grow. All fr’s are in relation to one another.
Keep in mind that frs used on row heights will behave differently than on columns.
So for example you will see CSS like:
The top example will give a grid with 4 columns with 1fr width.
The next one will give you the same. But it uses grid’s repeat function.
The width and height of the grid can accept mixed unit measurements.
GRID-GAP
Short hand for a combination of grid-column-gap and
grid-row-gap, this is what defines the spacing between cells. Again, it’s not picky on unit types.
However, the grid-row gap and grid-column-gap have to be the same for each column gap or row gap…..unfortunately
A couple things about grid-gap.
- It is declared on the parent;
- Grid-row spacing is declared first in the short hand version.
WHEN CAN WE USE IT?
Now I now showing you this is a BIG teaser but it is coming I promise. All the major browsers have shipped with this new feature in their next release. The rumor is that they will be releasing by the end of March 2017. However, there is a chance that they won’t release the version until the end of 2017.
How do we use it today?
Here is how you enable that feature in your browser today:
- CHROME: ITs live on the latest version.
- safari: menu: Develop > Expermenital Features > CSS Grid
- Firefox: It’s live on the latest version
- Opera: opera://flags/#enable-experimental-web-platform-features
- Epiphany: set the env var to WEBKITGTK_EXPERIMENTAL_FEATURES:$ export WEBKITGTK_EXPERIMENTAL_FEATURES=”CSS_GRID_
OK now let’s code that same grid but now using CSS Grid.
You can follow along by going to this codepen and trying out the code yourself.
Here is what I did to create a 4 x 3 grid:
The declaration is only on the parent not the child. The grid is smart to layout the dom elements with 4 lines of code.
You can tell a child to start at a specific location by telling it : grid-column or grid-row.
For the 4 x 3 grid you can see the grid lines in green.
If you wanted box 10 to start at the top you write this:
.ten { grid-column: 1 / 2;}
This is short hand for grid-column-start and grid-column-end. Same goes for grid-row.
Let’s build this layout:
SOLUTION:
With declaring 4 classes I have created a pretty complicated layout.
TEMPLATE AREAS:
This feature gets me excited. This allows easy access to assign children to a specific area.
The above code renders something that looks like:
Final project: bit.ly/css-grid-final
Building this in flexbox you would have a number of parents wrapping different sections of the page.
The solution using grid only has 1 parent!!!
In summary….I believe that CSS Grid is the FUTURE of website layout. That said it is not a replacement for flexbox. I think they can be used together to accomplish pretty complicated layout. So look for this new feature coming to all browsers coming soon.
Author: David Hales
I recently was working on my personal blog site, and I wanted to enable users to log into Facebook, in order to access features of my site.
After looking into multiple options, and playing around, I finally decided to use an Angular 2 wrapper around the Facebook Javascript SDK.
I am doing two things. I am allowing users to log in, and I am saving their email and basic profile information. The SDK, can be leveraged to allow you to post to their account, and all sorts of things, and I might later utilize this, but for now I am not.
First thing you need to do is get a Facebook Developer account. To do this, login to Facebook.
Go to https://developers.facebook.com/ and click the register button in the top left corner.
Click the Create App ID button to create your first app.
Fill in the data and click Create App ID
After the app is created, it will automatically put you to the Add product page. Click the Get Started button for the Facebook Login section:
It will then ask you to choose a platform. Select Web:
Enter your URL, and click Save
The remainder of the setup for that gives you the Javascript code to access the SDK, but since we are going to do this in angular 2, you can just click continue through the rest of the screens here.
Now click on the settings under the Facebook Login section on the left hand navigation.
You will need to enter your website into the Valid OAuth redirect URIs section, or you won’t be able to do OAuth authentication with Facebook. You can enter multiple here, so you can have your local, dev, test and production URL listed.
Click the Save Changes at the bottom of the page.
Up at the top of the page, is your APP ID.
You will need this, in order to access your app from the SDK stuff.
So now to your angular app.
I am using an Angular 2 wrapper, that you can install using the following, in your Package Manager Console:
npm install ng2-facebook-rxjs –-save
You will also need to add the Facebook SDK script tag to your page, I put it in the _Layout page in my MVC portion of the project, so it is in the base of my whole site.
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/sdk.js"></script>
I am implementing the Facebook button and logic into my navbar component. I will give the full code for this component, so you can see the usage.
navmenu.component.ts
The import section:
I use the Router for doing a redirect on logout. The UserService is my own service where I save data back to my DB that I get from Facebook.
Set the API ID:
Create the Component:
The following snippet is the rest of the code for the component.ts file. You have to make sure to pass the services into the constructor, as well as the Router.
I do an initial check against Facebook to see of the user is already logged in. If you are logged in, it gets the latest information from Facebook, and saves it back to the Database using my UserService.
You will want to add a login and logout methods. You can see both below. On logout, I redirect back to the home page, just to make sure you don’t get stranded on some logged in page.
You will see on the login call, I specify the Scope, this.fb.login({ scope: ’email,public_profile’ }), this asks the user for permission to access their email and profile. It does not grant access to post for them, or get access to friends list, etc. You can refer to the Javascript SDK for other options of things to request.
You will also see me call this.fb.api(‘/me’, ‘get’, { fields: ‘email, first_name,last_name’ }). This is how to tell the facebook Graph API what fields you want to get. You will also get the ID back from Facebook, which is an ID specific to the user and Facebook App. I then also save this information back to my database using the UserService.
The following is the snippet of how I send the data back to my API(MVC controller that does the save to the database)
Navmenu.component.html
This is an excerpt from the HTML, where you can see how I am using *ngIf to show or hide buttons based on isLoggedIn which is being set in the .ts file. You can see where I am putting the first name from the object on the screen, as well as I’m changing the Logout or Login button based on the logged in Status.
Possible Pitfalls:
I ran into an issue along the way, which was the following error:
error TS2304: Cannot find name 'FBUIParams'.
The creator of the wrapper says you can run this, and it should fix the issue:
typings install --global --source=dt --save fbsdk
This did not work for me, but I removed the FBUIParams from the facebook.service.ts file, and the issue was resolved.
Author: David Hales
Author: Geoffrey Sagers
When many companies create their first website, often they look to photography to “fill in” appropriate areas of the website, such as the header within the body. There are many quality stock photography websites, but in almost all cases, your images are not unique to your company or even industry.
So, why does photography even matter? Take a look at the images below:
Of course, the obvious similarity is that they are all photos of water. Does that mean they could all be used on your website together? Despite their similarity, they actually are not very cohesive. Why is that? Let’s talk about a few of the reasons.
Emotion
What emotion do each of them display? The first three, could show a calm, peaceful atmosphere, the next one abstract, and the last four, a rushing torrent. What message are you trying to convey with your site? If you are wellness spa, you are looking for a calm, serene image where someone can relax and forget about their troubles. If you are an outdoor adventure company, you might want more of the rough, rugged feel of the raging river. The emotions these different picture evoke will have an impact on your customer’s perception of your company, so choosing one that prompts the proper feelings is important.
Color and Tone
What about colors and tone? The above images range from vibrant and high contrast to monotone and sepia. Because of the blue casting on the image, images 5 and 7 appear cold and dark. Image 8 has a warm, brown cast, but nevertheless still has a cold feeling to it due to its monochromatic nature. They all conjure feelings of cold and wet, even though image 5 is obviously a summer image.
By contrast, images 1, 2, and 3 evoke feelings of a warm, lazy summer day. Image 4 might be a bubbling brook to dangle your feet in, and image 6 a fun river rafting trip with friends with the splash of the water being refreshing rather than icy.
Interesting to note, all of these were taken in the summer, and at only 3 locations.
Content
How about the actual content of the picture? What if you actually wanted to use one these in the header of your site? Of course, they are far too busy and high contrast to cover with a lot of text. But what about other content, such as your company logo, or text within a box?
Here they are again, with a generic logo placed on the left.
As you can see, image 3 has part of the subject matter covered and is probably not a good choice. The other images either have the subject to the right of the logo, or are abstract enough to not matter as much.
What if we put the logo in the center?
Images 1, 2, 3 and 8 the main subject of the photo is covered, and 7 may not be ideal either, despite its abstract subject matter. The only ones that do not detract from the logo are 4 and 6.
A word of caution, the color of the logo also plays an important role in whether or not it fits the style of the image, but there are far too many combinations to go over in this post.
Summary
The photography you choose to represent your company will impact the perception that your customers have of you. Make sure the images you use compliment your company in emotional style, color and tone, as well as content.
Geoffrey Sagers is a web developer by profession, and an avid photographer and graphic designer by choice. His portfolio can be found at http://photokapi.com/.
All images copyright Photokapi.com
Author: Daniel Jewel
Recently, while working with a client on wrapping up the building of their version 2 UI, it became apparent that not everyone was on the same page on how things should look and behave. The initial re-design of the web app failed when it came to being responsive. There was also a lack of unity in design themes in terms of the company’s brand and the product itself. So using my training as a graphic designer and my skill as a developer, I focused on marrying designs and concepts together, trying to match the client’s primarily print oriented style guide. This has proven to be an excellent cornerstone of the project as a whole.
Why you should have one
Designing and building a website or app is rarely a solo experience, and even if it is, remembering all the intricacies would be a stressful challenge. And most cringe at the thought of having to document something or a process, but the reality is, having a style guide will make sure that you and invested parties are all on the same page and have dispelled what an element is supposed to look like and how it is to function.
Another benefit to having a style guide is that it can generate discussion and find solutions to problems. In my experience in working with graphic designers, who wince at the thought of being asked to code, they sometimes overlook how an element will look at mobile size (or vice versa). While it looks great in a raster or vector editor, it may not translate well to an excellent user experience on a web browser. Having a style guide will help drive compartmentalizing a website or app and thus force designers and developers focus on smaller bites and looking at them from all angles.
One example I frequently find is that there is usually a consensus on what color a button should be in its default state and what it should look like on a mouse over, but the active and focus states of that button have been overlooked or ignored. Those things need to have styles, too! A good style guide will have a have a complete section on the shapes, sizes, line widths, states, and other details on a button that could be used throughout a website or app. That way, in the future, should a new page or feature be added, a designer or developer can reference the style guide and have a base to work from, thus keeping the look and feel consistent.
How to make one
Style guides have been around for a long time, and most of them dealt with writing and print materials (the client I was working for gave me one that mostly covered print media and typography). These guide are great, but they don’t help too much when it comes to an interactive experience. And to create one from scratch and make it easily maintainable could seem like an entire project in and of itself. But luckily, the Internet is here to save the day. Enter style guide generators:
During my surfing of the Internet, I’ve come across a few tools that can make creating a style guide a breeze. I’d like two focus on two that I’ve come to love:
Frontify
I’ve been itching to get some of my clients to look into using this tool as it answers a lot of the questions I had about being able to have something create a style guide and provide: code snippets, examples, collaboration, and a WYSIWYG editor. I feel like this can get an entire team involved on how to make and keep their style guide organized and tailored right for them.
Foundation 6
Included with the recently released version of the front-end frame work, Style Sherpa will look and work much the same as most static site generators. This is what I’ve been using in my most recent work as I’m able to type out my Sass code in one place and have both my web app and style guide get updated at the same time. This is great in that it’s doing two things at once—creating a style guide and making the needed style classes at the same time. I like this method as I feel like I can make fine tuned controls and enter in feedback quickly and get it up for viewing. I will say that this is a more advanced way of making a style guide, but it does allow for prototyping quickly.
Further Reading
There is a lot to cover in terms of mastering style guides. And I don’t want to drag things out when I could set you loose with a great resource: http://styleguides.io. This place has everything you could want to know. It’s got articles, books, examples, tools, and even podcasts on the topic. I hope you’ll check it out and learn more about style guides. I also encourage you to put a style guide creation into the work flow of your projects.
Author: Daniel Jewel
Author: Neal Jenks
Design Consultant | IxD Practice Manager
Ah, end-of-year: The time when a young man/woman’s fancy turns to lists.
I asked Software Technology Group’s illustrious IxD Practice members to share some of their favorite UX/UI discoveries from the past year. What followed was an entertaining and instructive mixed-bag of websites, apps, and more. Enjoy!
InVision
invisionapp.com
The free prototyping tool that UX designers love just keeps getting better and better. InVision has now extended well beyond hot-linking comps to terrific animations and transitions, cross-platform support, project management, development hand-off tools and more. And dang are those features easy to use. I consider InVision to be one of the best web-based apps of all time.
Typeform
typeform.com
Boring forms move aside. Here’s a form generator with a simple, robust interface that creates gorgeous, user-friendly forms. Survey Monkey, you have been shamed.
Snowbird
snowbird.com
Okay, so it’s not responsive yet, but the website for Snowbird Ski Resort demonstrates the power of branding, design consistency, and beautiful, purposeful animation. To see what I mean, check out the great snow report side-bar animation. I love me some accordion-fold action.
Google Play – Music
play.google.com/music
Google Material Design standards are slowly taking over the look, feel, and functionality of the Internet, and their music player shows why. Bold, purposeful and fun, this app makes finding music intuitive, user-centered, and insanely easy. Watch your back iTunes.
Wikiwand
wikiwand.com
The world’s most popular Wikipedia reader has so much respect for the content and the user, it’s disgusting. Wikiwand shows us that, when the interface takes the back seat in the experience, it’s a sign of elegance, not acquiescence.
Epicurrence.com
epicurrence.com
For those with a strong aversion to design for design’s sake, avert your eyes. For the rest of you, behold and rejoice. The multiple scroll rates tied to each graphic, the beautiful typography, the limited palette—all of these come together to form a single, cohesive piece that entices one to flick the ol’ scroll wheel again and again.
Domo.com
domo.com
This has to be one of my favorite corporate websites. Do yourself a favor: Click and drag the bottom-right corner of your browser window to see a responsive/adaptive design done right. Each break point, each grid, each resized image speaks of craftsmanship and attention to detail. This is screen optimization at its highest.
Wire
wire.com
In the world awash in messaging applications, some absolute gems have been overlooked. Such is, unfortunately, the case with Wire. Here at last is a gorgeous messaging app that just works right: HD voice quality, quick image uploads, and a lot more. The layouts, the huge graphics, the customization—all bespeak refinement and appreciation for the user. Now if only Wire could find some users to return the favor.
Oakley Airbrake MX
moto.oakley.com
The site loads horrifically slow, but to the patient, the spoils. Behold the full power of parallax scrolling: Not just for wow-factor, but for a ponderously perfect product demo. Here is a site not content to merely blow your mind and let it be. Oakley has put together a masterpiece of marketing. Prepare to pine for impact-resistant goggles.
Inception Explained
inception-explained.com
It’s a cool visual representation of a cool movie. Deal with it.
There’s our thoroughly informal and certified-awesome list. What did we get right? What did we miss? Email neal.jenks@stgconsulting.com and let me know.
Author: Neal Jenks
Design Consultant | IxD Practice Manager
Author: Neal Jenks
Allow me to wax prophetic.
A vibrant, waning year tends to open our imaginations to the unexplored horizons yet to come, and this is especially true of the Interaction Design (IxD) world. If the past year has taught us anything, it is that we have absolutely no clue what to expect. But heck… that just makes conjecture more fun.
So…come along as I attempt to follow our current, cryptic trajectories into an unknown and exciting future. Let the wild speculations commence!
Sketch vs. Illustrator Wars
Mark my words: Adobe Illustrator has a new Bohemian contender. In 2016, Sketch is ready to put down a beating on the World Heavyweight Vector-Graphics Champion. Why?
First and foremost, it’s cheaper. A $99 flat fee vs. $49 per month for Creative Cloud is hard to ignore. And it’s ALMOST as powerful as Illustrator. I’m still learning about Sketch, but the Art Board controls are much slicker and plug-ins, like the content generator, kick some serious butt.
Best of all is Sketch’s seamless integration with other applications. InVision offers real-time syncing with Sketch files. Make an update in Sketch, and your Invision prototypes reflect those updates instantly. Zeplin works beautifully with Sketch files as well. Forget spending countless hours creating UI pattern libraries and communicating with developers about your work. Upload your Sketch files to Zeplin, and you’re pretty much done.
The only area where Sketch seems to be a little behind is in pure vector editing. That being said, keep your eye on Sketch. It floats like a butterfly and stings like a bee.
One Material Design to Rule Them All
Watch your back, Mac. Material Design is poised to take over the world this year.
When creating a native iOS or Android app, it’s important to be an upstanding citizen in that space. In other words, if you’re creating an iOS app, it should look like an iOS app. To help IxDs model good citizenship, Apple has provided Human Interface Guidelines. For Google/Android, there’s Material Design.
Material Design standards attempt to define all Google’s branding across all of its properties, from layout and typography to UI patterns and components. In the process, they’ve created a style guide that is simple, intentional, easy to apply across various products, and, in their own words, “delightful.” In my estimation, they’ve largely succeeded.
As Material Design continues its meteoric rise, Human Interface seems to be floundering. Always considered a bastion of hope and adoration by designers worldwide, now Apple design standards are under active attack. No longer a sacred cow, Bruce Tognazzini and Don Norman recently tore Apple a new one, accusing them of losing their way, designing for design’s sake, and focusing inwardly rather than on users.
In today’s user-focused digital space, Material Design just makes more sense, and I predict that it will slowly envelop our design consciousness to the exclusion of all else.
Lean User Experience (UX) Getting Leaner
Clients and companies all want to create more from less, and for some reason, UX always stands out as a target for attrition. So UX will get leaner this year. The question is: In what way?
I attended a Lean UX workshop, and I was shocked to learn that “lean” to the presenter definitely wasn’t lean to me.
For example, he kept his UX cost down by doing fewer focus groups with fewer people when testing. On my team, we go even leaner, sending out surveys periodically in order to inform our decisions on a feature, or conducting very small focus groups ONLY WHEN there’s significant question about an interaction. We also rely heavily on our application’s User Feedback section.
He also focused on creating much lower fidelity prototypes for stakeholders — using what looked like InVision. Once again, my team takes lean prototyping even further. I generally tell an interactive “story” with a series of non-interactive comps viewed in order.
So who of us struck the appropriate balance between and efficiency and efficacy? Who knows. I predict that, in 2016, we’ll spend a lot more time answering questions like this.
The Great Rapid Prototyping Conflict of our Time
When technology is new and demand is high, multiple solution providers always vie for top-honors. When it comes to prototyping tech, our clear-cut front runner remains undecided. This year, a leader may finally emerge.
InVision is certainly one of, if not the most, commonly used prototyping application today. However, common usage hardly denotes a front-runner. Despite awesome features like improved animations and transitions, cross-platform support, real-time collaboration, etc., designers still pine for more robust offerings.
Axure Pro provides more robust features than InVision, but at $589 per license, many clients still deem free InVision “good enough.”
Several impressive image-to-code tools are also waiting their turn in the limelight: Macaw and Pixate in particular. And for those in love with code, don’t forget the power of customization inherent in front-end frameworks like Bootstrap.
Who will emerge triumphant from the maelstorm? Maybe 2016 will decide.
There you have it: A few predictions for our ephemeral IxD world. What do you think? Did I hit the nail on the prognosticative head? Or is there a whole lotta “NO” in my Nostradamus? Email neal.jenks@stgconsulting.com, and let me know!
Author: Neal Jenks
Author: Neal Jenks
Design Consultant | IxD Practice Manager
There’s a Calvin and Hobbes comic strip that perfectly encapsulates the IxD profession.
Six-year-old Calvin is sporting a rather spiffing astronaut helmet and superhero cape. His mom asks, “What’s up today?” Calvin responds, “Nothing so far.”
“‘So far’?”
“Well you never know, something COULD happen today. And if anything does, by golly, I’m going to be ready for it!”
Calvin’s mom is somewhat taken aback, then responds, “I need a suit like that.”
Today’s uber-dynamic companies need someone who’s ready for ANY design challenge. As IxD professionals, we seek to suit up every day to handle anything an employer can throw at us. As a result, we are both multi-faceted and in the throws of a full-blown identity crisis. This has made defining IxD, UX and UI a bit perplexing.
Why all of the confusion?
IxD is a new, constantly evolving profession. Because it’s constantly in flux, we can only define what we see right now.
We are an ugly duckling: It’s obvious that we’re “birds” of some sort. We’ve already done some growing up, and we still have tons of potential. We also don’t know where we’ll be if and when we’re done growing up—but we think we’ll be beautiful.
As IxDs continue to evolve, our definitions will likewise evolve. With that grain of salt, let’s look at some definitions.
IxD Defined
According to Wikipedia and IXDA.org, IxD is Interaction Design or an Interaction Designer. It is “a multi-disciplinary design discipline that uses human understanding to manage the growth of complexity due to but not limited in scope to technology.”
The focus of Interaction Design is:
-
- Human Computer Interaction (HCI)
Having said that, very few people apply the term “IxD” to members of our profession, including those of us in it. IxD seems to be getting more and more use, though, and I’m grateful. The term draws the largest circle of definition and thus encompasses most of us.
Here’s another qualifier to the above definition: Most members of our profession do NOT possess a degree in HCI, UX, or psychology. ALL IxD professionals have a solid understanding of each of these to one degree or another, but we typically gained that knowledge on the job or in workshops, rather than in college.
For example, I gained a lot of experience with psychology via conversion rate optimization. My experience with HCI came from conducting user tests. My UX background has come from working with a wide range of clients to produce a wide array of products. And I’ve attended workshops and other training events. But what did I learn in college that I actually apply on the job every day? Not a clue. I vaguely remember some art classes…
Here are some other common terms used for IxD professionals:
-
- Interaction and Experience Designer
- Just UX or just UI Designer
None of these are very accurate or inclusive, and but they’re used interchangeably for “IxD” nonetheless.
UX Defined
UX is user experience, and user experience design is “the process of development and improvement of quality interaction between a user and all facets of a company.”
Since a user has so many touch points with a company—a website, billboard, email, brand, video, social media outlet, app, and more—user experience design is, of necessity, multi-disciplinary.
User experience design is also, by its nature, analytical. It focuses on the decisions behind those company touch-points. In today’s society, those touch points are, more and more often, digital. Thus, user experience design is deeply concerned with making decisions for digital interfaces like apps and websites.
UI Defined
UI is user interface. User interface design is “responsible for the transference of a brand’s strengths and visual assets to a product’s interface as to best enhance the user’s experience.” In today’s society, the interface is usually a digital one.
UI Design is a very important SUBSET of UX Design. It is the VISUAL component of UX. Yes, it is graphic design, but with much more complex requirements.
UX vs. UI
Simply stated, UX focuses on the decisions behind the UI, and UI is the expression of UX objectives. I love this analogy:
“If you imagine a product as the human body, the bones represent the code which give it structure. The organs represent the UX design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body–its presentation, its senses and reactions.”
Pretty straightforward, right? And yet, in spite of the simplicity, the two terms are misused all the time.
“As Rahul Varshney, Co-creator of Foster.fm puts it. ‘User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.’”
Why Get These Definitions Right?
I’ve seen misuse of these terms cost companies big money. Some waste time interviewing and hiring candidates for a UX position when they’re really looking for a front-end developer. Even worse, others will throw all of their resources into creating a terrific-looking app but invest very little into demographic research, wire framing, or testing. Both of these scenarios are corporate hammers driving square design solutions into round objectives.
Beware of these common misuses! Each one squanders resources and elevates blood pressure.
-
- UX/UI=front-end developer, software engineer
Seek instead to apply the right term to the right designer, and put that designer to work doing what he or she was hired to do.
That’s it! Still confused? So am I. But fret not! My fellow IxDs and I are busy prepping for whatever challenge you can hurl at us.
Just let me change into my suit…
Author: Neal Jenks
Author: Celestia Garner
Web design is a very important part of our business. Although it takes a team of many individuals to make a great site, even with impeccable code, what people notice most are the user interface (UI) and User Experience (UX), both are components of design. This is what affects people the most who use the system; what they see and how they interact, make a huge impact on the success of web software or websites.
At STG we specialize primarily in custom web software for corporations. Often we create internal systems for companies, but we also create public facing websites and systems. We build software for all types of companies and industries, which does expose a large variety of design elements, depending on the company and the purpose of the software; such as internal vs public; for profit vs non-profit; B2B vs B2C; etc.
Because of our diverse clientele, we have to assess each project to determine the best web design practices for the system, its users, and the company. STG prides itself on hiring top talent who can determine what is best for different businesses and demographics. Good web design not only looks good for our clients, but also reflects well on our company.
So, what are some key web design concepts that are important to our business? Following is a list of key concepts and elements to consider for good web design, along with some links and references for further research, if desired.
Responsive Web Design
Responsive Web Design, (RWD) is a key concept used in our industry and is becoming an industry standard for new web sites and systems. According to Nick Pettit:
“Responsive web design is a technique for building websites that work on mobile devices, tablets, and desktop screen. Not long ago, websites were typically designed specifically for laptop and desktop screen resolutions. This worked fine until the advent of web capable smart phones and tablets. Web designers approached the new challenge with a myriad of solutions, but the clear winner was Ethan Marcotte’s seminal article on Responsive Web Design back in May of 2010.” (Pettit, 2014)
There are three main principles of RWD, including fluid grids, fluid images, and media queries including breakpoints. Fluid grids change the layout from focusing on the pixels to using percentages of screen usage. Fluid images are different sizes of the same image that are optimized for the breakpoint they appear in, preventing stretching or unproportioned images.
Media Queries allow CSS to be applied when certain conditions are met, such as the browser screen shrinking to a specific size. Break points are the point at which the content no longer fits the browser size and ‘breaks’; sites define these in the Media Queries of the CSS to adjust to a smaller view, allowing a site to still look good regardless of the screen size the browser is being viewed from.
When designing a new system or website, it’s beneficial to determine the need for RWD early in the design phase. Putting the framework in place from the beginning, will make it much simpler to apply RWD later on, if needed; even if the system will not be responsive right away.
Basic Web Design Principles
Another important design concept is applying basic web design principles, which apply to any site. Some important design principles to consider include proximity, alignment, repetition, and contract. The University of Albany posted the following as key principles to consider:
Proximity
Proximity refers to the distance between elements on a Web page and how the elements relate to one another. These elements include text, navigation, headings, and so on. Generally speaking, elements that are close together appear to have a stronger relationship than elements that are farther apart.
Alignment
One of the most critical principles of design is alignment. Like proximity, alignment can enhance or detract from the appearance of a Web page. But in addition, it can significantly affect the readability of material on a page.
On most printed pages in Western culture, the text is aligned left and reads from left to right. This provides a consistent starting point for each new line. The eye of the reader becomes used to easily finding the beginning of a new line.
Repetition
Repetition is not only saying the same thing several times to get a point across, it is also the use of a consistent theme throughout a Web site. While all the pages on a Web site do not have to be exactly the same, there should be enough similarities to create a consistent look and feel to the site.
Contrast
Contrast works in several different ways. Perhaps the most obvious example of contrast is the color of text against a background. It is much easier to read text that contrasts highly with the background.
However, contrast can also include all sorts of differences between elements. Under some circumstances, contrast is used to make something different so that it stands out. This helps to indicate what is important.
(N.D., 2015)
10 Design Concepts Web Developers Need to Know
Web developers and designers must consider many design concepts when creating a site. An article by Kyle Fieldler outlines 10 important design concepts web developers need to know. Below is a list, but for details on each, follow the link at the end to read the full article.
- Design isn’t just visual
- Be user-centric
- Design is in detail
- When designing, sketch often
- Use white space06. Grids aren’t just CSS frameworks
- Grids aren’t just CSS frameworks
- When everything has emphasis, nothing does
- Keep an inspiration folder
- Design is all about problem solving
- Know how to talk about and critique design
Fieldler, (2013)
That’s a wrap
Thank you for taking the time to read this blog post, hopefully it has been helpful in describing important web design concepts in our industry and how they may be applied. One last gem to share, is an article, written by Cameron Chapman, called, “Best Practices in Modern Web Design: The Ultimate Round-Up”. In this article he covers 100 different best practices and concepts relating to web design and is a great reference for further exploration on this topic. Remember, the success of a good system or website relies on good design.
References
Pettit, Nick, (2014), “The 2014 Guide to Responsive Web Design” Website:
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design
N.D., (2015), “Basic Web Design Concepts”, Website:
http://library.albany.edu/imc/webdesign/page2a.html
Chapman, Cameron, (2010), “Best Practices In Modern Web Design: The Ultimate Round-Up”, Website:
http://www.smashingmagazine.com/2010/03/23/best-practices-in-modern-web-design-the-ultimate-round-up/
Fieldler, Kyle, (2013), “10 Design Concepts Web Developers Need to Know,” Website:
http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255
Author: Celestia Garner
