The foundation of a good design portfolio is good projects, nicely displayed. But that’s not enough. Employers and clients want to know how you created those projects, what skills they demonstrate, and what those projects reveal about you.
As a designer at any level, your portfolio is a most valuable asset. It represents what you can do, the methods you can apply to implement stakeholder objectives, your unique style and approach, and your accomplishments.
When designing digital products such as websites and apps. there are many apps to choose from. Which one is right for you? In this article we’ll talk about Adobe XD, Figma, Sketch, and Adobe Photoshop.
XD is the newest of these apps, and Adobe is putting a lot of effort into developing it quickly. Updates are released every 1–2 months, and XD has come a long way since the first beta versions.
XD aims to be the all-in-one solution for UX/UI design from wireframes to visual design, visual prototyping, voice prototyping, animation, and more. Despite XD being a relatively young app, it has some features (such as voice prototyping and repeat grid) that are not found in its competitors. While it is more advanced in some ways, it does lack some essential features. For example, there is no color management so on Display P3 monitors (like iMacs and Mac laptops use) the colors are not accurate, you can’t add multiple fills/strokes, and text styles are merely a find/change for formatting, just to name a few. Not having true styles severely limits their use because you’ll accidentally change things you didn’t intend to. There are no graphic/object styles, and exporting features are poorly implemented. Keep in mind that each app in this list has pros and cons, so none of them are perfect (Sketch and Figma also have their own set of limitations with styles for example).
Because XD came later to the game, it can open up Sketch, Photoshop, and Illustrator files and convert them into fully editable XD files. This makes it easier to switch to XD from those other apps. Being an Adobe app, it also integrates better, allowing you to edit photos in Photoshop and send an XD file to After Effects (if you need something beyond the animations you can create within XD).
XD has gained enough features that designers and companies are now starting to use it. Especially on small projects, some of the missing/poorly implemented features won't be much of an issue. However, on larger projects, those limitations might become a bigger issue. Adobe has been rapidly fixing things and adding features, so we’re seeing more and more people choosing Adobe XD.
Overall XD is quick and easy to use. We like the integrated design approach Adobe is going for, and we look forward to seeing XD continue to improve. It’s especially strong in UX design, prototyping, and animation when compared to the other apps.
You can use XD for free to see if you like it. The free version of XD gives you the full app, but with some limitations such as only one shared link (for prototypes and design specs) and no ability to save local files. If you need any of the premium features (such as multiple shared links or the ability to work with local files), you can get XD for $9.99/month (USD) or XD with all the CC apps for $52.99 (USD).
Learn more in our Adobe XD Bootcamp or another one of our Adobe XD classes.
User experience is how a person feels when interfacing with a system, product, or service. What makes User Experience Design (UX) different from User Interface (UI) design? It’s a design process which relies heavily on user research, prototyping, and user testing, among other things to identify important issues, develop solutions, and verify those solutions.
In this free introduction to UX design, we’ll discuss the main concepts involved in the UX design process and how to move into the field of user experience design. This is a great way to get started before diving into a hands-on class such as our UX & UI Design Certificate or UX Design Bootcamp.
In this live streamed seminar we explain the appropriate classes and certificate programs so you’ll know the next steps to get started in each area of design.
UX Design Classes
UX & UI Design Certificate
UX Design Bootcamp
Thinking about learning design? Learn about the different types of digital design (graphic design, web design, UX design, UI design, and motion design) so you can better understand what designers do and which apps they use.
In this online seminar we explain the appropriate classes and certificate programs so you’ll know the next steps to get started in each area of design.
Graphic Design Classes
Web Design Classes
UX Design Classes
UI & Visual Design Classes
Video Editing & Motion Design Classes
Your website is one of the first interactions that prospective customers have with your business. In this presentation, you’ll learn the best practices needed to set your website up for success. Convert more leads and drive your business forward.
To learn more beyond the seminar, see our Digital Marketing courses.
Web design has become one of the most crucial components of web development dynamics. If you’ve ever thought about getting into web design, it’s probably because you’ve got a creative streak or at least want to. Web design is made up of many exciting parts, including creating your first website and establishing the right layout to attract your audience. This involves thinking outside of the box, learning how to design, and finding the right elements to develop precisely what you’ve imagined.
If you’ve always wondered what web design is all about and what it takes, here’s a little crash course:
SVG stands for scalable vector graphics. It’s an XML-based coded file format that enables us to use vector graphics in webpages.
Design apps such as Sketch, Adobe XD, and Illustrator code SVG files differently. Some produce cleaner code than others. Regardless of what app codes the SVG file, it’s likely that the code can be further optimized, offering cleaner code and a smaller file (which downloads faster). Loading speed is important because website speed is one factor that affects your website’s Google ranking.
Optimizing SVG files can have other benefits. Once we had an SVG file that Illustrator didn’t like. The SVG was exported from Sketch, and we were trying to open it in Illustrator. We got an error message and it appeared wrong in Illustrator. After optimizing the SVG file, it imported without error and looked correct!
Variable fonts are a new kind of font that allows for amazing new levels of flexibility. With just one font file you can alter thickness, width, or just about any attribute you can think of... all while keeping the file-size small (important for websites).
Do not limit your thinking to the standard options that you’ve seen before (bold, italic, extended, condensed, etc.). Font designers can make variable fonts do all sorts of cool things!
The GreenSock Animation Platform (GSAP) is a popular set of JavaScript tools for building animations on the web. Anything you see in your web browser can be animated with GSAP. Whether you want to build elegant UI animations or dynamic effects in web apps, games, and interactive stories; GSAP is up to the task.
How does it work? You simply write short snippets of JavaScript code that define how elements should animate and what the timing should be. The benefit of animating with code is that one line of code can animate one thing just as easily as it can animate 1,000 things. With code-driven animation it’s surprisingly easy to randomize your animations and have them respond to user interaction.
GSAP delivers the flexibility and control that professionals need but it’s also easy for beginners to learn, especially with Noble Desktop’s HTML5 Web Animation with GreenSock class. You’ll be amazed at what you can do once you master just a few of the basics. Here are some of the main reasons to learn GSAP: