Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/CMvoyjI3oaQ/

With so many intuitive content management systems and pre-built design templates available, there are many people – designers and non-designers alike – who can create a high-quality design. There is a difference, however, between creating an aesthetically pleasing website and one that’s effective in its mission. This is why user experience (UX) design is so important.

UX design is a much more thorough and rigorous version of web design as most of us know it. It involves a lot of research, planning, and testing, all to ensure that the resulting site provides an optimally enhanced experience for the user.

Here are 30 common UX terms every designer should know, whether you’re brand new to design or you’re wanting to take your skills to the next level

1. A/B Testing

The process by which different versions of a website are tested simultaneously in order to detect differences in user behavior and preference between the two.

2. Affinity Diagramming

A form of data organization used to clearly outline groups of ideas and establish relationships among them. In UX, this is used for the purposes of planning site layout or content.

3. Analysis

This is the stage where team members research all the data collected up to a point. The data (or “analytics”) is then used to decide how best to approach a design for the user experience.

4. Beta Launch

The soft launch of a website that gives designers (and others) an opportunity to see and interact with it live, and test out kinks before the official launch.

5. Card Sorting

Card sorting refers to the physical or digital cards used to capture information about various parts of the website (e.g. content, breadcrumb link trails, navigation). It’s done in a highly organized manner to ease the subsequent planning of the site.

6. Color Theory

The idea that color has an effect on user behavior. Also known as color psychology.

7. Competitor Analysis

This is the study of competitors’ websites for the purposes of identifying strengths and weaknesses. This information is then used to help designers form a plan based on what already works for the known audience, but that won’t hinder the site from standing out from the competition.

8. Comparative Analysis

Similar to competitor analysis, this is when other websites are studied with the intent of spotting strengths and weaknesses. This assessment, however, focuses more on comparing granular website elements.

9. Content Audit

During the initial review and assessment stage, all current content is catalogued and assessed for continued viability.

10. Content Strategy

Any type of planning that defines how content is written and structured within a website. Affinity diagramming and card sorting are part of this process.

11. Contextual Enquiry

UX designers can engage with a user in real time as they move through a website. This helps them get a better sense for how users feel as they interact with certain elements of the site.

12. Diary Study

This is similar to a contextual enquiry (above), except that a diary study takes place over the long-term and without instantaneous feedback. Users instead record their experiences and share them all at a later date.

13. Experience Architecture

Experience architecture, or map, is a clearly defined path through which users on a website should navigate to reach the intended goal (the conversion).

14. Heuristic Review

As part of the review phase, a website is assessed for usability issues that will require addressing in the next iteration.

15. Interaction Design

A form of web design that focuses on creating a meaningful and valuable connection between the visitor and the website.

16. Iterative Design

Rather than have a clear start and stop, iterative design is more cyclical in nature so that the process of review, planning, prototyping, implementation, and QA repeat until the desired result is achieved.

17. Mood Board

A mood board helps UX designers define a specific style for a website through a collection of images, colors, text, and other branding elements. Unlike other data collection and design manipulation methods, this is more of a free-flowing collage rather than a step-by-step diagram.

18. Personas

This is a general marketing term, by nature, and one that seeks to establish a clear identity for the target audience. This is especially helpful in UX as it’s the user’s predicted behaviors and desires that affect how a website is to be designed in the first place.

19. Progressive Disclosure

This is a subset of interaction design, one which is meant to simplify the user experience as much as possible. So rather than present users with all the information at one time, they feed the minimum amount to them slowly over a series of steps of dynamic shifts.

20. Prototype

A prototype is an outline or sketch of a proposed web design. Low-level prototypes are usually just the bare bones of what a website may look like. High-level prototypes include more details, but fall short of a full design mockup.

21. Qualitative Research

During the information gathering phase, UX designers utilize a number of techniques. Through interviews, contextual enquiries, diary studies, and more, the goal is to better understand how users interact with a website; thus, focusing on the quality of the interactions.

