The post How to Become a UX Designer: Tips from my Experience appeared first on Samantha Soper.
]]>“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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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!
The post How to Become a UX Designer: Tips from my Experience appeared first on Samantha Soper.
]]>The post CSS Beginner Tips: 6 Time-Savers appeared first on Samantha Soper.
]]>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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The post CSS Beginner Tips: 6 Time-Savers appeared first on Samantha Soper.
]]>The post Developer Tools: The Key to Speedy CSS appeared first on Samantha Soper.
]]>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.
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.
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.
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.
:hover
) can be toggled on and off through the styles panel, so you can easily style your links and menus.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.
The post Developer Tools: The Key to Speedy CSS appeared first on Samantha Soper.
]]>