Original Source: https://www.smashingmagazine.com/2019/09/questions-ask-next-potential-employer/

15 Questions To Ask Your Next Potential Employer

15 Questions To Ask Your Next Potential Employer

Robert Hoekman Jr

2019-09-20T12:30:59+02:00
2019-09-20T22:08:07+00:00

In my book “Experience Required”, I encourage in-house UX professionals to leave companies who refuse to advance their UX intelligence and capability. There are far too many companies these days who understand the value of UX to waste your time being a martyr for one who will only frustrate you. Your best chance of doing a good job is to avoid a bad position.

Smartly, during a recent Q&A about the book, an audience member asked how we can avoid taking these jobs in the first place. What kinds of questions, he wondered, can you ask during an interview to spot red flags before the company stabs the whole flagpole into your sacred UX heart?

Know What You Want To Know

There’s the usual stuff, sure, such as asking why the position you’re applying for is currently open. What the company’s turnover rate is like. Why that turnover rate is so low or high. A little Googling will easily enough net you a decent list of broad questions you can ask any employer.

But what you really want is to get UX-specific. You want to hone in on precisely what your life might be like should you take the position.

Your best chance of doing a good job is to avoid a bad position.

“

Sadly, I lacked a great answer at the time to the question about interview questions, so I let it eat at me until I woke up at three a.m two days later and started writing notes. That morning, I emailed my reply to the moderator.

Ask A Great Question, Then Shut Up

To devise the list below, I considered what kinds of things I’d wish a company knew and understood about UX prior to working with them. I can operate in all kinds of situations—as a UX and process innovation consultant, this has been my job, and pleasure, for nearly 13 years now—but I want to know from the start, every time, that the effort will be set up for success. These questions aim to uncover the dirty details that will tell me what I’m walking into.

Much like a good validation session or user interview, these questions are open-ended and designed to draw out thoughtful, long-winded responses. (One-word answers are useless.) I strongly recommend that when and if you ask them, you follow each question with a long, stealthy vow of silence. People will tell you all about who they are if you just shut up long enough to hear them do it. Stay quiet for at least ten seconds longer than you think is reasonable and you’ll get the world.

People will tell you all about who they are if you just shut up long enough to hear them do it.

“

I’d ask these questions of as many individuals as possible. Given that tech interviews are often hours-long and involve many interviewers, you should be able to grab yourself a wealth of good answers before you head out the door to process and sleep.

If, on the contrary, you are given too little time to ask all these questions, prioritize the ones you’re personally most concerned about, and then consider that insufficient interview time might be a red flag.

Important: The key to the answers you receive is to read between the lines. Listen to what is said, note what is not said, and decide how to interpret the answers you get. I’ve included some red flags to watch out for along with each question below.

The Questions

Let’s get right to it.

1. How does this company define UX? As in, what do you believe is the purpose, scope, and result of good UX work?

Intent

Literally every person on Earth who is asked this question will give a slightly, or wildly, different answer than you expect or hope for. At the very least, the person interviewing you should have an opinion. They should have a sense of how the company views UX, what the various UX roles have to offer, and what effect they should have.

Red Flag(s)

The UX team has a very limited role, has no real influence, and the team, for the most part, is stretched so thin you could put them on a cracker.

2. How do the non-UX people on your product team currently participate in UX decisions?

Follow-ups: Describe a recent example of this kind of participation. What was the UX objective? How was that objective vetted as a real need? What did you do to achieve the objective, step-by-step? How did it turn out? What did you learn?

Intent

Find out how the entire product team approaches UX and how collaborative and supportive they might be in acquiring and acting on good research insights.

Red Flag(s)

They don’t participate in UX decisions.

3. What UX roles exist in the organization, and what do they do?

Intent

Determine where you’ll fit in, and how difficult it might be for you to gain influence, experience, or mentorship (depending on what you’re after). Also, build on the previous question about who does what and how.

Red Flag(s)

UX people at the company are heavily skilled in graphic design, and not so skilled in strategy. The current team members have limited influence. Your role will be similar. Strategy is handled by someone else, and it trickles down to the UX team for execution.

4. Who is your most experienced UX person and in what ways does that experience separate them from others?

Intent

Determine the range of UX intelligence on the team from highest to lowest. Is the person at the top whip-smart and a fantastic leader? Does that person mentor the others and make them better?

Red Flag(s)

The interviewer cannot articulate what makes that person better or more compelling than others. If they can’t answer this question, you’re speaking to someone who has no business making a UX hiring decision. Ask to speak to someone with more inside knowledge.

Noteworthy, but not necessarily a red flag: If you learn that the most experienced person on the team is actually someone with a very sleight skill set, this can mean either there’s room for you to become an influencer, or the company puts so little value on UX that they’ve selected only employees with a small view of UX. The latter could mean you’ll spend all your time trying to prove the value of bigger UX involvement and more strategic work. You may like that sort of thing. I do. This would not be a red flag for me. It might be for you.

5. What are the company’s plans for UX long-term? (Expand it? Reduce it? How so, and why? Is there a budget for its expansion? Who controls it and how is it determined?)

Intent

Map out your road for the next couple of years. Can you rise into the role you want? Or will you be stuck in a cul-de-sac with zero chance of professional growth?

Red Flag(s)

We plan to keep doing exactly what we do now, and what we do now is pretty boring or weak. Also, we have no budget—like, ever—so if you want to bring in a consultant, attend a seminar, hire another person, or run a comprehensive usability study with outside customers, well, good luck with that.

6. How do UX professionals here communicate their recommendations?

Follow-up: How could they improve?

Intent

Learn how they do it now, and more importantly, whether or not it works.

Red Flag(s)

The interviewer has no answer, or—far worse—has an anti-answer that involves lots of arm-waving and ideas falling on deaf ears. The former can, again, mean the interviewer has no business interviewing a UX candidate. The latter can mean the UX team is terrible at communicating and selling its ideas. While this can be overcome with your much better communication skills, it will almost certainly mean the company has some baggage to wade through. Poor experiences in the past will put other product team members on defense. You’ll have to play some politics and work extra heard on building rapport to get anywhere.

7. Who tends to offer the most resistance to UX recommendations and methods and why?

Follow-up: And how much power does that person have?

Intent

This person will either give you the most grief or will give you the great opportunity to improve your communication skills (remember: design is communication!). Knowing who it is up front and how that person operates can tell you what the experience will be like.

Red Flag(s)

Executives, because they distrust UX. If you lack support at the top, it will be a daily struggle to achieve anything substantive.

8. What do UX practitioners here do to advance their values and methods beyond project work? Please be specific.

Intent

See how motivated the UX team is to perpetuate UX values to the rest of the company and improve how the team works.

Red Flag(s)

They don’t.

9. What do you think they should do differently? Why?

Intent

Discover how your interviewer feels about UX. This is, after all, a person who has a say in hiring you. Presumably, this person will be a big factor in your success.

Red Flag(s)

Keep their noses out of product development, stop telling the engineers what to do (speaks to perception of pushy UX people).

10. Describe a typical project process. (How does it start? What happens first? Next? And then?)

Intent

Find out if there is a process, what it looks like, and how well it aligns with your beliefs as a UX professional.

Red Flag(s)

You’ll be assigned projects from the top. You’ll research them, design a bunch of stuff in a vacuum with no way to validate and without any iteration method, and then you’ll hand all your work to the Engineering team, who will then have a thousand questions because you never spoke to each other until just now.

Bonus Question

How and when does the team try to improve on its process? (If it doesn’t, let’s call that a potential red flag as well.)

11. How has your company learned from its past decisions, and what have you done with those learnings?

Intent

UX is an everlasting experiment. Find out if this company understands it’s supposed to learn from the work and become smarter as a result.

Red Flag(s)

No examples, no thoughts.

12. If this is an agency who produces work for clients: What kind of support or backup does this agency provide for its UX recommendations, and how much power does the UX group have to push back against wrongheaded client ideas?

Follow-ups: How does the team go about challenging those ideas? Provide a recent example.

Intent

Find out how often you’ll be thrown under the proverbial bus when a client pushes back against what you know to be the right approach to a given problem. Your job will be to make intelligence-based recommendations; don’t torture yourself by working with people who refuse to hear them.

Red Flag(s)

The interviewer says the agency does whatever the clients demand. You will be a glorified wireframe monkey with no real power to change the world for the better.

13. How does the company support the UX group’s work and methods?

Intent

Determine how the company as a whole thinks about UX, both as a team and a practice. Is UX the strange alien in the corner of the room, or is it embraced and participated in by every product team member?

Red Flag(s)

UX is a strange alien. Good luck getting anyone to listen to you.

14. What design tools (software) does your team use and why?

Follow-ups: How receptive are people to trying new tools? How does evolution happen?

Intent

Know what software you should be familiar with, why the team uses it, and how you might go about introducing new tools that could be better in some situations.

Red Flag(s)

Gain insight into how the team thinks about the UI portion of the design process. Does it start with loose ideas drawn on napkins and gradually move toward higher-quality? Or does it attempt to start with perfection and end up throwing out a lot of work? (See the next question for more on this.)

15. Does a digital design start low-fi or high-fi, and what is the thinking behind this approach?

Follow-up: If you start lo-if, how does a design progress?

Intent

You can waste a lot of hours on pixel-perfect work you end up throwing out. A company who burns through money like that is also going to be the first one to cut staff when things get tight. No idea should be carried through to its pixel-perfect end until it’s been collaborated on and vetted somehow, so you want to know that the company is smart enough to start lo-fidelity and move gradually to hi-fidelity. Hi-fi work should be the result of validation and iteration, not the start of it. A lo-fi > hi-fi process mitigates risk.

Red Flag(s)

All design work starts and ends in Photoshop or Sketch, and is expected to be 100% flawless and final before anyone sees what you’ve produced.

Running The Interview

In an unrelated Q&A years ago, a hiring manager asked how to spot a good UX professional during an interview. I answered that he should look for the person asking all the questions. I repeated this advice in Experience Required.

Now you can be the one asking all the questions.

And in doing so, not only will you increase your odds of being offered the gig, you’ll know long before the offer shows up whether to accept it.

If you, dear reader, have more ideas on how to scavenger-hunt a company’s red flags, we’re all ears. Tell us about it in the comments below.

(cc, il)

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/Bc0K9cGqc7w/

Sometimes a cool glitchy, distorted effect is the perfect addition to your web design. Maybe you’re creating a tech site, a developer’s portfolio, or something completely experimental. Distortion effects are an unconventional but interesting way to grab visitors’ attention with a unique animation.

We’ve collected some glitchy CSS effects for you to use today. They’re free to copy or study as a learning tool, and they range from text and image glitch effects to hover distortions to trippy background animations. Whatever you’re looking for, one of these effects has the inspiration you need.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Pure CSS Glitch Effect

See the Pen
Pure CSS Glitch Effect by Felix Rilling (@FelixRilling)
on CodePen.

CodePen Challenge: Color Pop

See the Pen
CodePen Challenge: Color Pop by Johan Lagerqvist (@lgrqvst)
on CodePen.

Trippy CSS Effect

See the Pen
Trippy CSS effect by kryo (@kryo2k)
on CodePen.

Glitch Photo Filters CSS

See the Pen
Glitch Photo Filters CSS by Sergey (@canti23)
on CodePen.

Perspective Split Text Menu Hover

See the Pen
Perspective Split Text Menu Hover by James Bosworth (@bosworthco)
on CodePen.

Clean CSS Glitch

See the Pen
Clean CSS Glitch by Piotr Galor (@pgalor)
on CodePen.

Creepy Squiggly Text Effect with SVG

Text Shuffle & Distort

See the Pen
Text shuffle & distort fx by Blaz Kemperle (@blazicke)
on CodePen.

Glitch CSS

See the Pen
Glitch CSS by Iliuta Stoica (@iliutastoica)
on CodePen.

Infinite SVG Triangle Fusion

See the Pen
Infinite SVG Triangle Fusion by Rob DiMarzo (@robdimarzo)
on CodePen.

Glitch Effect in CSS

See the Pen
Glitch effect in CSS by Thomas Aufresne (@origine)
on CodePen.

Buttons with Trippy Background Animation on Hover

Trippy – CSS only

See the Pen
Trippy – CSS only by Emmanuel Lainas (@RedGlove)
on CodePen.

Laser Text Animation

Glitch Text

See the Pen
Glitch Text by Chase (@chasebank)
on CodePen.

Oddly Satisfying CSS Only Triangle Animation

See the Pen
Oddly satisfying CSS Only triangle animation by eight (@eight)
on CodePen.

Paint on Heat Distortion

See the Pen
Paint on Heat Distortion by Matt Popovich (@mpopv)
on CodePen.

Trippy Squares – Left to Right Wave

See the Pen
Trippy Squares – Left to Right Wave! by Praveen Puglia (@praveenpuglia)
on CodePen.

Glitch Clock

See the Pen
Glitch Clock by Constantine (@museum404)
on CodePen.

Glitchy and Psychedelic CSS Effects

There’s something simply awesome about an unusual distortion effect. Using them correctly can help you make an awesome website that people will love to explore. Too much distortion can be an eyestrain, but a cool trippy background animation or some glitchy text can pull the whole design together.

You also should be careful with implementing too many CSS effects onto your website. Too many animations can lead to a slowdown. If you find your website loading slowly, this guide can help you cut down on bloat and let you keep your awesome new effects.

Next time you’re making a dark website, a site with tech or programming focus, or a page you want to be unconventional and unique, try out one of these free glitchy CSS effects. You’ll love the character it can bring to a design.

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/FX5F3G1yPmk/3-ways-boost-speed-magento-software

The success of your online stores depends on how fast and smooth it operates. If the site performance is not up to par with others in the industry, then you will lose a lot of potential customers. If that is the case with your online store, then you will need to monetize the Magneto software. […]

The post 3 Best Ways To Boost The Speed Of Magento Software appeared first on designrfix.com.

Original Source: https://www.hongkiat.com/blog/quantity-queries-css-quantity-aware/

Quantity queries are specially set-up CSS selectors that allow developers to make their code quantity-aware. In responsive design, we usually use media queries to adapt our design to different…

Visit hongkiat.com for full content.

Original Source: https://www.sitepoint.com/tailwind-unique-beautiful-websites/?utm_source=rss

When thinking about what CSS framework to use for a new project, options like Bootstrap and Foundation readily jump to mind. They’re tempting to use because of their ready-to-use, pre-designed components, which developers can use with ease right away. This approach works well with relatively simple websites with a common look and feel. But as soon as we start building more complex, unique sites with specific needs, a couple of problems arise.

At some point, we need to customize certain components, create new components, and make sure the final codebase is unified and easy to maintain after the changes.

It’s hard to satisfy the above needs with frameworks like Bootstrap and Foundation, which give us a bunch of opinionated and, in many cases, unwanted styles. As a result, we have to continuously solve specificity issues while trying to override the default styles. It doesn’t sound like a fun job, does it?

Ready-to-use solutions are easy to implement, but inflexible and confined to certain boundaries. On other hand, styling web sites without a CSS framework is powerful and flexible, but isn’t easy to manage and maintain. So, what’s the solution?

The solution, as always, is to follow the golden middle. We need to find and apply the right balance between the concrete and abstract. A low-level CSS framework offers such a balance. There are several frameworks of this kind, and in this tutorial, we’ll explore the most popular one, Tailwind CSS.

What Is Tailwind?

Tailwind is more than a CSS framework, it’s an engine for creating design systems. — Tailwind website

Tailwind is a collection of low-level utility classes. They can be used like lego bricks to build any kind of components. The collection covers the most important CSS properties, but it can be easily extended in a variety of ways. With Tailwind, customization isn’t pain in the neck anymore. The framework has great documentation, covering every class utility in detail and showing the ways it can be customized. All modern browsers, and IE11+, are supported.

Why Using Utility-first Framework?

A low-level, utility-first CSS framework like Tailwind has a plenty of benefits. Let’s explore the most significant of them:

You have greater control over elements’ appearance. We can change and fine-tune an element’s appearance much more easily with utility classes.
It’s easy to manage and maintain in large projects, because you only maintain HTML files, instead of a large CSS codebase.
It’s easier to build unique, custom website designs without fighting with unwanted styles.
It’s highly customizable and extensible, which gives us unlimited flexibility.
It has a mobile-first approach and easy implementation of responsive design patterns.
There’s the ability to extract common, repetitive patterns into custom, reusable components — in most cases without writing a single line of custom CSS.
It has self-explanatory classes. We can imagine how the styled element looks only by reading the classes.

Finally, as Tailwind’s creators say:

it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.

So, let’s try it!

Getting Started with Tailwind

To demonstrate Tailwind’s customization features, we need to install it via npm:

npm install tailwindcss

The next step is to create a styles.css file, where we include the framework styles using the @tailwind directive:

@tailwind base;

@tailwind components;

@tailwind utilities;

After that, we run the npx tailwind init command, which creates a minimal tailwind.config.js file, where we’ll put our customization options during the development. The generated file contains the following:

module.exports = {
theme: {},
variants: {},
plugins: [],
}

The next step is to build the styles in order to use them:

npx tailwind build styles.css -o output.css

Finally, we link the generated output.css file and Font Awesome in our HTML:

<link rel=”stylesheet” type=”text/css” href=”output.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css”>

And now, we’re ready to start creating.

Building a One-page Website Template

In the rest of the tutorial, we’ll build a one-page website template using the power and flexibility of Tailwind’s utility classes.

Here you can see the template in action.

I’m not going to explain every single utility (which would be boring and tiresome) so I suggest you to use the Tailwind cheatsheet as a quick reference. It contains all available utilities with their effect, plus direct links to the documentation.

We’ll build the template section by section. They are Header, Services, Projects, Team, and Footer.

We firstly wrap all section in a container:

<div class=”container mx-auto”>
<!– Put the sections here –>
</div>

Header (Logo, Navigation)

The first section — Header — will contain a logo on the left side and navigation links on the right side. Here’s how it will look:

Now, let’s explore the code behind it.

<div class=”flex justify-between items-center py-4 bg-blue-900″>
<div class=”flex-shrink-0 ml-10 cursor-pointer”>
<i class=”fas fa-drafting-compass fa-2x text-orange-500″></i>
<span class=”ml-1 text-3xl text-blue-200 font-semibold”>WebCraft</span>
</div>
<i class=”fas fa-bars fa-2x visible md:invisible mr-10 md:mr-0 text-blue-200 cursor-pointer”></i>
<ul class=”hidden md:flex overflow-x-hidden mr-10 font-semibold”>
<li class=”mr-6 p-1 border-b-2 border-orange-500″>
<a class=”text-blue-200 cursor-default” href=”#”>Home</a>
</li>
<li class=”mr-6 p-1″>
<a class=”text-white hover:text-blue-300″ href=”#”>Services</a>
</li>
<li class=”mr-6 p-1″>
<a class=”text-white hover:text-blue-300″ href=”#”>Projects</a>
</li>
<li class=”mr-6 p-1″>
<a class=”text-white hover:text-blue-300″ href=”#”>Team</a>
</li>
<li class=”mr-6 p-1″>
<a class=”text-white hover:text-blue-300″ href=”#”>About</a>
</li>
<li class=”mr-6 p-1″>
<a class=”text-white hover:text-blue-300″ href=”#”>Contacts</a>
</li>
</ul>
</div>