22. Quantitative Research

Quantitative research is the other side of the research coin. Instead of focusing on the quality of a user’s experience with a website, solid data is what matters most. A/B testing and competitor analysis are two examples of this.

23. Scenario

A scenario is a story that a designer envisions for their users. It usually begins with a look into the hypothetical life of the target audience. The scenario then plays out how the website would factor into providing them with a solution to a problem they face in their everyday life.

24. Storyboard

A storyboard is a sketch. In UX, it can be the visual sketch of a scenario or it can be the rough sketches of how a designer envisions a website will look.

25. UI Elements

These are the parts of a website that enable users to control their experience. Buttons, navigation bars, slider arrows, and anything else that may be engaged with in order to move through the website is a user interface (UI) element.

26. Usability

This refers to the basic ease of interacting with and navigating through a website.

27. User-centered Design

This is the main goal of UX design: to create a website wholly centered around accommodating to the user’s experience.

28. User Journey

A user journey is the pathway that a UX designer establishes for site visitors, from the point of entry to conversion. This may also be referred to as UX flow.

29. User Research

User research is another term for all the analytical tasks that are completed in order to understand a brand’s audience better. Quantitative and qualitative research are the two segments of this.

30. User Test

The key difference between a user test and a contextual enquiry is that users are monitored live and in-person as they interact with a website.

31. UX Assets

UX assets are tools used to iteratively build a site’s design, including prototypes, wireframes, moodboards, mockups, etc.

32. Wireframe

Wireframes take place before prototyping and aim to establish the basic skeleton of a website’s layout.

Now that you have learned the most important UX terms, you should also learn about the most important marketing terms as well.

Original Source: http://feedproxy.google.com/~r/tympanus/~3/cLCa4EcsSsM/

Our Sponsor
Create Beautiful Websites Visually

The free & easy way to design WordPress websites. Create a stunning new website with Elementor Page Builder, zero coding needed.

Check it out

Toapi

A library for easily letting any website provide APIs. By Jiuli Gao.

Check it out

How should we resolve percentage margins and padding on grid and flex items?

The CSS Working Group is asking the community’s opinion on a longstanding issue in the CSS Grid Layout and Flexbox specification. Rachel Andrew has put together some examples that showcase the issue.

Read it

A Tinder Progressive Web App Performance Case Study

Addy Osmani writes about Tinder Online’s journey of becoming a Progressive Web App.

Read it

A Sliding Nightmare: Understanding the Range Input

Ana Tudor dives into browser inconsistencies of the range input slider.

Read it

How I made a talking emoji using regular emojis and JavaScript

Maurizio Carboni shows how to make an emoji talk.

Read it

Ether

Ether is a modular base for any design system.

Check it out

Free Font: Pikolo Block Alt

A stylish two-line display typeface designed by Ideabuk.

Get it

How To Make Changes to the DOM

As part of the series “Understanding the DOM” by DigitalOcean, Tania Rascia’s explains how to create, modify, and remove DOM elements in this article.

Read it

Productivity Tips And Tricks: The Community Shares Its Piece Of Advice

Rachel Andrew summarizes the most interesting productivity tips of the web community.

Read it

Cathedrale

A great Christmas Experiment made by David Ronai.

Check it out

Want to learn CSS Grid? Here’s my free full-length course. Merry Christmas!

Per Harald Borgen shares 13 interactive screencasts for learning CSS Grid.

Check it out

Colour management, part 2

Read about how color space conversion works in this article by the folks of Bjango.

Read it

Designing Better Design Documentation

Slava Shestopalov shows some ways for making documentation clearer, better structured, and more appealing.

Read it

Pointer Controlled Elastic Points

An elastic shape demo by Jack Rugile where you can click and drag to move the triangles.

Check it out

Behance: Year in Review 2017

It’s a special year for Behance: it marks Behance’s 10 year anniversary. Look back at a decade of creativity.

Check it out

Colorglyph

A fun pixel glyph collection game where you create and trade tiny pixel art.

Check it out

Start your open-source career

An article by Vincent Voyer on getting started with open source and finding your first project.

Read it

“We’ve centralized all of our data to a guy called Mark Zuckerberg” says Pirate Bay Founder

A very interesting interview with Pirate Bay founder Peter Sunde on the centralization of the internet.

Read it

NectarJS: compiling JavaScript into Native Binaries for Every Platform

In case you missed it: Adrien Thierry shares the fascinating story of the exciting NectarJS project.

Read it

From Our Blog
CSS Glitch Effect

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

Check it out

Collective #378 was written by Pedro Botelho and published on Codrops.

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/qy4vMDoZHqk/review-adobe-creative-cloud-all-in-one-for-dummies

Hey, it’s OK to be a dummy sometimes; especially when it comes to the complexities and nuances of the increasingly vast Adobe Creative Cloud suite. So as a creative (or indeed anyone whose career or hobbyist interests rely on making things with image and text that look clear and pretty) what better gift than the power of mastering these essential tools?

What’s great about this particular well-known brand of reference guides is that it’s written by experts, rather than writers speaking to experts (so in this case, designers). As such, the tips and guidance are spelled out in a way that’s not only comprehensible to those in the design industry, but in a way that is tailored to those looking to work in it. 

The authors Jennifer and Christopher Smith certainly have pedigree: Jennifer is a UX consultant, designer, educator, and author of 12 or so books on digital imaging and web publishing; while Christopher is president of the American Graphics Institute and author of numerous books on web, interactive, and print publishing technology, including many official Adobe training guides.

Seven mini-books

Adobe Creative Cloud All-in-One For Dummies (Second Edition) is divided into seven mini-books across a hefty 800 pages, and covers InDesign CC, Illustrator CC, Photoshop CC, Acrobat Pro, Adobe Bridge, and Adobe XD. While there’s no doubt this book is aimed more at those at the beginning of their creative software journey, it’s undoubtedly helpful for those already proficient in their tools. 

There's advice on using advanced features, and of course, helping a Photoshop whizz incorporate other tools and work across different programmes to make their lives easier and their work sparkle. 

What’s potentially off-putting for a book about how to design well is that it certainly isn’t the most beautiful, or indeed well-designed book we’ve ever seen: the icons are ugly; and the typographic decisions leave a lot to be desired. 

It’s also slightly misleading to bill the title as as 'all-in-one', when it doesn’t actually cover programmes like Lightroom, Premiere Pro and After Effects. But in fairness, it’s probably wise to master the less complex programmes before tackling moving image and animation software. 

Adobe Creative Cloud All-in-One For Dummies is certainly aimed more at the beginner end of the spectrum, although there’s definitely a few gems in here for the more advanced. However, it might take a bit of slightly frustrating rifling through this hefty tome to get there.

Related articles:

Review: Dieter Rams – Ten Principles for Good Design 26 books every graphic designer should read5 must-read books for design students

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/lMYSZ-eA6wE/

Chances are you’ve heard of Wix – one of the top website builders out there. As a web professional, you may think that it’s solely a DIY tool aimed at beginners. While the Wix interface is intuitive to use it’s also incredibly powerful.

Wix offers an extensive feature list including professional web tools and design features and advanced code capabilities. You can use it to build a site for yourself or for your clients that is both powerful and mobile optimized.

Create Without Limits

Wix now offers advanced code capabilities, so you can create your own content-rich websites and web applications. If you’re comfortable with CSS, JavaScript and databases, you’ll have a blast creating anything you want with Wix Code. Now here’s the best part, Wix Code works directly with the Wix editor so you can code using the stunning visual components of the Wix Editor. Plus, it’s all SEO compatible, so you can make sure the website you build can get found online.

Professional Features from Wix

Wix has a huge app market that offers tons of professional tools to help you manage and grow your business online. Want an online store? Check. Start accept bookings online? Done. Sell your artwork or videos online? You got it. By this point, Wix has become so good at offering every business niche, you’d be hard-pressed to find something they don’t have.

Professional features include:

Real-time feedback and design sharing

eCommerce

Online booking system

Retina-ready image galleries

SEO (Search Engine Optimization) tools

Designer-made templates for any business need

Invoices

Design With Peak Efficiency

Wix takes care of the hard stuff, so you can focus on what really matter – designing your stunning website. Wix offers hundreds of design features that you can use to create something beautiful without stressing yourself out. Their intuitive drag and drop UI means that you can position elements where you want without having to tweak code. It’ll save you time and unnecessary headaches.

They’ve even simplified complicated features like parallax scrolling, video backgrounds and animation. Each one can be easily added to your design. Plus, you’ll find hundreds of installed fonts and the ability to upload your own.

Everything works with minimal effort on your part. Layouts are also a piece of cake – including multi-column. You don’t need to resort to hacks to get the exact look you’re after. The Wix UI means that you can focus your attention right where it needs to be: On building an amazing website. There’s no need to pull up multiple applications or browser windows. You’ll have access to everything you need in one place.

Tools Designed With You in Mind

Putting powerful features in the hands of designers is what Wix does best. They want you to stay ahead of the pack and on top of the latest trends. Always in Style With their collection of gorgeous templates, you’ll always be right on the cutting edge when it comes to design. And with new templates constantly being added, you’ll stay that way well into the future. Taking advantage of the latest design is a matter of a few clicks.

Feedback in Real-Time When you’re working on a project, you’ll often need to bring clients and colleagues into the loop. Wix lets you share your work with a single click and collect feedback in real-time. You’ll speed up the revision process and avoid unproductive email chains. Design With AI That Understands You Using Wix Artificial Design Intelligence (ADI) brings a new level of efficiency to site creation.

The first AI that will design a website for you, the system learns your needs and builds a site to your specifications. Resources and Services You Need There’s no need to search the web for top resources – Wix has you covered. Their image collection contains thousands of visuals from both Wix and Shutterstock that you can use on your site. Plus, there are built-in tools to help you with critical tasks like invoicing, email marketing and SEO.

Build It Your Way With Wix

If you’re a designer looking for a fast, stable and secure platform – look no further than Wix. They can provide you with the tools you need to build a great site with full control over the entire process. Start building with Wix for free and put the most technologically advanced website builder to work for you.

This article has been sponsored by Syndicate Ads.

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/2ivqzei80og/

So many new projects are released every year and it’s tough to keep track. This is great for developers who benefit from the open source community. But it makes searching a lot more difficult.

I’ve scoured GitHub, organizing the best projects I could find that were released in 2017. These are my personal favorites and they’re likely to be around for quite a while.

Note that these are projects that were originally created during 2017. They each show tons of value and potential for growth. There may be other existing projects that grew a lot over 2017, but I’m hoping to focus on newer resources that have been gaining traction.

1. Vivify

The Vivify CSS library was first published to GitHub in late August 2017. It’s been updated a few times but the core goal of the library is pretty clear: awesome CSS effects.

Have a look at the current homepage and see what you think. It works much like the Animate.css library – except the features are somewhat limited. Yet, they also feel easier to customize.

There are a bunch of custom animations in here that I’ve never seen anywhere else. Things like paper folding animations, rolling out with fades and fast dives/swoops from all directions.

One of the best new libraries to use for modern CSS3 animations.

2. jQuery Steps

With the right plugins you can extend your forms with a bunch of handy UX features. Some of these may be aesthetic-only, while others can radically improve your form’s usability.

The jQuery Steps plugin is one such example. It was first released on April 19th and perhaps the coolest progress step plugin out there.

It’s super lightweight and runs with just a few lines of JS code (plus a CSS stylesheet).

Take a look at their GitHub repo for a full setup guide. It’s a lot easier than you might think and the final result looks fantastic.

