ux – Naro

Tag: ux

June 27, 2019By Amine G

The 5 Skills You’ll Need to Land a Web Dev Job

Here at TechLaunch, we take a no-nonsense approach to web dev. We don’t waste time with excessive theorizing, learning about “legacy” technologies, or spelling out the “elopment” in web development. Our students come to us to help them get into new careers, so we focus on the only things that truly matter: the skills that employers are actually looking for in the 2018 job market, like for example how TikTok algorithm works.

We work with dozens of small, medium, and large-scale employers here in Miami, and have placed students in web dev positions throughout the city. Through extensive conversations and in-depth hiring processes, we have determined that there are five major skills that employers are looking for in junior web developers.

So without further ado, here are the five skills you’ll need to land a web dev job in 2018:

1. DESIGN SKILLS

Before you even start coding a website, you’ll need to have the overall design in mind. While design skills generally fall in the purview of web designers [LINK] (rather than developers), developers do need to understand some basic (and some not-so-basic) design principles in order to be good at their jobs. You can visit here to see the necessary design skills required to be a good hire.

Responsive & Mobile-First Design

All web developers who want to be employed in 2018 must know how to build mobile-first websites that are responsive to all screen shapes and sizes. If you build a website that looks great on your giant HD desktop screen, but looks like a pile of garbage on the CEO’s new iPhone X, your employer isn’t going to be happy with your work.

Design Paradigms

Design paradigms like Google’s “material design” and Apple’s “flat design” aren’t just there to make your websites look pretty. Aside from making websites feel more familiar, modern, and integrated into the cutting-edge internet trends that viewers are accustomed to, design paradigms also help make websites more user-friendly and functional.

Google’s Material Design “Floating Action Buttons” are a great example of functional design. Chances are, you’ve seen these little floating buttons before; in your gmail account, in your calendar, or on a million other websites you’ve used. When you see it, you automatically know where to click. You don’t have to think about it, it’s second nature.

Such is the power of the design paradigm.

UX, UI & Usability

The three u’s — user experience, user interface, and usability — are buzzwords thrown around a lot in the tech community… and for good reason. Ease of use and customer satisfaction are pretty much the primary goals of the entire web development process. UX/UI/usability skills are important aspects of web development training that real-world employers are actively looking for.

Progressive Web Apps

The progressive web app is a relatively new design principle, introduced a few years ago by some innovative folks over at the Googleplex.

The idea was to combine the best parts of HTML-based websites and native mobile apps, while avoiding the pitfalls of both of them. These web-based mobile apps (or “progressive web apps”) are basically just websites that are designed to look and feel like mobile apps when accessed through a mobile device.

Progressive web apps offer “native-like” and “offline-first” experience.

Progressive web apps have some major advantages over traditional mobile apps. For one thing, they are much easier (and cheaper) to design and develop, since you only need to make one version for all devices. Since they run in the browser, they are truly cross-platform. And luckily for you, as a web developer, they’re built with simple HTML, CSS, and JavaScript… just like your average website. So you don’t need to learn an entirely new set of skills in order to build fully functional mobile apps.

Progressive web apps can download assets into the smartphone’s cache so that your “app” can run offline. They can go “full screen” like a native mobile app, by hiding the browser. They can allow the viewer to add the website to their home-screen with a single click (with a custom app-icon, no less!). Progressive web apps can access some parts of the smartphone’s hardware, send push notifications even while the browser is closed, run much faster and smoother than traditional mobile websites, and more. Google has already developed a framework for you to create progressive web apps. Who knows what the future may hold?

Many big internet companies, including Twitter, Forbes, and eBay, have switched over to progressive web app frameworks for their mobile sites. Employers in today’s market are making very generous offers to developers who can create progressive web apps for their companies.

Some of the companies around the world that have switched to progressive web apps for their mobile sites.

2. FRONT-END WEB DEV SKILLS

HTML/CSS

HTML is the fundamental building block of the internet. It creates all the pieces of your websites.

