Tips and Tricks Archives | Samantha Soper

How to Become a UX Designer: Tips from my…

April 27, 2017April 27, 2017
by Samantha Soper

So, you want to learn how to become a UX designer? Designer Alexis Delafose was wondering just that and hit me up to find out my story.

“Hey Samantha! I moved to Austin about two months ago hoping to find a job as a graphic designer (still looking) because that’s what my professional experience has been leaning towards, but I’ve developed an interest in UX design. So for all the UX designers, could you tell me about your career journey towards becoming a UX designer, some general qualifications or knowledge I would need as UX designer, and maybe list some helpful learning resources (not classes, but books, blogs, podcasts, etc)? I can and will google all of these things, of course, but I’d really value the voices of some fellow Austinites. Thanks!”

Smart thinking, Alexis! Targeting local UX folks to find out their journey is a great networking tactic and you’ll learn about the industry in your area.

My Career Journey

To be honest, my journey into UX is a little too TL;DR for this post, because it started when I was 12. If you’re interested in my story and the path that led me to UX, I’ll be writing a follow-up post covering my history on the web.

My Tips on How to Become a UX Designer

Please remember, I am speaking from my own personal experience and what I felt gave me a competitive edge. I’m not saying this is a secret formula on how to become a UX designer. The job itself, as with most tech jobs, is in a state of constant flux due to the speed of innovation.

General Qualifications

Know how things are coded.

Understanding databases and programming logic make a huge difference in effective UX wireframing. You can confidently pitch your ideas knowing the developers will be able to deliver on it. It helps you set appropriate expectations for your less tech-savvy clients and clearly explain your ideas to the back-end developers. Also, you can build out your ideas yourself, making you more valuable in a staffing shortage.

A love for (or, at least, understanding of) persuasive writing comes in very handy.

A majority of my opportunities have involved convincing people to let me do things. Similarly, much of UX design involves backing up your ideas with solid research, then presenting that data in a way anyone can understand. After all, what is a UX designer without the ability to translate their own ideas (experience) to their own clients (users)?

The biggest takeaway from persuasive writing is the analysis and research involved. You don’t just pose an idea and expect people to take your word on it. You evaluate other options, find supporting evidence, and perform statistical analysis. Sometimes, you even prove yourself wrong. When you can be confident in your ideas, people are much more likely to trust you to execute them.

Freelance your face off.

There are droves of clients on Craigslist looking for help with their website for cheap. Most importantly, freelancing helps you start building your network. Additionally, for the lower cost, clients are usually more accepting of slower speeds, as long as you set appropriate expectations. Double or triple your time estimated to leave room for inexperience. Managed expectations create a better experience for your client, so they will help you build awareness via word-of-mouth.

Working with freelance clients gives you a legitimate project to focus on and actual deadlines to meet. You also benefit from a little more creative flexibility, because you’re usually working to please one person. Pitching ideas, knowing your time constraints, understanding clients’ desires, and performing market analysis are integral in learning how to become a UX designer.

Keep your ego in check.

In most companies, there are always specialists that know more than you. They don’t know you and don’t have reason to trust what you think you know. Over time and demonstrated effort, people will respect you and what knowledge you do have. There is no substitute for experience.

Be your own devil’s advocate and question everything you do. You are going to be frustrated with people questioning you constantly. While it is your job to push the envelope, allowing your ego to take over the pushing does not help people feel comfortable working with you. The more empathetic you are to common fears or concerns of clients or other coworkers, the better you will be at building trust in these interactions. Better empathy makes for a better UX designer.

Always learn.

The network of experience touchpoints is constantly expanding. It is super difficult to keep up, especially if you are not teaching yourself constantly. If you’re just starting out, don’t be afraid to dive in. If it feels overwhelming, don’t be afraid. You’re not alone. How you’re feeling looking at UX design as a whole is how I feel taking my first steps into creating AR/VR experiences. Once I cross that foothill, there will be another mountain to climb. The constant evolution keeps things exciting.

Build or plan out some web applications for yourself. Practice sketching or teach yourself new applications or languages in your free time. For example, coding a grocery list that my partner and I could use on the web helped me learn PHP and mySQL. Soon, I will recode it in another language to learn that. Never stop learning and creating.

Practice for speed.

One of the biggest hurdles I had coming up in my career was my speed. I’d always placed quality at the utmost importance, as designers will do. Initially going into the working world, I was not prepared for the speed of conception and execution. The ability to speed-sketch or wireframe on the fly is especially relevant for communicating your ideas.

Producing quality work quickly takes a lot of practice. Don’t sacrifice quality for quantity, but don’t expect an employer to not want both. Practice is an essential part of learning how to become a UX designer. The more you create, the faster you become.

