Everything You Need To Know To Get Started in Ux Ui Design

What Is a UX UI Designer?

Before you can start building that dream career, you need to have a thorough understanding of the key differences between Ux design and Ui design.

Both Ux and Ui design are essential to the design experience, and while the terms are often used interchangeably, they are two separate focuses of design.

Ux Design

Ux design refers to the user experience of the design process, which essentially means that a Ux designer focuses on principles that affect the user’s experience. For our purposes, Ux design is used in reference to the feeling a user gets when they visit a company’s website or try out an app.

In other words, a Ux designer uses their skills to design a website/app that is user friendly, taking into account how a visitor to the website/app will feel as it is being used. This might include feelings related to brand colors and graphics, but it also strongly considers things like how easy it is for a user to accomplish their desire tasks (i.e. how easy is it to checkout on an online shop? How intuitive is managing your account on a baking app?).

As a Ux designer your goal is to make the user experience as efficient, intuitive, and easy to use as possible, so that the user experiences positive feelings while using the website/app.

Ui Design

Ui design is strictly a digital term. It refers to all the components that make up the user interface of a website or app. This can include buttons, spacing, typography, and icons. A Ui designer wants to make a user’s experience as intuitive as possible, which is similar to Ux design, but rather than focusing on the feelings associated with the process, they are more focused strictly on design.

For example, if you create a website for an online store, as a Ui designer, you want to ensure that shoppers can quickly and easily add products to their cart with an obvious check-out button. The checkout process should be smooth, the product descriptions should be clear, and locating the company’s return policy should be simple. Considering things like buttons, layout, and colors can all make these things more intuitive and obvious for a user.

In order to get hired as a UX UI designer, you need an online portfolio website that showcases your work. UX portfolios are like visual resumes, which means it’s important to make sure that your portfolio stands out enough to make a hiring manager or recruiter pay attention.

If your design portfolio doesn’t make an impression, you’ll risk being passed over for the job, regardless of how skilled you actually are. If creating a UX portfolio sounds overwhelming, don’t worry! We’ll walk you through everything you need to know to create a UX UI design portfolio that gets you noticed, even if you’ve had zero real-world experience as a designer.

Today we’re going to be exploring everything that you need to know in order to get your career in Ux Ui design started off on the right foot. You’ll find it all here, from what the difference is between Ux and Ui design, to all the tips and tricks you need to start building your portfolio.

Dive deep into this guide and for tips to help your career in Ux Ui design start growing in no time.

What Is a UX/UI Designer and What Do They Do?

In the design world, you’ll often find that job posting for Ux and Ui designers are either used interchangeably, or the position is combined (i.e. a posting for a Ux designer also requires the employee to have Ui skills).

In order to understand the meaning behind both Ux and Ui design, we’ll look closely at what you need in order to have success in these two fields.

Ux designers are problem solvers

As a Ux designer, you need to be able to solve problems, but even more importantly, you need to be able to anticipate problems before they occur. In other words, you need to be able to think about your target user, anticipate their needs, and then solve any problems that you think they would come up against while using the product.

Ux designers are organized

Ux designers are often required to build wireframes. Wireframes are essentially the blueprint of how a product/website/app will work. In order to accomplish this, being able to organize information in a way that is intuitive, clear, and logical is extremely important.

Ux designers are visually-minded

Ux designers are generally very visual in the sense that they can see a vision for how a product will function and then being that vision to life through a series of steps.

Without a strong vision, Ux design would be impossible.

Ui designers are detail-oriented

As a Ui designer, you need to be detail-oriented. From the buttons used on the home page of a website to the distinct colors that are used in the creation of an app, no detail is missed by a Ui designer.

Being detail-oriented ensures that the design is consistent, visually appealing, and most importantly, user-friendly.

Ui designers are design-oriented

This shouldn’t be too much of a shock considering the word “design” is in the job title, but it’s worth pointing out that Ui designers are very design-oriented. They understand color palettes, how different shapes work together on a screen, and what layouts are most visually appealing for users.

If you’re still uncertain about the differences between Ux and Ui designers, think of it this way:

Ux design usually comes first and is the bare bones of the design process. It identifies and solves user problems
Ui design comes next and is more focused on filling in the details to create an aesthetically-pleasing, interactive experience

How Do You Get Started As A UX UI Designer?

While some creative careers can allow for self-learning or pure skill, Ux Ui designers tend to have more technical knowledge that is often best taught in some type of formal classroom setting, whether that be a college program or online course.

Either way, following these steps and really immersing yourself in the world of Ux and Ui design is extremely helpful when building your career in this technical field.

If you want to become a Ux Ui designer follow these steps:

Step 1: Learn the skills

As we said, you’re not going to be simply born with Ux Ui design skills. If you want to succeed in this field, you need to understand user research, wireframing, prototyping, and responsive web design.

If you don’t want to spend years in a formal program for Ux Ui design, you’ll be happy to hear that boot camps and online learning platforms are becoming increasingly popular for learning these skills.

With these styles of learning, you can get a hands-on, immersive experience, which is extremely helpful for Ux Ui in particular. The more you study how users interface with products and web design, the better you’ll become at designing.

Step 2: Master the software

During your schooling, regardless of whether you take a formal course or a boot camp, you will likely use the software necessary for Ux Ui designers. This can include Sketch, Illustrator, Adobe XD, Axure, and Figma.

It’s worth including this as its own step because mastering this software will become key for success in this career.

Think of it this way: A chef can receive all the instruction in the world, but if they don’t know how to use kitchen basics and tools, they’ll likely struggle to become successful as a chef. The same analogy can apply to aspiring Ux Ui designers.

Step 3: Apply your knowledge

If you want to become a Ux Ui designer, you need to work on your own projects to develop your skills.

Your skills will develop as you gain experience and work on more projects, which is why it’s so important that you do not wait around for projects to come to you, but instead, take action yourself by working on your own projects.

In addition, working on your own projects will help you when it comes time to build your portfolio with content, which we’ll talk about in the next step.

Step 4: Build your portfolio

Having a comprehensive portfolio is essential for a Ux Ui designer. However, keep in mind, just because we used the word comprehensive here does not mean you should stuff your portfolio with every design project you’ve ever worked on. Instead, you should only use your best/most impressive pieces of work.

In fact, you can take this a step further, and specifically research companies/clients you want to work with and cater your portfolio to appeal to them.

If you want to learn more about building your portfolio specifically for Ux Ui design, this portfolio guide for aspiring Ux Ui designers will help.

Step 5: Start applying

If you build your portfolio, put up a website, and then simply hope that you start getting work as a Ux Ui designer, you’ll likely be very disappointed.

Whether you want to work full-time with a company as a Ux Ui designer or you’re more so interested in working freelance, it is absolutely essential that you start reaching out to potential clients.

Just be sure that you’re applying to jobs that fit within your skillset. For example, if you happen to come across a Ui Engineer position, but you have no experience with coding, this is not a job for you right now. Instead, work your way up to positions and never stop learning new skills in this field.

By no means do you have to have everything figured out to start applying to jobs, but you’ll likely find that building up your skills in a slow and methodical manner will lead you to the best chance of success.

If you’re interested in learning more about Ux Ui design, we highly recommend this in-depth guide to build your Ux Ui design career.

What Are The Different Types Of Ux Ui Design?

We’ve already gone over the differences between Ux and Ui design, but it’s important to reiterate that these two styles of design are distinct categories of design themselves, which is why we’re going to further break down these two types of design.

What are the responsibilities of a Ux designer:

Competitor analysis
Customer analysis (i.e. how does the customer interact with the product?)
Product strategy
Content development
Wireframing (i.e. organization/clear vision for product)
Testing product/making appropriate changes
Product analysis/monitoring user experience

What are the responsibilities of a Ui designer:

Understanding of Ux design in order to develop a user-friendly interface
Customer analysis
Design research
Branding/story-telling
Animation
Responsive design (i.e. website that works on desktop, tablet, mobile)
Working with developers if you don’t have coding skills

To keep it simple, remember: Ux design focuses on the feelings associated with the design, while Ui design is more about the aesthetics and usability of the product.

Jobs Closely Associated with Ux Ui Design

While there aren’t necessarily different types of Ux and Ui design, there are a lot of different job titles that are closely associated with both styles of design. To break this down further, we’ll go over some of the other common job titles you’ll come across when looking for Ux and Ui design jobs:

Ux Researcher

While not as design-driven, Ux researchers offer key information in the design process. They use surveys, interviews, and data analysis to discover key findings related to how users interact with a product.

Ux Strategist

If you have both a design background and experience with business strategy you might find that this job title is well suited for you.

A Ux Strategist meets with clients to help define business goals, while also coming up with innovative solutions and business strategies to push the product forward.

Ux Developer

This title is similar to a Ux designer, but Ux developers tend to handle more technical aspects of the job. In particular, Ux developers have visual skills, as well as experience with computer programing (i.e. coding). In other words, Ux developers have to consider how users think when using their website/app, but they also require web development skills.

Ux Architects

If you have a broad range of skills that expand beyond just design, pursuing a career as a Ux Architect might be appropriate for you. Ux Architects also work on things like content development, social media, branding, and even business strategy. Essentially, Ux Architects are team leads who have their hands in everything in order to provide the customer with the best overall user experience possible.

UI Engineer

Again, Ui Engineers need to have both visual skills, as well as computer programming skills. Essentially their objective is to create a well-designed website that is easy to use. How is this different from Ui design? Ui engineers have the skills available to not only design the website but can also code the website from scratch.

Skills associated with Ux and Ui design

None of the following skills are required for Ux Ui design, but most aspiring designers who get involved in this field, also have some of these skills under the belt:

Graphic design
Photography
Visual design or visual arts (i.e. painting, drawing, etc.)
Computer programming
Branding

In other words, Ux and Ux designers either have a visual arts background or a more technical background with computer programming/software engineering. Again, neither is required, but they can help give you a leg up if this is a field you’re interested in.

Why Do I Need a UX/UI Online Portfolio?

While many jobs require a written application or resume, UX/UI design portfolios are industry standard when it comes to applying for a product design job. An online portfolio acts as a place where a hiring manager can browse your past projects and get a sense of what it’s like to work with you.

Your digital portfolio can even provide an opportunity for you to be discovered by a recruiter through online marketing channels (such as LinkedIn, Behance, and Instagram) and search engine optimization practices of your site.

Get inspired to make your own digital portfolio with this round-up of the best UI designer portfolios.

What To Include In a UX Portfolio

Employers looking to hire UX designers want to see a strong portfolio that shows more than just the final product. our portfolio should show an overview of your design projects, with an individual page for each design concept going into further detail about the thought process you went through.

It should be easy to take in at a glance, so hiring managers can quickly get a sense of your design skills and aesthetic. In addition to case studies for your best designs, keep it simple with an About page and your contact information.

Unnecessary details or filler projects will only end up weakening the overall impression of your UX portfolio.

If you’re just starting out in your career in UX or UI design, this next step is for you.

What To Include In a UX Portfolio

Unnecessary details or filler projects will only end up weakening the overall impression of your UX portfolio.

If you’re just starting out in your career in UX or UI design, this next step is for you.

What Are Some Ux Ui Design Examples?

One of the best ways to figure out what a Ux Ui designer does is to take a look at some examples of professionals who are already working in this field.

Keep in mind that with all three examples provided, these individuals cover both the Ux and Ui portion of the design process.

Lisa Emmanuel

As a Ux Ui designer, having a thoughtfully designed website is extremely important. While your website might not be a piece that you worked on for a client, it does show off your abilities, skills, and design style.

Lisa Emmanuel was clearly aware of this when coming up with her website. She keeps things minimal, she uses an easy-to-navigate sidebar, and you shouldn’t have any issue finding what you need on her website. Remember: as a Ux Ui designer, organization is key.

If you’re interested in having a design portfolio that is similar to Lisa’s, she uses the Order template from Format.

Razane Hanna

Razane Hanna shows us how words, visuals, and layout can all work together to give us a website that is simple and totally user-friendly.

This Ux Ui designer began her career as a landscape architect and has since applied her knowledge to Ux and Ui design that puts the user at the center of the experience.

Razane also works as a photographer, which goes to show that this is a field of design where you can take past experiences and apply them to your Ux and Ui design career for an even more robust experience.

If you’re interested in having a design portfolio that is similar to Razane’s, she uses the Iris theme from Format.

Yanina Fiorilla

Yanina Fiorilla is another great example of how you can bring other skills to your experience as a Ux Ui designer. In particular, Yanina also has professional experience with branding, product growth design, interactive prototypes, mobile app development, web design, and graphic design just to name a few.

As a Ux Ui designer, Yanina ensures that her ability to organize information shines through by providing us with a website that is carefully organized by different projects so that clients can easily differentiate between the various projects she has worked on.

If you’re interested in having a design portfolio that is similar to Yanina’s, she uses the Amazon theme from Format.

Ready to build an UX UI designer portfolio?

Showcase your UX UI design projects with a stunning online portfolio website.

Build My Website

How To Do a Self-Directed UX Case Study

If you’re worried about creating a portfolio before you’ve had a chance to do any professional UX UI design work, there’s no need.

Self-directed projects are a great way for new designers to hone their skills while creating material to fill out to build a UX portfolio. Hiring managers want to know more about you and your process—tell a captivating story about your design process, and make sure to show your work using these six topics.

Introduce the design problem.
Define your role in the project.
Show your process using notes, sketches, and prototypes.
Explain the issues you came up against and how you addressed them.
Define the results that the client saw as a result of your designs.
Talk about what you learned from the design challenge.

Now that you know what a case study should include, it’s time to turn your attention to potential side projects that you can pursue to include in your UX portfolio.

How To Come Up With Ideas for UX UI Design Case Studies

If you need to practice your design process and skills while building up your portfolio, let’s take a closer look at the two main types of design projects you can do.

Redesign UX Case Studies

A great way to get experience with the designing process is to do an unsolicited redesign of a web page or app that you use.

First, figure out what the problem areas are, and spend some time coming up with potential solutions. The ability to find and address problems is a huge part of working as a UX designer, and you should treat sample projects for your portfolios as if they were a paid, professional assignment.

Anyone can decide that an app or website would function better if it were arranged differently, but professional designers identify problems and research how to solve them so that every change that is made is intentional for overall improvements.

Creating UX Case Studies for a New Idea

Unlike a redesign project, personal projects usually start with an idea for a product or service that you wish existed. For instance, you could bring a fictional concept to life like Cher Horowitz’s closet from Clueless in an app form.

While this process may just be for your portfolio, it’s still a good idea to approach it like a real design project, including explaining your process, the choices you made, and the reasons behind them.

While you may experience a need in the market, it’s important that you put the effort into finding out whether others are experiencing the same problem as you. Keep in mind that a successful UX designer does more than just design, they also have to be able to present their ideas effectively that would appeal to an actual demographic.

How To Choose Which UX/UI Design Projects To Include In Your Portfolio

If you have a number of projects to choose from for your portfolio, it may be tempting to showcase your experience by including them all. However, when you crowd your portfolio with filler content, your identity as a designer can get lost in the shuffle.

Think about what you are trying to communicate with your portfolio.

When someone looks at your web page, what information do you want them to absorb about the work you do?

Everything that you include on your site should serve this goal. Most employers are looking for designers with a unique perspective. Focus on what makes you different and unique, and emphasize that. Rather than uploading all your projects, choose your strongest work.

You should also make sure that the type of projects you are showcasing is the kind of work that you want to do in the future. Instead of including work that you don’t enjoy doing and don’t want to do more of, focus on past projects that you’ve enjoyed the most.

How To Build A UI/UX Portfolio

You already know what a UX UI designer does, why you need a portfolio, and what should be included in your professional web page. Now it’s time to go over the exact steps you need to take to create your own portfolio website.

Choose a Website Builder

Rather than investing a ton of your time into learning to code from scratch, keep things simple with a site builder that uses templates so you can build a professional online presence without the hassle. Here are some of the features that you should look out for when choosing your website builder.

Professionally designed templates that make your work stand out
Intuitive design editor, so you can make a website in a matter of minutes
Fully customizable to suit your unique brand as a designer
Mobile optimized templates that look good on any device
High-quality images without sacrificing page load times
Online store with no fees and no commission
Search engine optimization tools to get you discovered
Custom domain and email address for added professionalism
Privacy features including password protection, watermark tool, and disabled right-click save
Blog post tools
24/7 customer support and community forum
offers a free trial to test the website builder

Select Your Best UX Design Work

Once you’ve figured out how you’re going to make your portfolio, you’ll need to turn your attention to what content you should include.

When it comes to creating a professional portfolio, remember to emphasize quality over quantity. You should aim for around 5–8 detailed case studies which align with the job description.

Try to show a variety of skills and the different ways you can apply your design concepts, without branching too far away from your distinct style and personal brand.

Choose a Website Template

When choosing your template, keep it simple.

You want your work to speak for itself rather than distract your site visitors with lots of bells and whistles.

Each case study that you include should use the same template so that the pages of your site are visually consistent. Look at other UX/UI designer portfolio examples to get inspired. Here are some of our favorite themes for UI design portfolios.

Sierra

Sierra’s vertical tiled layout communicates fun professionalism. The simple design serves to showcase your work without distractions.

Horizon Left

This template uses an accessible left-hand menu and image captions to provide extra context to each photo. Your page will be intuitive and easy to navigate, with a horizontal scroll that works especially well with portrait orientation images.

Order

Order is a square, grid-based design that has a clean and organized appearance. The expanded left menu makes for easy navigation around your portfolio, and the grid allows site visitors to quickly see an overview of your entire body of work.

Albers

This unique template uses dynamic, full-width images that bring attention to the details in your work. The full-page vertical image galleries provide an editorial experience, and the menu scrolls with the page to make for easy site navigation.

Ora

Ora is a great template to use if you prefer a simple and clean portfolio. The vertical scroll and left-hand menu make navigation intuitive, and it works best with landscape images that fill the entire screen.

How To Make a UX Portfolio in 5 Simple Steps

Now that you’ve chosen your website builder and seen some template options, we’ll walk you through these five easy steps to creating your own portfolio.

Step 1: Choose Your Theme

One of the most important aspects of your portfolio is how it looks. However, you don’t need to stress too much about choosing the perfect template because you can always change it later without having to start over from scratch.

Templates generally fall into five main categories: horizontal scrolling, fullscreen slideshow, thumbnails, vertical scrolling, and slideshow. Take a look at all of the different options and choose one that is visually appealing to you.

Step 2: Customize Your Online Presence

A big part of creating a UX design portfolio is making sure that your unique personality and point of view are being clearly communicated.

This could mean changing your fonts, colors, layouts, and more. If you have a logo and brand photos, include them throughout your online portfolio. If you haven’t established fonts and colors for your brand, just remember to keep it simple so that the attention stays focused on your UX work.

Step 3: Create A Gallery Page

Start by creating your first gallery page.

You may want to set up your site so that the home page provides a visual overview of your featured case studies, with each image opening up into a more detailed gallery page. Use the same layout for each individual project to keep your site consistent.

Step 4: Write An About Page