Plus, the plugin comes with several options to customize the progress bar’s design.

3. Petal CSS

There’s a heavy debate on whether frontend frameworks are must-haves in the current web space. You certainly have a lot to pick from and they all vary so much. But one of my newest favorites is Petal CSS.

No doubt one of the better frameworks released in 2017, I’ve recommended this many times over the past year. I think it’s a powerful choice for minimalist designers.

It doesn’t force any certain type of interface and it gives you so much control over which features you want to use.

This can’t compete with the likes of Bootstrap…but thankfully it wasn’t designed to! For a small minimalist framework, Petal is a real treat.

4. Flex UI

The Flex UI Kit is another CSS framework released in 2017. This one’s a bit newer so it doesn’t have as many updates. But it’s still usable in real-world projects.

Flex UI stands out because it runs the entire framework on the flexbox property. This means that all of the responsive codes, layout grids and typography is structured using flexbox. No more floated elements and clearfix hacks with this framework.

I do find this a little more generic than the Petal framework, but it’s also a reliable choice. Have a look at the demo page for sample UI elements.

5. Sticky Sidebar

You can add sticky sidebars onto any site to increase ad views, keep featured stories while scrolling or even increase email signups through your opt-in form.

In May 2017, developer Ahmed Bouhuolia released this Sticky Sidebar plugin. It runs on pure JavaScript and uses custom functions to auto-calculate where the last item should appear, based on the viewer’s browser width.

The demo page has plenty of examples, along with guides for getting started. Anyone who’s into vanilla JS should give this a shot.

6. rFramework

Looking for another awesome startup framework for the web? rFramework might be worth your time since it’s fully semantic and plays nice with other libraries such as Angular.

To get started all you need are the two CSS & JS files – both of which you can pull from the GitHub repo. All the styles are pretty basic which makes this a great starting point for building websites without reworking your own code base.

Also take a look at their live page showcasing all of the core features that rFramework has to offer.

It may not seem like much now, but this has the potential to grow into a solid minimalist framework in the coming years.

7. NoobScroll

In mid-April 2017 NoobScroll was released. It’s a scrolling library in JavaScript that lets you create some pretty wacky effects with user scroll behaviors.

Have a look over the main page for some live demos and documentation. With this library you can disable certain scrollbars, create smooth scroll animations or even add a custom scroll bar into any element.

This is perfect for creating long flyout navigation on mobile screens. With this approach, you can have lengthy dropdown menus without having them grow too large.

8. jQuery Gantt

Tech enthusiasts and data scientists likely know about gantt charts – although they’re less common to the general public. This is typically a graphical representation of scheduling and it’s not something you usually find on the web.

jQuery Gantt is the first plugin of its kind, released on April 24, 2017. This has so many uses for booking, managing teams or even with SaaS apps that rely heavily on scheduling (ex: social media management tools).

It works in all modern browsers with legacy support for IE 11. You can learn more on their GitHub page, which also has setup docs for getting started.

9. Paroller.js

Building your own parallax site is easier now than ever before. And thanks to plugins like Paroller.js, you can do it in record time.

This free jQuery plugin lets you add custom parallax scrolling features onto any page element. You can target specific background photos, change the scroll speed, and even alter the direction between horizontal and vertical.

It’s a pretty solid plugin that still gets frequent updates. Have a look at their GitHub repo for more details.

10. Password Strength Meter

Last, but certainly not least on my list is this password strength plugin, created March 11, 2017. It’s built on jQuery and gets frequent updates for new features & bug fixes.

With this plugin you can change the difficulty rating for password complexity. Plus, you can define certain parameters like the total number of required uppercase letters or special characters.

If you’re interested in adding this to your own site, the GitHub repo is a nice place to start. The main demo page also has some cool examples you can test out.

But if you’re looking for more new open source projects, try searching GitHub to see what you find. The best resources often find a way of accruing stars, forks and social shares pretty fast.