CSS makes the whole thing look pretty.

Without these two basic skills, you are not a web developer.

JS, jQuery, React.js

For web developers, JavaScript is just as fundamental as HTML and CSS. While HTML and CSS take care of the structure and design of your websites, JavaScript takes care of its behavior. It allows users to interact with your website, and for your website to interact with users.

In order to just barely qualify as a web developer, you need to know some JavaScript and jQuery. In particular, knowing how to handle ajax requests, attach event listeners, and manipulate the DOM with JavaScript is a must. Good knowledge of frameworks like React can unlock access to higher end opportunities.

GitHub

When traditional employees need to work together as a team, they do it in an office. When web developers need to work together as a team, they do it on GitHub.

GitHub, and other “version control” platforms, allow you to collaboratively edit code with your coworkers (and others), while still maintaining the integrity of previous versions through time. So if the boss hires his fifteen-year-old nephew to “modernize” the code, you don’t lose seven months of work. You can always revert to an earlier stable version.

GitHub also allows you to view all the changes that were made in each version, so it makes it much easier to find new bugs in the code.

Google Chrome’s Developer Tools

Ever wonder why so many web developers prefer Google Chrome over other browsers? Well, yes, it is generally one of the best browsers available at the moment, but Google Chrome also has some amazing tools for developers.

Google chrome’s developer tools can help you play with the code of live websites, and watch the changes happen in real time. They allow you to view the JavaScript console in your browser, track how fast assets download from the server, and much, much more.

Many employers are savvy enough to specifically look for developers who know how to use Google Chrome’s developer tools. In particular, being able to profile an application in order to optimize its performance is a valued skill.

WordPress

While WordPress certainly has its downsides, it’s also an important skill that many employers are looking for in junior web devs. WordPress powers something like 28% of the internet. That means that a large percentage of employers need to hire web developers who can develop and maintain their WordPress-based infrastructure.

Aside from just maintaining previously-built websites, WordPress can also be an ideal solution for companies that want a CMS they can work with and maintain by themselves. You can check out the website of Collectiveray to learn more about WordPress.

3. BACK-END BASICS

While some web developers start out as back-end experts, front-end web development tends to be a more intuitive entry point for many people. But even if you want to get a job as a front-end specialist, you still need to have at least a basic understanding of the concepts of back-end web development. At the very least, you’ll be working with back-end developers, and you’ll need to be able to understand what they’re saying in order to work together effectively. Or, you may be put in positions where you actually need to do some of the back end work yourself!

Servers

Most entry-level web development jobs won’t require you to build your own servers. But you’ll at least need to understand how they work, and how your website interacts with them.

APIs

You’ll need to understand how the front-end of your website can interact with back-end infrastructure, through Application Programming Interfaces (APIs).

SQL & Databases

Many websites and web apps use databases to store information. You’ll need to have a basic understanding of how they work, and how to interact with them.

HTTPS & Cybersecurity

Cybersecurity became a hot topic at the end of 2017 due to high-profile hacks that caused billions of dollars in damages and exposed 145 million Americans to the joys of identity theft. Employers are more concerned about cybersecurity than ever.and this is where the email security saas steps into the scene. If you can display a basic understanding of cybersecurity, you’ve got a leg up on your competition.

4. DIGITAL MARKETING INSIGHT

With ZTNA solution, security of the business is maintained. If there’s one thing that’s more important to employers than security, it’s profits. While digital marketing skills are mainly needed by, well, digital marketers, employers look highly upon web developers who can show at least some insight into the world of digital marketing. A web developer who understands digital marketing can develop websites that get real, tangible results.

Search Engine Optimization (SEO)

One of the primary reasons companies build websites is to bring in new customers. The best way to bring in new customers is to rank highly in search engines for relevant keywords. If your company sells lemur food in Miami, you’ll want to show up on the first page of Google whenever somebody searches “lemur food Miami”. If you’re not on the first page, it’s very unlikely that your target customers will find your website.