When you’re applying for jobs, employers want to get to know you as a person. An about page is the perfect opportunity to talk about who you are, your background, your experience and relevant interests, and your goals for your career. You can also include a professional resume or CV.

Step 5: Add Your Contact Information

What’s the point in having an amazing portfolio site if your viewers can’t figure out how to get in touch? Add your email address, social media links, phone number, and physical address if applicable.

Once you’ve completed these five steps, you can keep improving your website with a blog, an online store, and email marketing campaigns. Now that you’ve got a good handle on what a UX designer does, how to become one, and how to create a website that stands out, it’s time to take stock of your UX design projects and start creating your own online portfolio.

How Do You Price Your Ux Ui Design Services?

As with most creative pursuits, you have two career options. You can apply to work within a company or you can choose to work freelance. Both options have their pros and cons, but when it comes to pricing, you’ll find that the freelance route gives you more freedom to price your services based on what you want to make/your skills.

Just for reference, if you do decide that you want to work within a company as a Ux Ui designer, the salary can vary widely depending on your level of experience and what duties you’ll be performing. In general, though, skilled Ux Ui designers, on average, in the United States, make $115,743/ year.

While this is a great paycheck, you might find it hard to obtain such a lucrative position when you’re just starting off your career, which is why working as a freelance Ux Ui designer might be your best bet to start while you’re building up your skills and portfolio.

Ux Ui pricing for freelancers

Freelancers generally have two methods for pricing their services:

By the hour
By the project (fixed price)

In the case of Ux Ui design, a fixed price tends to be popular since, generally, most designers can gauge approximately how long a project will take.

If you charge by the hour and then you run into an unforeseen issue, you could end up spending multiple hours longer on the project than you anticipated. While this can work out nicely for you since you’ll get paid for those extra hours worked, it’s not always appreciated by the client who might not have the flexible budget to pay you for those unexpected hours.

If you can gather as much information as possible about the project prior to committing, you should be able to come up with a fixed rate price that feels both fair for you and fair for the client.

Here are some things to consider when pricing your Ux Ui services:

How much work has already been done on the project? Have brand colors, typography, logos, and existing designs already been implemented or are you starting from scratch?
What is the client trying to accomplish with the project? This will help you determine the scope of the project (i.e. do they want just a basic app or do they require a lot of custom modifications?)
If it’s a web project, how many pages are you required to develop?
Does the client require animation?
What deliverables does the client expect? (i.e. do they need wireframes, descriptions of each page, flow charts explaining how the user will navigate through the app?)

Your main objective when pricing your services is to be as clear as possible to the client what they should expect from your services. On the other hand, you should also be listening carefully to what the client expects from you and make sure to ask them the right questions. Having clear expectations on both ends will help you come up with a price that feels appropriate both for yourself and the client.

Working for free

On occasion, you might find that working for free in exchange for experience is worth it. This is especially true when you’re building up your portfolio; however, we want to caution you against selling yourself short. Ux Ui design is a very specialized and highly sought-after skill set. Most professional, reputable clients won’t mind paying for your services if you have the skills to back up your prices.

Don’t forget, you can also always choose to work on your own projects in order to add to your portfolio. This way, even though you’re essentially working for free, you have total creative freedom and control over the project.

Are you ready to launch your Ux Ui design career?

As we’ve alluded to multiple times now, Ux Ui design is a specialized skill that requires a great deal of patience, commitment, and most importantly, experience.

The fastest method to success as a Ux Ui designer will always involve experience. Experience will not only help you become a better designer in general, but you’ll also learn more about how users interface with websites/apps and what users expect from quality design.

Don’t undervalue the importance of experience in this growing industry.

And remember, showing off your experience in the form of a portfolio is an excellent way to put yourself out there, show off your skills, and grow your resume.

If you need help putting together a professional portfolio that shows off your design work in the best way, we highly recommend taking a look through our templates that were designed specifically with creative professionals like yourself in mind.

Get started with Format today and watch as your Ux Ui design career takes off.

Start Your Free Trial