Forem: Kyle Hunter

8️⃣ Eight User Experience Resources

Kyle Hunter — Mon, 05 Apr 2021 10:59:34 +0000

Looking to improve your user experience (UX) workflow or provide value in increasing the UX of your products? I've provided 8 resources below that I frequently reference for UX improvements when designing and developing a user interface (UI)!

👇👇👇

1️⃣ Nielsen Norman Group

https://www.nngroup.com

The Nielsen Norman Group has been a fantastic resource for me over the years. Their resources were a great help to me when starting off self taught in the topic area. They have a ton of great resources for those starting off or looking to hone their UX skill set. I would suggest that you start by reading through articles of interest to you in their deep catalogue. They also include information on upcoming UX conferences as well as provide opportunities to earn a UX certification through NN/g.

2️⃣ Interaction Design Foundation

https://www.interaction-design.org

Like the NN/g, the IDF also provides great resources and articles regarding topics in the UX world. Their strong point is their course catalog and networking opportunities with other UX professionals around the world. If you're seriously looking to expand your UX background, IDF provides a membership tier that has all sorts of perks (unlimited course enrollment and networking opportunities to name a few). But if you don't feel like a paid membership is for you than you can always access their free content as well. Highly recommend checking them out!

3️⃣ UX Collective

https://uxdesign.cc

UX Collective, a Medium channel, offers various takes on different UX topics. I enjoy reading the articles posted here when I'm in the mood for variety in UX opinions and topics.

4️⃣ Instagram Accounts

@bojanovakovic | @anfisign | @uxgoodies | @uxui_daily | @uxconnect

I try to utilize my socials as channels of inspiration. Following these accounts on Instagram have been beneficial to see what others in industry are doing and what tools they utilize. Check them out for great tips and advice when working on your UX!

5️⃣ UX Mastery

https://uxmastery.com

Another great source for articles on or relating to UX. This resource has a lot of variety and is more about general UX information which can range from UX considerations to career advice in the field. I've enjoyed browsing through their articles on career and UX design advice. It's nice to have additional opinions and insight from those concentrated in the field and this is a great source for that.

6️⃣ Usability Geek

https://usabilitygeek.com/start-here/

I really appreciate Usability Geeks "Start Here" page where they section off articles by category when you're just starting off. This can be super helpful to those that are new to the field and provide a less overwhelming experience than having to determine what you should start with on your own.

7️⃣ The Design of Everyday Things

The Design of Everyday Things - Amazon

This book is often recommended, along with the author Don Norman, for their contributions throughout the UX community. It is a long standing book that dives into the importance behind quality design built to answer the needs of our user and explains how products can either be loved or drive users nuts. In my opinion, it's a must have for any designer, developer, or anyone that deals with the product creation process.

8️⃣ The UX Book v2

The UX Book v2 - Amazon

Honestly, this book is a gem! When I first purchased it, I couldn't believe how much information was available due to the size of the book... but once I dove into it and read through it, there was so much to learn. It dives into the actual UX lifecycle from an agile perspective and walks through each process. I have already seen major improvements in my UX workflow. I would recommend this book to everyone looking to improve their UX process!

Hope you enjoyed this and found a new resource 🙂 Are there any resources that I didn't list and that you use? Feel free to reach out to me in the comments or on Twitter (@kyle_ui) with any questions you have!

Sources:

UX cover photo: https://www.webdesignerdepot.com/cdn-origin/uploads/2018/05/UX.jpg

6️⃣ Six Steps to Rapidly Design Interfaces

Kyle Hunter — Mon, 03 Aug 2020 13:29:28 +0000

If you're looking for a few quick steps on how you can rapidly design user interfaces, this is for you!

I recently started a 100 day challenge and if you have been following me on Twitter you have noticed that it is the 100 Days of Design Challenge via Daily_UI. The premise behind the challenge is exactly as the name says: you're given one high level design concept each day Monday through Friday (weekends are off-days!) for 100 days and with that information you're given free reign to come up with any design that your imagination allows!

Throughout the first 25 days, I have had a few people reach out to me regarding my process for rapidly designing UIs each day. In an effort to help others with similar questions, I put together this list of six easy steps you can implement at work or on your own projects!

1️⃣ Define the goal

Defining the overall goal helps to paint a picture of what you will be aiming to achieve with your design. The goal can be provided to you from an external source, or, you could be the one deriving the details on your own either based on your own idea or from requests via any stakeholders.