Search engine optimization is very important, but it’s a skill that most people don’t have. Companies often resort to hiring specialized SEO teams to optimize their websites. Web developers who have some SEO skills can offer major advantages to companies that hire them. Building a website with SEO in mind is much more efficient than building a poorly optimized website and then hiring a team to fix it.

Conversion-Focused Design

While making pretty-looking, well-functioning websites is nice and dandy, employers tend to care more about their bottom line. Web developers who understand conversion-focused design are much better at building high-converting websites. Higher conversion rates = more profits = better bottom line = happy employers.

5. “SOFT SKILLS”

skills you'll need to land a web dev job in 2018

Many aspiring web developers spend all day staring at computer screens, trying to work out the bugs in their code.The truth is, though, that many would be better off taking some time to work on their interpersonal skills. Visit This Link to know more about computer skills. Employers aren’t looking for anti-social nerds to do their coding. They’re looking for well-rounded employees. Employers want devs who can build their websites, while at the same time fitting into the company culture, handling clients’ concerns, collaborating with other developers, and communicating effectively with non-technical executives and managers.

“Soft skills,” like communication and social skills, aren’t just important for networking, wooing employers, and acing interviews. They’re important on-the-job as well. The better you are at communicating with the people around you, the better you’ll be able to get things done.

Be a Well-Rounded Developer.

Many people getting into web development make the mistake of putting all of their energy into improving one or more of these skill-sets, while neglecting others. We often see people focusing on coding, without developing their soft skills. The truth is, the people who do the best — the ones who actually get high-paying jobs and fulfilling careers — make sure to develop all five of these skill-sets, becoming well-rounded web developers.

You can learn most of these skills on your own, through Google, YouTube, and online courses. Of course, it will take you a really long time to do it that way (if you succeed at all). Here at TechLaunch, we focus on teaching you all five of these skills, at a relaxed pace, over the course of nine months. We can help you become a well-rounded developer, and start a new career in under a year! To explore our course offerings, check out techlaunch.io.

Blog

December 10, 2018By Amine G

The Ultimate Guide To Proper Use of Animation in UX

Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerning animation of interfaces would be clearly and practically described. Well, in this article I won’t write anything new, I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.

Duration and speed of the animation

When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.

Use proper duration in your animation. Don’t make it too fast and don’t leave the user enough time to yawn

Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user.

Duration of the animation you should better have in your interfaces

On the mobile devices, Material Design Guidelines also suggests limiting the duration of animation to 200–300 ms. As for tablets, the duration should be longer by 30% — around 400–450 ms. The reason is simple: the size of the screen is bigger so objects overcome the longer path when they change position. On wearables, the duration should be accordingly 30% shorter — around 150–200 ms, because on a smaller screen the distance to travel is shorter.

Size of mobile devices affects the duration of the animation

Web animation is treated in a different way. Since we are accustomed to an almost instant opening of web-pages in a browser, we expect to transit between different states quickly as well. So, the duration of web transitions should last about 2 times shorter than on mobile devices — between 150–200 ms. In other cases, the user will inevitably think that the computer freezes or has troubles with the internet connection.

But. Forget about these rules if you are creating a decorative animation on your website or trying to attract the user’s attention to certain elements. In these cases, animation can be longer.

Large screen of computer = Slow animation? No way!

You need to remember that regardless of the platform the duration of the animation should depend not only on the traveled distance but also on the size of the object. Smaller elements or animation with small changes should move faster. Accordingly, the animation with large and complex elements looks better when it lasts a little longer.

Among the moving objects of the same size, the first one to stop is the object that has passed the shortest distance.

Small objects in comparison with large objects are moving slower since they make bigger offsets.

Duration of the animation differs depending on the size of the object and the traveled distance

When objects collide, the energy of collision must be evenly distributed between them according to physical laws. So, it’s better to exclude the bounce effect. Use it only in exceptional cases when it makes sense.

Avoid using the bouncing effect since it distracts attention

The movement of the objects should be clear and sharp so do not use motion blur (yes, After Effects users, not this time). It is difficult to reproduce the effect even on modern mobile devices and it’s not used in interface animation at all.