Knowledge

Mandatory:

Adobe Illustrator and Photoshop
HTML and CSS
jQuery and jQuery UI
Google Analytics
SEO Best Practices and Tools
A/B Testing
Wireframing
Responsive design

Ideal:

The full Adobe Creative Suite — InDesign is for print. Dreamweaver is still not better than handwriting your code. Flash is quickly dying. Employers are still looking for these skills, so they are still good to know.
Javascript — Employers are definitely looking for UX designers with Javascript experience, especially with Angular, React, or Node.
Git or SVN — Many companies use a version control system for effective code collaboration between different departments.
LESS or Sass — These CSS preprocessors are all over UX designer job descriptions. They are very similar to CSS but allow for logic structures and variables.
Prototyping with InVision or Sketch — These applications make prototyping faster and easier, so many employers are looking for these skills.
Drupal, WordPress, or Joomla — Content management systems (CMS) are widely used and very much requested on job descriptions.

What I’m currently learning:

Blender — Massive open-source 3D creation software.
Angular — A Javascript framework for building dynamic user interfaces.
InVision — Web-based prototyping software. I can already see their Moodboards replacing some of the Pinterest boards I’ve been collecting UX stuff on for years.

A Few Resources

I have several other posts in the drafts queue covering topics like teaching yourself to code and toolboxes for different web languages. I’ll throw you a few of those links to get you started.

Blogs

InVision Blog (the UI/UX section, particularly)
The UX Blog (He has podcasts, too!)
Smashing Magazine
A List Apart

Reference and Tutorial Sites

Finally, I should mention that UX designer is not an entry level position. While you’re still learning how to become a UX designer, take a graphic, web, or interactive designer job. Working with a company that will support your learning and will allow lateral movement would be an ideal scenario. Regardless, if you want it, you still need to work for it in your free time. Hard work pays off, but you have to have patience.

In conclusion, I hope this is enough to get you started on learning how to become a UX designer. Have some additional questions or concerns? Leave them in the comments below, or take a note from Alexis and hit me up on my Facebook page!

Tips and Tricks

CSS Beginner Tips: 6 Time-Savers

February 24, 2017June 15, 2017
by Samantha Soper

When I was first learning, a simple list of CSS beginner tips would have made my life so much easier. While it is an easy-to-learn language, there are a ton of little tricks that you need to know beyond the language and syntax. Several advancements have also been made to improve the language over the years.

Consequently, I was only able to learn these nuances and improvements through years of trial and error. To save my CSS beginners time, here’s the list of CSS questions and answers that I wish existed when I was starting out.

6 Time-Saving CSS Beginner Tips

Why aren’t width and height working?

You set your width and height with CSS and your element won’t resize.

I’ve noticed a lot of CSS beginner tips or tutorials are missing one very important declaration with their lessons on width and height. Furthermore, I’ve seen several novices overlook this when they are asking me for help troubleshooting their code.

If you’re width and height aren’t working, there is a super simple solution.

.container {
    display: block;
    width: 80%;
    height: 100%;
}

That’s it. The element just needs to have a block or inline-block display declaration set. You can check out the article on displays at W3Schools to explore the wide variety of options available.

How do I center align a container?

Now that you know how to properly set your page container width, you might notice that your content is hugging the left-hand side of the page. You want it to be centered, but text-align: center; isn’t centering the content correctly.