As you can see, the classes are pretty self-explanatory as I mentioned above. We’ll explore only the highlights.

First, we create a flex container and center its items horizontally and vertically. We also add some top and bottom padding, which Tailwind combines in a single py utility. As you may guess, there’s also a px variant for left and right. We’ll see that this type of shorthand is broadly used in many of the other utilities. As a background color, we use the darkest blue (bg-blue-900) from Tailwind’s color palette. The palette contains several colors with shades for each color distributed from 100 to 900. For example, blue-100, blue-200, blue-300, etc.

In Tailwind, we apply a color to a property by specifying the property followed by the color and the shade number. For example, text-white, bg-gray-800, border-red-500. Easy peasy.

For the logo on the left side, we use a div element, which we set not to shrink (flex-shrink-0) and move it a bit away from the edge by applying the margin-left property (ml-10). Next we use a Font Awesome icon whose classes perfectly blend with those of Tailwind. We use one of them to make the icon orange. For the textual part of the logo, we use big, light blue, semi-bolded text, with a small offset to the right.

In the middle, we add an icon that will be visible only on mobile. Here we use one of the responsive breakpoint prefixes (md). Tailwind, like Bootstrap and Foundation, follows the mobile-first approach. This means that when we use utilities without prefix (visible), they apply all the way from the smallest to the largest devices. If we want different styling for different devices, we need to use the breakpoint prefixes. So, in our case the icon will be visible on small devices, and invisible (md:invisible) on medium and beyond.

At the right side we put the nav links. We style the Home link differently, showing that it’s the active link. We also move the navigation from the edge and set it to be hidden on overflow (overflow-x-hidden). The navigation will be hidden (hidden) on mobile and set to flex (md:flex) on medium and beyond.

You can read more about responsiveness in the documentation.

Services

Let’s now create the next section, Services. Here’s how it will look:

And here’s the code:

<div class=”w-full p-6 bg-blue-100″>
<div class=”w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700″>OUR SERVICES</div>
<div class=”p-2 text-center text-lg text-gray-700″>We offer the best web development solutions.</div>
<div class=”flex justify-center flex-wrap p-10″>
<div class=”relative w-48 h-64 m-5 bg-white shadow-lg”>
<div class=”flex items-center w-48 h-20 bg-orange-500″>
<i class=”fas fa-bezier-curve fa-3x mx-auto text-white”></i>
</div>
<p class=”mx-2 py-2 border-b-2 text-center text-gray-700 font-semibold uppercase”>UI Design</p>
<p class=”p-2 text-sm text-gray-700″>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa.</p>
<div class=”absolute right-0 bottom-0 w-8 h-8 bg-gray-300 hover:bg-orange-300 text-center cursor-pointer”>
<i class=”fas fa-chevron-right mt-2 text-orange-500″></i>
</div>
</div>
…
</div>
</div>

We create a section with light blue background. Then we add an underlined title and a subtitle.

Next, we use a flex container for the services items. We use flex-wrap so the items will wrap on resize. We set the dimensions for each card and add some space and a drop shadow. Each card has a colored section with a topic icon, a title, and a description. And we also put a button with an icon in the bottom-right corner.

Here we use one of the pseudo-class variants (hover, focus, etc.). They’re used in the same way as responsive breakpoints. We use the pseudo-class prefix, followed by a colon and the property name (hover:bg-orange-300).

You can learn more about pseudo-class variants in the documentation.

For brevity, I show the code only for the first card. The other ones are similar. You have to change only the colors, icons, and titles. See the final HTML file on GitHub repo for a reference.

The post How to Build Unique, Beautiful Websites with Tailwind CSS appeared first on SitePoint.