Do not use the blur effect in your animation

List items (news cards, email lists, etc) should have a very short delay between its appearance. Each occurrence of the new element should last from 20 to 25 ms. The slower emergence of elements may annoy the user.

Animation for list items should last 20–25 ms

Easing

Easing helps to make the movement of the object more natural. It’s one of the essential principles of the animation, which is thoroughly described in the book The Illusion of Life: Disney Animation, written by two key Disney animators — Ollie Johnston and Frank Thomas.

For the animation not to look mechanical and artificial, the object should move with some acceleration or deceleration — just like all live objects in the physical world.

Animation with easing looks more natural compared to the linear one

Linear motion

Objects that are not affected by any physical force move linearly, in other words with constant speed. And just because of this fact they look very unnatural and artificial for the human eye.

All applications for animation use the animation curves. I will try to explain how to read them and what they mean. The curve shows how the position of the object (y axis) changes during the same time intervals (x axis). In the current case, the movement is linear, so the object travels the same distance at the same time.

Linear motion can, for example, be used only when the object changes its color or transparency. Generally speaking, we can use it for the states when an object does not change its position.

Ease-in or acceleration curve

We can see on the curve that at the beginning the position of the object changes slowly and the speed increases gradually. That means the object is moving with a certain acceleration.

This curve should be used when the objects fly out of the screen at full speed. Those can be system notifications or just cards of the interface. But keep in mind that such type of curve should only be used when the objects leave the screen forever and we cannot recall or return them.

Acceleration curve for throwing the card out of the screen

The animation curve helps to express the right mood. At the example below, we can see that the duration of movement and the distance for all objects is the same, but even small changes in the curve give you the possibility to influence the mood of animation.

And of course, by changing the curves, you can move the object as similar to the real world as possible.

Same duration and distance but different moods

Ease-out or deceleration curve

It’s opposite to ease-in curve, so the object quickly covers long distance then slowly reduces the speed till it finally stops.

This type of curve should be used when the element emerges on the screen — it flies up on the screen at full speed, gradually slows down until it completely stops. This can also be applied to different cards or objects that appear from the outside of the screen.

Ease-in-out or standard curve

This curve makes the objects gain speed at the beginning and then slowly drop it back to zero. That type of movement is the most frequently used in interface animation. Whenever you doubt what type of motion to use in your animation, use standard curve.

According to Material Design Guidelines, it is better to use an asymmetric curve to make the movement look more natural and realistic. The end of the curve must be more emphasized than its beginning, so that the duration of acceleration is shorter than that of slowing down. In this case, the user will pay more attention to the final movement of the element and thus to its new state.

See the difference between symmetric and asymmetric standard curve

Ease-in-out is used when the objects move from one part of the screen to another. In such case, animation avoids the eye-catching and dramatic effect.

The movement of the card on the screen and the corresponding asymmetric curve

The same movement type should be used when the element disappears from the screen but the user can return it to the previous place at any time. It concerns the navigation drawer, among others.

The navigation drawer hides from the screen with the standard curve

From these examples follows a fundamental rule that many beginners neglect — the beginning animation is not equal to the ending animation. As in the case with the navigation drawer — it appears with deceleration curve and disappears with the standard curve. Besides, according to Google Material Design, the time of the object’s emergence should be longer to attract more attention.

The appearance and disappearance of the side menu is fulfilled with deceleration and standard curve correspondently

A function cubic-bezier() is used to describe the curves. It’s called cubic because it’s based on four points. The first point with coordinates 0;0 (bottom left), and the last one with coordinates 1;1 (top right) are already defined on the graph.

Based on that we need to describe only two points on the graph, which are given by four arguments of the function cubic-bezier(): the first two are the coordinates x and y of the first point, the second two are the coordinates x and y of the second point.