.container {
    display: block;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

The value of auto calculates and sets your margins based upon your element’s size and its container’s size, automatically. Unfortunately, this does not work for vertical alignment, but there is a really handy guide to centering on CSS-Tricks to help you out there.

Can I absolute position an element within a container, instead of the browser window?

You may know about absolute positioning and how useful it might be to place elements exactly where you want them on the page.

If you use absolute positioning alone, you’re only experiencing half of its usefulness. Wrapping an absolute positioned element in a relative positioned container positions that element within its container.

.container {
    /* Previous styles */
    position: relative;
}

.element {
    display: block;
    width: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}

The position property has several different values to explore. For an expanded overview, I’d suggest looking at the positioning tutorial at W3Schools.

Why does the container get bigger when I add padding?

You’d think since the padding is set to add space within an element, that it would respect the width and height declarations placed on that element.

Unfortunately, that is not the case. Adding padding without adjusting the width or height to “make room” for it can really mess up your layout, especially if you have side-by-side elements.

As a result, CSS3 introduced box-sizing to solve the discrepancy between the way padding works and the developers’ expectations.

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

The code above is a fix-all that is great for when you are starting a new project. If you’re modifying an older template (where a fix-all may cause issues), you can just add the declaration directly to your element or class. CSS-Tricks has a great history on box-sizing, if you want to learn more.

How do I make the background semi-transparent and the text opaque?

A dark or light translucent block over an image is a subtle way to make headlines or text blocks more legible.

If you’re a beginner, you may find the opacity CSS attribute and end your search. You apply opacity: 0.3; to your container. Immediately, you realize everything within the container is at 30% opacity, negating the legibility effect you were trying to achieve.

It wasn’t until CSS3 that RGBA was added as a legal color format. Take advantage of this alpha channel anywhere you’d normally use a hex code.

.container {
    /* Previous styles */
    background-image: url('bg-image.jpg');
}

.element {
    background: rgba(0,0,0,0.3);
    color: rgb(255,255,255);
}

Furthermore, RGBA is not your only option. W3Schools has a full run-down on the all the legal color values you can use in your CSS.

How can I code and debug CSS faster?

If you think memorizing the entire library of CSS attributes is the key to faster development, stop. I’ve been doing this for over 10 years and still use Google to double-check syntax sometimes. You only need to memorize what you use the most.

Your in-browser developer tool is fundamental for faster CSS coding and troubleshooting. This is the most important of all my CSS beginner tips. Honestly, it’s too important to add on as a cursory note in this post, so check out the deep-dive in my developer tools article.

In conclusion, I hope these tips help some apprentice devs avoid hours of trial and error. Since I am writing from my own experience, I’d love to hear your mind-blowing discoveries from when you were just starting out.

Do you have any CSS beginner tips that made your coding faster and easier? If you’re experienced, what do you notice junior coders overlooking when you troubleshoot their CSS? Share your favorite tips in the comments section below.

Tips and Tricks

Developer Tools: The Key to Speedy CSS

February 23, 2017August 24, 2017
by Samantha Soper

Ask any front-end developer. In-browser developer tools are the key to speedy development and debugging. Additionally, they’re useful for HTML, Javascript, and many other languages. I’ll focus on the CSS benefits today.

With the right dev tools, you can modify CSS and preview your changes in real-time before you commit them to your CSS file. This shaves time off of swapping applications, uploading, and refreshing. Finally, no more stabbing around in the dark to figure out what will fix your issue! They also allow for pixel-perfect absolute positioning, as you can see exactly where you are moving an element.

Browser Basics

Throughout my time developing, I’ve found that Chrome and Safari are consistently the most accurate for cross-browser compatibility. Across operating systems, Chrome is probably the most popular because Google knows what they are doing.

If you are using Firefox, upgrade to Chrome.

If you’re using Internet Explorer, have you considered that you’re maybe not ready for web development? I joke, but seriously, you need to use a better browser. Later versions have been more W3-compliant, but it’s a tool best saved for compatibility testing.

Consequently, using the right browser can save you a ton of time in your cross-browser testing. A bad browser will leave you struggling to get your code to play nice. Your page will not render correctly in standards-compliant browsers and it’ll increase load time.

Dive in with Developer Tools

Chrome DevTools

To setup DevTools in Chrome, check out the DevTool docs.

If you’ve never done CSS troubleshooting in-browser, Google has set up a great article detailing how to use Chrome DevTools to inspect and edit your pages and styles.

Most importantly, Device Mode is BAE. It’s Chrome’s emulator for mobile and tablet devices. It is always best to compatibility test on an actual device, but Device Mode is a great supplement to standard QC.

Safari Web Inspector

To setup Web Inspector in Safari or iOS, check out the Safari Web Inspector Guide. This article also contains information to help familiarize yourself with the interface.

The main benefit to using Web Inspector is the ability to inspect and adjust elements on an actual iOS device connected to your computer. Sometimes device emulators don’t always show the same issues visible on the actual device. Web Inspector on iOS Safari makes resolving issues on Apple devices easier.

Tips for Speedy CSS with Developer Tools

Double-click on any code in the elements or styles panel to update HTML or CSS.
If a style isn’t adjusting through your tools, try applying it to the element’s HTML parent.
A scroll through the styles panel will show you other CSS impacting an element, in case something is overwriting your change.
Hover over an HTML element with the inspector cursor or in the code panel. It’ll highlight the element and tell you the size.
Psuedo-classes (like :hover) can be toggled on and off through the styles panel, so you can easily style your links and menus.
Impress your friends by sending them screenshots of wacky celebrity tweets that you’ve changed the HTML text on. (Don’t believe everything you see on the internet, kids.)

In conclusion, developer tools are your most important asset for speedy front-end dev. You make the most of your CSS code when you use these tools and do so quickly. If you are trying to learn front-end and don’t use them, you’re just going to give yourself a migraine.

I feel like dev tools are paramount, but you tell me: are there any other CSS tools you can’t live without? Empty your toolbox in the comments below.

Category: Tips and Tricks