For the 100 Days of Design challenge, I'm given a short background explanation on what I should design for the day and I work to define the overall goal based on that explanation. Here's an example from my recent flight boarding pass design:

Background (provided to me from Daily UI): Design a boarding pass. Consider the origin, the destination, gates, seats, the airline, etc.

Goal: Design a boarding pass with flight information and a scannable bar code.

2️⃣ Derive any requirements and distinguishing features

After defining the goal, I work to derive any requirements and distinguishing features that the design should include. From a high level, this provides me with specific tasks to accomplish along the way and the acceptance criteria in order to achieve completion for the design.

Requirements and distinguishing features for boarding pass concept:

Passenger information, date of flight, departing information, destination information, gate number, seat number, terminal number, flight number, group number, & QR code

3️⃣ Ideate what I want to accomplish

Next, I like to ideate what I want to accomplish with this design. I often ask myself a few questions:

How can I improve on this concept and differentiate this design from those already out there?
As a user, what might I be looking for when utilizing this concept?
What design techniques can I implement throughout the design to better serve the user?

When applying this step to my boarding pass example, I wanted to take a minimalistic approach to the design. I would be working to fit a lot of information onto a small screen so I wanted to present the information to the user in a way that wouldn't feel overwhelming to consume. To achieve this, I set out to use one typeface with different weights, sizes, and colors to efficiently display the data to the user in a minimalistic manner.

4️⃣ Research for inspiration

Once the goal, requirements, and features have been identified, I begin to research other designs related to the end goal. This allows me to gain an understanding how other designers have attempted to solve similar issues throughout their work. I'll perform this research through Dribbble, UI Movement, Collect UI, and strategic searches on Google.

5️⃣ Sketch out low fidelity wireframes

Now that the details have been defined and I have performed research on related designs, I'm ready to start sketching low fidelity wireframes! Low fidelity wireframes include the most basic content and visuals to help lay out information on the interface.

I will typically create multiple iterations of low fidelity wireframes with different layouts and combinations of the information derived in step two. These iterations typically lead up to what I will move towards designing in the end.

Here are a few of my boarding pass low fidelity wireframes:

6️⃣ Create high fidelity designs

Lastly, I move over to begin creating the high fidelity designs. High fidelity wireframes or designs are more complete representations of the end product compared to low fidelity wireframes.

I typically focus on one of my low fidelity wireframes and iterate on it as necessary. Of course, if a new idea comes to mind during this process I am always willing to integrate it in if it will improve my design.

I use Figma for this step and it has been an incredible tool to pick up! I have really enjoyed its simple interface and plugin support.

Here is the final outcome for my boarding pass design:

🚀 Design your imagination

I hope this helps provide quick steps that you can apply from the beginning of your design process to rapidly produce user interface prototypes.

Feel free to reach out to me in the comments or on Twitter (@kyleh919) with any questions you have!

Sources:

Wireframe cover photo: https://cdn.dribbble.com/users/137681/screenshots/2610309/wireframe_sketches.jpg

🔟 Ten Quick Steps to Set Up Google Fonts within a Gatsby Project

Kyle Hunter — Tue, 28 Jul 2020 12:44:27 +0000

If you're looking to add custom fonts to your Gatsby project, here is a quick run down on how to get up and running! 😄

I recently started looking into how I could integrate Google Fonts into my Gatsby project. I found that there's quite a bit of documentation regarding what plugins to use but it wasn't clear on what to do after you install them and how to utilize your new fonts.

❗A few prerequisites, you have:

A Gatsby project set up (check out the quick-start docs if you need to do this)
styled-components set up within your Gatsby project (check out the Gatsby styled-components docs if you need to do this)
Terminal with npm access (download Node here if you need this)
An editor of your choice (I use and will reference VS Code)

Now let's get to the fun part and add Google Fonts to our project! 😃

1️⃣ Download your favorite font from Google Fonts

I chose to download Inter and will reference that throughout the rest of these steps.

2️⃣ Install gatsby-plugin-prefetch-google-fonts plugin

To install this, from your Terminal window run npm install --save gatsby-plugin-prefetch-google-fonts.

3️⃣ Update `gatsby-config.js`

Navigate in VS Code to the gatsby-config.js file. Insert this snippet at the end of plugins to utilize our newly installed plugin:

{
  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
      {
        family: 'Inter',
        variants: ['400', '400i', '700', '700i'],
        subsets: ['latin-ext'],
      },
    ],
  },
},

4️⃣ Create static and fonts Folders

In the src/ folder, create a static folder; and inside of the static folder, create a fonts folder

5️⃣ Add Google Fonts Files to Project

Move the Google Fonts downloaded Inter TTF (*.ttf) files into the fonts folder.

6️⃣ Create and Update fonts.css File

In the fonts folder, create fonts.css and create the following font-face for each TTF file:

@font-face {
  font-family: 'Inter Extra Light';
  src: url('./Inter-ExtraLight-slnt=0.ttf') format('truetype');
  font-style: normal;
}

Note: You want to update the font-family and url in the snippet above to point to each TTF file.

7️⃣ Create styled Folder and Associated Files

Create one folder: in the src/ folder, create a styles folder with a theme.js file and a GlobalStyles.js file.

8️⃣ Update `theme.js` and `GlobalStyles.js` Files

In the theme.js file, add the following:

const theme = {
  font: {
    primary: `'Inter Black'`,
  },
}

And in the GlobalStyles.js file, add the following:

import { createGlobalStyle } from 'styled-components';

const normalize = `
  /*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
`;

const GlobalStyles = createGlobalStyle`
  ${normalize};
  body {
    font-family: ${(props) => props.theme.font.primary};
  }
`;

export default GlobalStyles;

Note: Read more about createGlobalStyle here.

9️⃣ Update Layout

Within layout.js, add the following:

import React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';

import theme from '../styles/theme';
import GlobalStyles from '../styles/GlobalStyles';
import '../static/fonts/fonts.css';

const Layout = ({ children }) => (
  <ThemeProvider theme={theme}>
    <>
      <GlobalStyles />
      {children}
    </>
  </ThemeProvider>
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

Note: This provides access to the theme via ThemeProvider.

🔟 Verify Font Updates

Run gatsby develop in Terminal and verify the Google Fonts are now applied!

🚀 Enjoy!

Hopefully this helps you out if you have struggled with trying to add custom fonts to your Gatsby project. Feel free to reach out to me in the comments or on Twitter (@kyleh919) with any questions you have!

6️⃣ Six Reasons to Use Material-UI for React

Kyle Hunter — Sun, 05 Jul 2020 17:50:55 +0000

If you have stumbled out of the gate when starting a new project or have thought about finding a component library for React, let me introduce you to Material-UI!

I have worked with Material-UI for a few years now and it has been a huge help in many ways. Here's six reasons why I think you will love it!

1️⃣ Start off with a large library of components

This reason alone has me recommending Material-UI to those looking to start a new React project. This is especially helpful if you're working under a strict time constraint and can't spend time building each component from the ground up. Having the ability to install the package and then have access to usable components from an App Bar to Drawers without any effort makes this library incredibly powerful. There have been many times I have come up with a high level design concept and quickly used Material-UI to throw together a working prototype in little time which to me is a huge selling point.

2️⃣ Aligns with Material Design by Google

As the name suggests, Material-UI aligns with Material Design by Google out of the box. Because of this, you are given a library of components that will probably look and feel familiar to your user base. This allows you to get started working with the library quickly while spending minimal time styling components and tinkering with CSS. With Material Design, you're given a full design system that describes the intent of the many available components and examples for how they should be utilized throughout your design.

Not only are you given a library already aligning with Material Design, but you're given access to the Material Icons as well. This means a uniform set of icons to choose from that match the design system being used. Additionally, there's support for a growing collection of even more Material Design icons in a separate package called Material Design Icons!

3️⃣ Access to a fully customizable theme

The nice thing about using a fully connected component library? You are given a customizable theme that can be accessed globally throughout your components. The theme gives you access to specify the color of components, surface properties (such as elevation and light/dark mode), palette information, etc.

All of this means that you can provide greater consistency among the many components you use throughout your design. The possibilities of how you style components and the interface really is endless. There's a TON to unpack here, so I suggest checking out their theming page!

4️⃣ Extensive support for issues and bugs

This is one point that I have really enjoyed about using Material-UI. The library is regularly updated with bug fixes and additional features. Since my introduction to using the library, the team has released new major versions once per calendar year packed with new features and components. Additionally, throughout the year there are minor releases packed with bug fixes and additional features for their component libraries. Their releases are all well documented and the history of the releases is available on their site. This means that you don't have to worry about being left behind if you opt to wait on updating your packages.

Another cool aspect of working with Material-UI is the "lab". The lab is a separate package where the Material-UI team can release new components for developers to use and test out without breaking the core package. This allows developers to use the new components and provide feedback to the maintainers.

5️⃣ Regularly updated library

With the regularly updated library comes great support for issues and bugs from the Material-UI team. The team responds quickly to any issues and provides fixes in minor releases. This has been a huge plus for me while using the library.

Additionally, as a user you have influence on what could be introduced next to the library. On Twitter, the main account @MaterialUI asks for feedback on what users would like to be added to the library. Also, there is a yearly developer survey that is used to provide feedback to the maintainers on how users use the library and what could be improved!

6️⃣ Large community of users providing external support and examples

Another benefit of using Material-UI is that there is a large user base that provide additional support and examples. One of my favorite sites to visit for Material-UI inspiration is MUI Treasury. @siriwatknp has put together his own ecosystem of usable Material-UI components. This is super helpful for any inspiration you might have when trying to come up with a unique way to utilize Material-UI.

🚀 Enjoy!

Hopefully this helps you out if you have struggled with starting React projects from scratch or have been looking for a well supported React component library. Feel free to reach out to me in the comments or on Twitter (@kyleh919) with any questions you have!

Sources:

Material-UI cover photo: https://cdn.filestackcontent.com/5yjLJYBrQ6EHpN9dK0ak
Material-UI: https://material-ui.com
Material Design: https://material.io
Material Design Icons: https://materialdesignicons.com
MUI Treasury: https://mui-treasury.com

💡 Why should your team include innovation sprints?

Kyle Hunter — Mon, 15 Jun 2020 12:46:49 +0000

A few months ago my team attended a two day training event to become certified SAFe 4 Practitioners through Scaled Agile Inc. I have experience with agile software development from previous roles but never took official training to understand the entire process until this event. What really caught my attention was the concept of an innovation sprint and I want to explain why your team should be incorporating one!

What is an innovation sprint?

A team is often busy working on the features they have committed to during the program increment (PI) planning with an intense focus on continuous customer value delivery. Because of this intense focus, innovation can often be left behind in favor of near-term delivery of features and this is what innovation sprints attempt to help with.

How can employees benefit from an innovation sprint?

Increased engagement and buy-in: innovation sprints are just plain fun. They allow employees to explore their creative sides in a relaxed environment and learn new skills that can help benefit the team.
Employee morale boost: allowing the employees to explore invigorates them and provides a refreshing way to introduce new concepts. Idea generation empowers the staff to directly contribute to how products can best serve users.

Why have innovation sprints?

If you’re like me, having some dedicated time to focus on innovation just sounds awesome, right? It did to me when I learned about it. Primarily because as an engineer and designer, I LOVE to exercise my creativity! Throughout sprints, I typically have many ideas on how we can improve our user interface to better serve our users, however, it’s often difficult to fit this work in when constantly trying to meet requirements in a fast paced work environment. When I was told that we should focus on innovating, my ears naturally perked up!

Final thoughts

Some management may insist that innovation should be happening throughout regular sprints and that innovation sprints are therefore a waste of time deviating away from the end goal. I would argue that to be untrue in some sense. While I do think innovation should always be happening throughout regular sprints, often innovation is put on the back burner when deadlines creep up and schedule is tightening. Therefore, innovation sprints give teams a dedicated time to use their imagination which often leads to groundbreaking results. Innovation sprints serve a valuable purpose in bringing teams together and improving products. They are incredibly useful for teams to generate new ideas, explore new and creative ways to improve products, and they boost employee morale!

Does your team implement innovation sprints or something similar? Let me know in the comments and on Twitter (https://www.twitter.com/kyle_ui).

Sources:
- SAFe Innovation Sprint https://www.scaledagileframework.com/innovation-and-planning-iteration/
- Innovation Image: https://www.goaugment.io/wp-content/uploads/2016/07/Innovation-is-an-Attitude.jpg

Improving your workflow with aliases! 🚀🚀🚀

Kyle Hunter — Thu, 23 Apr 2020 23:20:21 +0000

Improving your workflow with aliases! 🚀

🤔 But what are aliases?

Aliases are a great way to shave off time spent when jumping around the file system via the terminal or working with git. At their core, aliases are custom strings/names (usually short in length) that are set to one or more commands (usually longer in length). You define these custom alias names in a .bash_alias file (more on this later) and then can enter them in the terminal.

You can get really creative when defining aliases to help cut down the amount of time you spend typing long chained commands out. This might seem like a minor improvement but it adds up over time!

🤯 Aliases sound awesome... how can I get started?

I use macOS so that will be the environment I center my steps around. Here are initial steps to get started:

Open Terminal.
In Terminal, navigate to your users root directory and create a new .bash_profile file by:

cd ~
touch .bash_profile

You now have the ability to add custom aliases (each on a new line) in the .bash_profile file. Be sure to restart your Terminal application after any updates made to this file. Also, if you're looking for the file in Finder, you need to show all hidden files (hit shift+command+. while in Finder).

💻 What are some useful aliases I can get started with?

Navigating Folders

workspace='/Users/your username/workspace/'
alias home='cd $workspace; pwd;'
alias documents='cd $workspace; cd ../Documents/'
alias external='cd $workspace; cd /Volumes/name of external drive'
alias myrepo='cd $workspace; cd myrepo'
alias vs='code .'

Git Shortcuts

alias gf='git fetch --all -p'
alias gpom='git pull origin master'
alias gb='git branch'
alias gl='git gl'
alias grh='git reset --hard'
alias gsl='git stash list'
alias gspop='git stash pop'

❓Alright, I'm convinced and ready to create some aliases for my Terminal workflow... but are there any negatives of using aliases?

This all sounds great and aliases are very convenient, but of course there is a potential negative with aliases and that is you may rely on them and forget what the original commands are. It's helpful to only use aliases on one of your computers if you have the luxury of multiple computers. If not, I personally recommend mixing in the actual commands from time to time so you don't end up in a bind if you need to work on a different machine!

Drop a comment below with any useful aliases that you can think of incorporating into your workflow! 😃

Forem: Kyle Hunter

8️⃣ Eight User Experience Resources

👇👇👇

1️⃣ Nielsen Norman Group

2️⃣ Interaction Design Foundation

3️⃣ UX Collective

4️⃣ Instagram Accounts

5️⃣ UX Mastery

6️⃣ Usability Geek

7️⃣ The Design of Everyday Things

8️⃣ The UX Book v2

6️⃣ Six Steps to Rapidly Design Interfaces

1️⃣ Define the goal

2️⃣ Derive any requirements and distinguishing features

3️⃣ Ideate what I want to accomplish

4️⃣ Research for inspiration

5️⃣ Sketch out low fidelity wireframes

6️⃣ Create high fidelity designs

🚀 Design your imagination

🔟 Ten Quick Steps to Set Up Google Fonts within a Gatsby Project

❗A few prerequisites, you have:

1️⃣ Download your favorite font from Google Fonts

2️⃣ Install gatsby-plugin-prefetch-google-fonts plugin

3️⃣ Update gatsby-config.js

4️⃣ Create static and fonts Folders

5️⃣ Add Google Fonts Files to Project

6️⃣ Create and Update fonts.css File

7️⃣ Create styled Folder and Associated Files

8️⃣ Update theme.js and GlobalStyles.js Files

9️⃣ Update Layout

🔟 Verify Font Updates

🚀 Enjoy!

6️⃣ Six Reasons to Use Material-UI for React

1️⃣ Start off with a large library of components

2️⃣ Aligns with Material Design by Google

3️⃣ Access to a fully customizable theme

4️⃣ Extensive support for issues and bugs

5️⃣ Regularly updated library

6️⃣ Large community of users providing external support and examples

🚀 Enjoy!

💡 Why should your team include innovation sprints?

What is an innovation sprint?

How can employees benefit from an innovation sprint?

Why have innovation sprints?

Final thoughts

Improving your workflow with aliases! 🚀🚀🚀

Improving your workflow with aliases! 🚀

🤔 But what are aliases?

🤯 Aliases sound awesome... how can I get started?

💻 What are some useful aliases I can get started with?

Navigating Folders

Git Shortcuts

❓Alright, I'm convinced and ready to create some aliases for my Terminal workflow... but are there any negatives of using aliases?

3️⃣ Update `gatsby-config.js`

8️⃣ Update `theme.js` and `GlobalStyles.js` Files