To simplify your work with curves I suggest using sites easings.net and cubic-bezier.com. The first one contains the list of the most frequently used curves, parameters of which you can copy to your prototyping tool. The second source gives you a possibility to play with different parameters of the curve and immediately see how the objects will move.

Different types of curves and their parameters for the function cubic-bezier ()

Choreography in interfaces animation

Just like in ballet choreography, the main idea is to guide the user’s attention in one fluid direction during the transition from one state to another.

There are two types of choreography — equal and subordinate interaction.

Equal interaction

Equal interaction means that the appearance of all objects obeys to one particular rule.

In that case, the appearance of all cards is perceived as one flow that guides user’s attention in one direction, namely from the top to down. If we don’t follow the order, the user’s attention will be scattered. The appearance of all elements at once would look bad as well.

User’s attention should be guided in one fluid direction

As for the tabular view, it’s a bit more complicated. Here the user’s focus should be directed diagonally, so showing elements one by one is a poor idea. Revealing each element one by one will make animation excessively long, and the user’s attention will be zigzag-like, which is wrong.

Diagonal appearance for the tabular view of cards

Subordinate interaction

Subordinate interaction means that we have one central object which attracts all user’s attention, and all other elements are subordinate to it. This type of animation gives the sense of order and draws more attention to the main content.

In other cases, it would be very difficult for the user to know which object to follow so his attention would be dispersed. Therefore, if you have several elements that you want to animate, you need to clearly define the sequence of their motion and to animate as minimum objects as possible at one time.

It is worth animating only one central object and all the rest subjecting to it. Otherwise, a user wouldn’t know what object to follow

According to Material Design, when the moving objects transform their size disproportionally, they should move along the arc rather than in a straight line. It helps making the movement more natural. By “disproportionally” I mean that the change of height and width of the object by increase/decrease is carried out asymmetrically, that is with different speed (for example, a square card turns into a rectangle).

The motion of an object that disproportionately changes its size should be arranged along an arc

The movement along the line is used when the object changes its size proportionally. Since the implementation of such movement is much easier, the rule of disproportional arc movement is often neglected. Looking at the real examples of applications, you’ll see the domination of the linear movement.

Proportional change of the size is fulfilled in a straight line

The motion on the curve can be achieved in two ways: the first called Vertical out — object starts moving horizontally and ends with a vertical movement; the second — Horizontal out — object begins to move vertically and ends with a horizontal motion.

The path of the object’s movement along the curve must coincide with the main axis of the scrolling interface. For instance, on the next image we can scroll interface up and down and accordingly the card unfolds in a Vertical out way — at first to the right and then down. The reverse movement is done in the opposite way — that is the card first rises vertically and ends up moving horizontally.

The direction of unfolding/folding the card should coincide with the axis of the interface

If the paths of the moving objects intersect one another, they cannot move through each other. The objects should leave enough space for the movement of another object by slowing down or accelerating their own speed. Another option — they just push away other objects. Why that? Since we assume that all objects in the interface lie in one plane.

During movement, objects shouldn’t pass through each other, but leave space for the movement of another object

In another case, the moving object can rise above other objects. But again no dissolving or movement through other objects. Why? Since we believe that the elements of the interface behave in accordance with the laws of physics, and no solid objects in the real world are capable of doing that.

Objects can rise above other objects and then move

Conclusions

So, if we sum up all of the above-mentioned rules and principles, the animation in the interface should reflect the movements that we know from the physical world — friction, acceleration, etc. Imitating the behavior of objects from the real world we can create a sequence that allows users to understand what to expect from the interface.

If the animation is built correctly, then it is unobtrusive and does not distract the users from their goals. If it does, you either need to soften it or even remove at all. That means that the animation shouldn’t slow down the user or prevent from performing the task.

But do not forget that animation is more of an art than science, so it’s better to experiment and test your decisions on users.

References and further materials:

Main home(01)

Creative agency(02)

Minimal agency(03)

Digital company(04)

Design company(05)

Minimal studio(06)

Portfolio minimal(07)

In development(08)

Shop

Contacts

address:

email:

phone:

Get in Touch