New Course: Responsive Design in Adobe XD
When you're showing your client a web design mockup, they're going to want to see how it looks on different devices. Learn how to create a fully responsive mockup in our new course, Responsive Design in Adobe XD.Screenshot from Responsive Design in Adobe XDWhat You’ll LearnXD is Adobe’s contribution to the world of design mockup software. In Adobe XD, as with any concept design tool, it’s important to illustrate how your layouts are going to behave responsively.In this course, Kezz Bracey will show you how to best use XD’s toolsets to efficiently create responsive design mockups.Screenshot from Responsive Design in Adobe XDYou'll get a quick refresher on responsive design and then dive into a look at all of Adobe XD's best features.Then you'll go through the full process of creating different layouts for different breakpoints.Watch the Introduction Take the CourseYou can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. Plus you now get unlimited downloads from the huge Envato Elements library of 850,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
5 Easy Tips for Communicating UX Findings to Teams
An important but undervalued skill in a designer’s toolbox is communicating UX research findings to collaborators and stakeholders. In any effective presentation, the designer must consider how to best present findings and optimize their impact on the end product. Let’s look at 5 tips to help you in your next presentation!
1. Consider Your Audience First of all, consider who will be attending the presentation–is the design team, the engineering partners, or clients? Depending on their level of subject matter expertise and closeness/authority over the teams working on the product directly, you must strategize how to get relevant information to the right person. The next step is strategizing the structure of your presentation.
2. Reiterate GoalsIn your presentation’s introduction, reiterate the goals of the study/research plan. What was the initial objective? Why is this data something that needed to be collected? Highlighting key points in a summary at the beginning of the presentation serves as an overview to the rest of the content.
3. Prioritize Insights If you have a research background, it may seem clear to you how to interpret large swathes of data, but rarely will the team or stakeholders have the background (or patience) to look at chart after chart. Therefore, as the presenter, your role is to show the information and focus on why it matters. This means not just...
Exploring the Adobe XD October 2018 Update
This year’s Adobe Max conference announced, as usual, plenty of feature updates to Adobe products. Among those updates were some very interesting features which came to Adobe XD in the October 2018 update. Let’s take a look at four of the biggest updates which came to XD.We’ll be covering:Add-onsLinked symbolsAuto-animateVoice prototypingAdobe XD Latest Updates
1. Add-onsA highly requested feature and one which has notably been missing from Adobe XD until now is the ability to use third-party plugins and integrations. Thanks to the new Add-ons feature, this is now all possible.New Adobe XD add-ons welcome screenWhen you open XD you’ll now see a new Add-ons menu option, which takes you to a screen like the one above. This gives you access to:PluginsUI KitsIntegrationsBrowse and install whichever add-ons you need with just a few clicks of the mouse.2. Linked SymbolsIf you’re constantly using the same symbols in your XD documents you’re going to love this feature. Linked symbols allows you to share symbols between documents (and users) and receive notifications when changes are made to your master symbols.Now when you paste a symbol from one document to another, it will show a green outline with a link icon in the top left corner. The symbol in the Assets library will also show a link icon, showing the current status of the master version. If the master version has...
Enhance the Way a Web Page Loads With CSS Animations
In a previous tutorial we created a full-screen responsive page with flexbox. Today, we’ll make this page more attractive by adding a few CSS animations to it.Here's what we're going to build:
How to Build a Full-Screen Responsive Page With FlexboxIn this tutorial, we’ll learn how to build a full-screen responsive page with flexbox. Our page will include a full-screen background image, vertically...
20 Nov 2018
1. The HTMLIn order to add the desired animations, we’ll slightly update the initial page markup. In the previous tutorial, the markup of our main element looked like this:<main class="page-main"> <div> <h1>...</h1> <p>...</p> <p>...</p> </div>
</main>For the purposes of this tutorial, we’ll add some extra wrappers, changing it to this:<main class="page-main"> <div> <div class="text-wrapper"> <h1>...</h1> </div> <div class="text-wrapper p-wrapper"> <p>...</p> </div> <div class="text-wrapper p-wrapper"> <p>...</p> </div> </div>
</main>Below is the overall page markup after this modification:
<div class="wrapper"> <header class="page-header"> <nav> <h2>...</h2> <ul...
Figma General and Miscellaneous Tips
To wrap up our series of Figma tips and tricks, here are three quick tips which fall into the “miscellaneous” category.Watch Tips
1. Quickly Switch to Outline ModeSwitching to outline mode every now and then will give you a better idea of what’s going on in your design. It can also help where precision is needed. Use either (CMD or CTRL) + Y, or (CMD or CTRL) + SHIFT + 3 depending on your platform.
2. Access the Shortcuts CheatsheetThroughout this series I’ve mentioned different shortcuts depending on what your platform is. To clear up what you should be using, hit the question mark at the bottom of the screen and choose Shortcuts for a pop-up of shortcuts for your system.
3. Customize Your “Nudge” AmountNudging is something you’ll use a lot when working with Figma, and we’ve already talked about using the arrows keys, or the arrow keys + SHIFT to do so, for small and big nudges respectively. You can also customize how big your nudges are by going to Menu > Preferences > Nudge Amount. There you can specify the size of both small and big nudges.Figma Learning ResourcesThat brings us to the end of our series on Figma tips and tricks! Thanks for watching and reading along–don’t forget we’ll be publishing plenty more Figma content in the future, and you can further your Figma learning right now with our series of courses:
Introduction to Figma
How to Make a Great (Coming Soon) Website Product Launch Page
Launching a new product is an exciting business venture, one that could mean a world of difference for your business. However, as you’re prepping for the launch, it’s important to think about how you’re going to promote your product as well as make it possible for people to buy it. Here are two options:
Create a coming soon page on your existing website for your new product.
Create a dedicated website coming soon landing page (or pre-launch landing page) just for the product.
A benefit of an HTML product launch landing page is that it’s easier to set up than a Content Management System or an e-commerce platform. A dedicated coming soon landing page also gives you the advantage of your landing page being focused on one singular goal and that's to promote the product and encourage people to buy.
In today’s tutorial, we’ll walk you through the steps of setting up a product launch landing page based on a template and share tips on writing landing page copy as well as product promotion. You can find some great landing page templates that'll work well as product launch landing pages (or just about any kind of landing page, really) at Envato Elements or ThemeForest.
How to Set Up Your Product Launch Landing Page TemplateOnce you've downloaded your template, you're ready to begin setting up your website coming soon or product launch landing page.
The process of setting up...
Best Practices for Transforming User Feedback to Insights
Designers and UX researchers realize the value of getting customer feedback, but that’s just one step in the overall process. Here are four tips for not only collecting user feedback, but using it to drive lasting change in the end product.
1. Get to Know Your CustomerOnce you have your first customer profile written down, go out and meet these people or businesses. Talk with them and observe them in their natural environment. Decide what you want to know and why. It’s easy to collect data, but it’s less easy to make sense of it if you don’t have some foundation for what you’re trying to do and why.
2. Align With Stakeholders on HypothesisIt’s ok to start with assumptions at first. After all, in an imperfect world there is no average customer, no one who has all the data or resources. You must make some trade offs and go with your gut as to how to solve the customer problem while being open to pivoting, iterating, and restarting the process if you are proved wrong.Have some initial meetings with stakeholders and partnering teams to give them a heads up on why this area could use improvement, as well as its resulting benefit for customers.
3. Collect DataCollect a variety of qualitative and quantitative data to avoid the potential pitfall of bias. Usually technology-savvy collaborators depend heavily on numbers (quantitative data). But there is also value in figuring out...
You'll learn how to create your own Leaflet map, and then you'll add markers, tooltips, shapes, click events, and more.Watch the Introduction Take the CourseYou can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. Plus you now get unlimited downloads from the huge Envato Elements library of 830,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
20+ Great Product Landing Page Templates (2018 Design Examples)
When it comes to promoting your product online, a well-designed product landing page can make all the difference for a successful launch. Given the fact that landing pages incorporate a minimal design that eliminates unnecessary distractions, it’s easy to understand how visitors have higher chances of converting into customers and clients.As such, it’s essential that your product has a landing page of its own where you can direct all the traffic from marketing campaigns. Nowadays, creating a landing page isn't difficult because there are dozens of attractive product landing page templates.In this post, we’re sharing the best product landing pages that are available on Envato Elements and ThemeForest.Envato Elements: Design Marketplace With Beautiful Product Landing Page DesignsOne of the places where you can find the best product landing pages is Envato Elements. Envato Elements offers thousands of design assets, including great landing pages for all niches. You can download an unlimited number of various templates, fonts, icons, stock photos, and more for a low monthly fee.
You can find dozens of professionally-designed product landing page templates on Envato Elements along with many other creative assets.You can then use the assets you download in an unlimited number of projects. As such, Envato Elements is a great choice for creatives as well as business owners who need...
Using Audio to Enhance Your Web Sites and Web Apps
What’s the proper role of audio in web design? It seems that, for as long as we’ve been building websites, designers have looked for a way
to use sound effectively. Sometimes we’ve hit the mark (audio
interactions within games) while other attempts are a bit more
forgettable (auto-play background music).
As the web has matured, we have continued to find better uses for
sound. And, as long as we make users aware of our intentions ahead of
time, it can be a welcome edition to the overall experience.
Today, we’re going to explore some ways audio can enhance modern web applications. We’ll also provide you with some incredible examples
from the new sound library at Envato Elements. Your Elements subscription provides you with access to 8,300+ audio tracks and
76,000+ sound effects. You’ll have an amazing variety of sounds
available for all of your projects.76,000+ sound effects, ready to download and use! 8,680 royalty free audio tracks
1. Reward Users
Many popular websites have embraced gamification as a way to keep
users coming back. Completing various tasks such as reaching a
participation threshold are rewarded with points, badges or even product discounts. This is where the right sound effect can add to that sense
of accomplishment. Look for something short and sweet to bring a smile
to your loyal users.
The Game Reward sound effect clocks in...
A Guide to Creating Accessible Animations
Animated interfaces can cause headaches, nausea, dizziness, and other health problems for many people. The most affected groups are people with vestibular disorders, epilepsy, and migraine sensitivities. However, anyone can experience similar issues if subjected to excessive motion on the screen for a longer period of time.
In this guide, I’ll share a couple of best practices to address the needs of users who literally get sick of your animations.
International Day of Persons with Disabilities
The publication date of this article is no accident: December 3rd is the United Nations’ International Day of Persons with Disabilities. Today we’d like to raise awareness and demonstrate what we can do with inclusive web design.Side Effects of AnimationsThe vestibular system includes parts of the inner ear and brain, responsible for sensory information processing and spatial orientation. People with vestibular disorders experience symptoms like motion sickness, balance problems, chronic dizziness, headaches, and nausea when looking at large-scale motion on the screen. But how common are these problems? According to Vestibular.org, very. Researchers estimate that:“..as many as 35 percent of adults aged 40 years or older in the United States (approximately 69 million Americans) have experienced some form of vestibular dysfunction” – Vestibular.org
Flickering and flashing...
Accessible SVG: Methods for Adding Alternative Content
Scalable Vector Graphics (SVG) are XML-based vector images. They’ve been around for a long time now but have seen a real resurgence in use over the past couple of years. There are plenty of reasons to use SVGs today including:
Increased native browser support of SVGs means better consistency and higher fidelity of images.
The relative “lightness” of SVG code in a world where bandwidth and performance matter more than ever.
Another big advantage of using SVGs over standard images is that they can easily be made accessible. Since markup can be added to the SVGs directly, they give individuals who use assistive technologies (ATs), such as screen readers, more information about the images within the image itself.International Day of Persons with Disabilities
The publication date of this article is no accident: December 3rd is the United Nations’ International Day of Persons with Disabilities. Today we’d like to raise awareness and demonstrate what we can do with inclusive web design.Rules of Alternative ContentWhile there are many things to consider when making SVGs fully accessible, we’re going to focus on the ways you can add alternative content to an SVG. I expect you’re already familiar with the alt="" tag on images–alternative content is what’s used when an image isn’t, or can’t be ...