Privacy UX: Better Notifications And Permission Requests

Original Source: https://www.smashingmagazine.com/2019/04/privacy-better-notifications-ux-permission-requests/

Privacy UX: Better Notifications And Permission Requests

Privacy UX: Better Notifications And Permission Requests

Vitaly Friedman

2019-04-18T17:00:49+02:00
2019-04-18T16:15:47+00:00

Part 1: Privacy Concerns And Privacy In Web Forms
Part 2: Better Cookie Consent Experiences
Part 3: Better Notifications UX And Permission Requests
Part 4: Privacy-Aware Design Framework

Imagine you are late for one of those meetings that you really don’t want to be late to. You hastily put on your shoes and your coat and fetch your door keys and grasp for the door handle — just to head out in time. As you are stepping down the stairs, you reach into your pocket and pull out your mobile phone to check the subway schedule or order a cab.

A brief glance at the screen is enough to have you breaking out in a sweat: you realize you’ve forgotten to charge your phone overnight, and it’s proudly running on its remaining 2% battery charge. As you rush down the street, full of hope and faith, you dim the brightness of the screen and hunt down the right app icon across the home screen. Of course, at that exact moment a slew of notifications cascades down your screen, asking for your undivided attention for new followers, updates, reminders, and messages.

Chances are high that you know way too well what this feels like. How likely are you to act on the cascading stack of notifications in that situation? And how likely are you turn off notifications altogether as another reminder reaches you a few minutes later, just when you missed your connection? That’s one of those situations when notifications are literally getting in a way in the most disruptive way possible, and despite all the thoroughly crafted user flows and polished, precious pixels.

With so many applications and services and people and machines and chatbots fighting for our attention, staying focused is a luxury that needs to be savored and protected, and so no wonder notifications don’t enjoy a decent reputation these days. More than that, often they feel off the point and manipulative, too.

“They often appear at times when they are least relevant, and they create a false sense of urgency, diluting focus and causing frustration.”

— Alex Potrivaev, Intercom

This goes for floating windows on the home screen as much as the almighty unread count in toolbars. This is also true for marketing messages masked as notifications, as well as social updates broken down in many small messages to permanently draw attention to the service.

All of these notifications demand immediate attention and feel incredibly invasive, playing on our desires not to miss out and stay connected with our social groups. In fact, they disrupt privacy in a way that no dark patterns can — by demanding and seizing attention unconditionally, no matter what the user is currently doing.

massgenie homepage

Can you spot anything weird in this particular design? It’s not common to see the notification count ‘0’, as it’s done on MassGenie in the top-right corner. (Large preview)

However, it’s not the fault of notifications that they feel invasive; it’s that we design them such that they often get in the way. Users don’t want to miss important notifications and miss out on timely messages or limited sales, but they don’t want to feel pestered by a never-ending tide of noisy updates either. If the latter happens too frequently, users turn off notifications altogether, often with a bitter aftertaste towards the app and brand due to its “desperate begging for attention”, as one user put it. A single culprit can ruin it for everybody else, and that despite the fact that no notification is like another.

The Many Faces Of Notifications

Notifications are distractions by nature; they bring a user’s attention to a (potentially) significant event they aren’t aware of or might want to be reminded of. As such, they can be very helpful and relevant, providing assistance, and bringing structure and order to the daily routine. Until they are not.

In general, notifications can be either informational (calendar reminders, delay notifications, election night results) or encourage action (approve payment, install an update, confirm a friend request). They can stream from various sources, and can have various impacts:

UI notifications appear as subtle cards in UIs as users interact with the web interface — as such, they are widely accepted and less invasive than some of their counterparts.
In-browser push notifications are more difficult to dismiss, and draw attention to themselves even if the user isn’t accessing the UI.
In-app notifications live within desktop and mobile apps, and can be as humble as UI notifications, but can take a more central role with messages pushed to the home screen or the notifications center.
OS notifications such as software updates or mobile carrier changes also get in the mix, often appearing together with a wide variety of notes, calendar updates, and everything in between.
Finally, notifications can find their way into email, SMS, and social messaging apps, coming from chatbots, recommendation systems, and actual humans.

You can see how notifications — given all their flavors and sources — could become overwhelming at some point. It’s not that we pay exactly the same amount of attention to every notification we receive, though. For the vast majority of users, it can take weeks until they eventually install a software update prompted by their OS notification, whereas it usually doesn’t take more than a few hours to confirm or decline a new LinkedIn or Facebook request.

Not every notification is equal, and the level of attention users grant them will depend on their nature, or, more specifically, how and when notifications are triggered.

In his article on “Critical Analysis of Notification Systems”, Shankar Balasubramanian has done remarkable research breaking down notification triggers into a few groups:

Event-triggered notifications
News updates, recommendations, state changes

OS-triggered notifications
Low battery, software update, or an emergency alert

Self-triggered notifications
Reminders or alarms

Many-to-one messaging notifications
Group messages from Slack or WhatsApp

One-to-one messaging notifications
Personal email from a friend or a relative

We can’t deduce that one group of triggers is always more effective than another, but some notifications from every group tend to be much better at capturing attention than others:

People care more about new messages from close friends and relatives, notifications from selected colleagues during working hours, bank transactions and important alerts, calendar notifications, scheduled events, alarms, and any actionable and awaited confirmations or releases.
People care less about news updates, social feed updates, announcements, new features, crash reports, web notifications, informational and automated messages in general.

Unsurprisingly, users tend to attend to low battery notifications or payment confirmations immediately; also, calendar reminders, progress updates (e.g. package delivery ETA) and one-to-one messages matter more than other notifications. In fact, in every single conversation we’ve had with users, a message from another human being was valued much higher than any automated notification. The priorities might change slightly, of course, if a user is impatiently awaiting a notification, but only few people would ever leave everything behind in a desperate rush to check the 77th like on their photo.

So notifications can be different, and different notifications are perceived differently; however, the more personal, relevant, and timely notifications are, the higher engagement we should expect. But what does it all mean for the design of notifications, and how can we make them less intrusive and more efficient?

Don’t Rely On Generic Defaults: Set Up Notification Modes

There is usually a good reason why customers have chosen to sign up for a service. Not many people wake up in the morning hoping to create a new account that day. In fact, they might feel like your service might help them in their daily tasks, or could improve their workflow. Hopefully they don’t need notifications to understand how a service works, but they might need to receive notifications to understand the value the service provides.

Perhaps they’ve received an important message from a potential employer, or perhaps there is a dating profile match that’s worth looking at. They might not want to miss these messages just because they’ve forgotten to check into the service for a while. As designers, we need to sprinkle just the right pinch of notifications into the mix to keep the customer motivated, while delivering only relevant and actionable pointers to them.

Unfortunately, with most services it’s not uncommon to sign up, only to realize a few moments later that the inbox is filling up with all kinds of messages (mostly purely informational), often sent immediately after another, and rarely actionable. Email notifications especially are often switched on by default, with the user’s consent implied by agreeing to lengthy and unmanageable terms and conditions. Nobody loves being bombarded with a stream of unsolicited messages, and that holds true for spam emails as much as for unwanted notifications.

Instead of setting up a default notification frequency for all customers by default, we could start sending just a few curated notifications very infrequently. As the customer keeps using the interface, we could ask them to decide on the kind of notifications they’d prefer and their frequency. The same goes for cookie consent prompts: we could provide predefined recommended options with a “calm mode” (low frequency), a “regular mode” (medium frequency), and a “power-user mode” (high frequency).

We could be more granular even than this, though. Basecamp, for example, has introduced “Always On” and “Work Can Wait” options as a part of their onboarding experience, so new customers can select if they wish to receive notifications as they occur (at any time), or choose specific time ranges and days when notifications can be sent. Or, the other way around, we could ask users when they don’t want to be disturbed, and suspend notifications at that time. Not every customer wants to receive work-related notifications outside of business hours or on the weekend, even if their colleagues might be working extra hours on Saturday night on the other side of the planet.

basecamp notifications settings

On Basecamp, new customers can select if they wish to receive notifications as they occur, or choose specific time ranges and days when notifications can be sent. (Large preview)

As time passes, the format of notifications might need adjustments as well. Rather than having notifications sent one by one as events occur, users could choose a “summary mode,” with all notifications grouped into a single standalone message delivered at a particular time each day or every week.

That’s one of the settings that Slack provides when it comes to notifications; in fact, the system adapts the frequency of notifications over time, too. Initially, as Slack channels can be quite silent, the system sends notifications for every posted message. As activities become more frequent, Slack recommends reducing the notification level so the user will be notified only when they are actually mentioned.

Another feature Slack offers is allowing users to highlight a selection of words so that the users only get notified when a topic they care about has been mentioned:

highlighting words for notifications in slackWith this feature, it’s still important to remain selective about your choice of highlighted words in order to avoid getting too many notifications. (Image source: Slack) (Large preview)

It might sound like the frequency of notifications is receiving too much attention at this point, but when asked about common pain points with notifications, the most common issue was, by far, their high frequency, even if the messages were relevant or actionable.

The bottom line is: start sending notifications slowly but steadily; set up notification modes, and provide granular options such as a choice of triggers and the format of notifications. Better send too little than too much: you might not get another chance should the customer wish to opt out from numerous notifications that are getting on their nerves at just the wrong time.

Pick Timing Carefully

We might not like to admit it, but for many of us, the day doesn’t start with a peaceful, mindful greeting of the rising sun; instead, it starts with a tedious, reflexive glance at the glowing screen of our mobile phones. More specifically, the first thing we see every morning isn’t even the current time or our loved ones, but the stack of notifications that piled up tirelessly while we slept.

That state of mind isn’t necessarily the best opportunity to remind users of an updated privacy policy, shiny new features, or outstanding expenses that need finalizing. Personal notifications like new social shares and reactions from social circles might be way more relevant, though, just like upcoming appointments and to-dos for the day.

Timing matters, and so do timely notifications. You probably don’t want to disturb your customers in the middle of the night as they arrive at a remote destination with heavy jet lag. Therefore, it’s a good idea to track the change of time zones and local time, and adjust the delivery of notifications accordingly. On the other side, customers won’t be particularly happy about an important notification appearing when it’s no longer relevant, so if they are tracking an important event or announcement, you’ll have to decide if the event is critical enough to disturb them at an uncomfortable time.

Your analytics will tell you when your users are likely to act on your notifications, so it’s a good idea to study and track responses based on time, and trigger the dispatch of notifications around that time. For example, if a customer is most receptive to sharing a message in the mornings, hold off notifications until just the right moment at the local morning time.

generic format of notificationsThere are many ways to present a notification. Most common notifications are displayed within a designated area, usually in the right top corner of the screen. It is the format we are used to from apps such as Facebook, Airbnb or Dropbox. (Image source) (Large preview)

Avoid Stressful Situations By Design

With notifications, timing is not the only important attribute to consider. Remember the poor character hoping to catch their connection from the beginning of this section? Unleashing a deck of notifications at a critically low battery level isn’t a good idea, and it’s just as counterproductive when the user is struggling with connectivity or is focused on a task like driving a car. If you can assess the battery level and the quality of connection, it’s a good idea to avoid sending notifications when a user’s conditions are suboptimal. Of course, notifications also have to be relevant, so if you can assess user’s location too, avoid sending location-dependent notifications that are not applicable at all.

Sometimes it’s difficult to hold notifications as they might be critical for the user’s current activity. If the user is driving a car, following directions in a navigator app, you might need to provide a more persistent and humble notification about the recommended change of route due to an accident on the road. In that case, just like other critical notifications, we could display a floating button “New updates available. Refresh.” It’s much less invasive than a notification blocking access to the content, but it’s as effective in indicating that the page or state of the page might be outdated and new information is available.

In fact, instead of sending out notifications at specific default times, even if it’s based on the user’s past behavior, you could explore the other side of the coin and tap into happy and successful moments instead. A money transfer service, TransferWise, displays notifications when the customer receives a payment — and isn’t that wonderful timing to ask for an app review on App Store? We could track important milestones and notify users about advanced features as they are reached, just-in-time, as Luke Wroblewski calls them.

Reduce Frequency By Grouping Notifications

There is no golden rule for just the right amount of notifications on a given day. Just like every notification differs, so do the preferences and motivations of every customer. To keep a user’s engagement, you might need to gradually release blocks of notifications depending on the customer’s reach or preferences. That’s where gradual grouping comes into place, as explained in the article “Designing Smart Notifications” by Alex Potrivaev, product designer at Intercom.

The idea is simple. If you know your customers get less than five reactions per post on average, it might be a good idea to provide a unique notification for each of them. You might also trigger a notification if a message is coming from important events, such as a message from close friends, family, or influential people. Besides, as we know that notifications triggered by an action from another human being are valued more than automated notifications, prioritize and focus primarily on personal ones, for that particular customer.

Once the volume of notifications has increased, we can start grouping them and provide compact summaries at an appropriate time. For example, Facebook summarizes notifications in non-intrusive blocks, with every line highlighting exactly one type of event, such as reactions to a particular message (“Stoyan Stefanov and 48 other people reacted to your post…”). LinkedIn, on the other hand, seems to trigger almost every single event one by one (“Stoyan Stefanov commented on your post”), hence polluting the stream of notifications and making them difficult to scan and use.

comparison of Facebook and Quora’s notifications

The quality of notifications matters. While Facebook provides a compact summary view of notifications, on Quora they are lengthy and verbose, making scanning difficult. (Image source: Designing Smart Notifications) (Large preview)

Of course, based on a user’s history, we could customize more than just grouping of notifications. Once we know how a user reacts to new photo likes, whether they briefly glance at them or dive deep into each and every notification, we can provide better notifications next time. As Alex concludes:

“Based on the way you usually interact with content, better wording and structure choices could be offered, and depending on the default behavior you may see notifications structured differently.”

This, of course, also requires continuous feedback loops.

Allow Users To Snooze Or Pause Notifications

Hardly any company will dismiss the value of data about their customers. In fact, we can gain valuable long-term insights by introducing feedback loops; that is, continuously offering customers options to “See more” or “See fewer” notifications of a particular kind. But just like we tend to perceive disability as an on/off condition (you either have a disability or don’t), we often feel that we can accurately predict the user’s behavior based on their past behavior alone.

The reality, however, is rarely black and white. Our users might be temporarily hindered while holding a baby in one arm, or because of a recent unfortunate accident, and the conditions in which they find themselves can fluctuate in the same way. Quick actions such as snoozing in response to an incoming notification can help alleviate the issue, albeit temporarily.

The user’s context changes continuously. If you notice an unusual drop in engagement rate, or if you’re anticipating an unusually high volume of notifications coming up (a birthday, wedding anniversary, or election night, perhaps), consider providing an option to mute, snooze, or pause notifications, perhaps for the next 24 hours.

This might go very much against our intuition, as we might want to re-engage the customer if they’ve gone silent all of a sudden, or we might want to maximize their engagement when important events are happening. However, pressing on with the frequency of notifications is just too dangerous most of the time. It’s easy to reach a point when a seemingly harmless notification will steer a customer away, potentially even in the long term. There might be good reasons why the user hasn’t been or doesn’t want to be active for a while, and more often than not, it has nothing to do with the service at all.

Another option would be to suggest a change of medium used to consume notifications. Users tend to associate different levels of urgency with different channels of communication. In-app notifications, push notifications, and text messages are considered to be much more intrusive than good ol’ email, so when frequency exceeds a certain threshold, you might want to nudge users towards a switch from push notifications to daily email summaries.

Medium notification model

In the article “Designing Notifications For Apps”, Shashank Sahay explores different notification models and when to use which, e.g. notification center, with a few guidelines and recommendations along the way. (Large preview)

Set Thresholds And Build Up A Notifications Decision Tree

The thresholds aren’t easy to set properly, though. Important events should trigger immediate notifications to be received in time. Less important events could wait, but it might be useful to draw the customer’s attention to the service. Potentially irrelevant notifications have to be filtered out relentlessly to leave time and space for important notifications to be cherished and valued.

In general, shorter notifications, such as messages from friends and colleagues, are best suited as UI notifications if they aren’t urgent, or push notifications if they are. Lengthier notifications are better off as emails — whether they’re urgent or not. This rule of thumb would vary from service to service, so you could build up a notifications decision tree to track which medium works best for particular kinds of notification based on their urgency, length, and frequency. Additionally, you could define thresholds and trigger a prompt for snoozing or adjusting the settings if a threshold is reached.

Make Opting In And Opting Out Obvious

These days it’s almost expected for a service to go to extremes in making it ridiculously difficult for a customer to opt out from almighty notifications. Obscure wording and obscure labels skillfully hidden in remote corners of the interface are not uncommon. Few other design considerations can be more harmful and damaging for a brand. When users can’t adjust settings easily, they apply heavy artillery, marking email notifications as spam, or blocking notifications in OS settings or browser settings. For a website or an app, there is no easy way to recover from that, except begging for subscriptions yet again.

A much simpler way out is to provide very granular control over notifications, including their content, format, frequency, and do-not-disturb times. We could provide an option to reply to a recent notification with “Fewer emails” or “Stop” to change the frequency, bypassing website log-ins or app sign-ins (Notion.so does that). For apps, provide notification preferences integrated into the app rather than relying on OS native settings. There, you could also explain what the user can expect from every kind of notification, perhaps even with examples of how they would look.

In practice, many users will search for notification settings in both places if they really need to, but the longer it takes them to find that nebulous setting, the less patient they’ll be. In reality, most users seek a way of turning off notifications at the moment when they are actually frustrated or annoyed by recent notifications. That’s not a pleasant state of mind to be in, and as a service, you probably don’t want to unnecessarily extend that state of mind at the expense of feeling nagged and confused by your paying customers.

Don’t forget to explore the other side of the coin as well, though. Identify parts of the user journey when a user is more likely to subscribe to notifications; for example, once an order in an online shop has been successfully placed, or a flight booking has been confirmed. In both cases, notifications can help customers track delays or retrieve boarding passes in time. That’s also a good time to suggest real-time push notifications, which also means first asking the customer’s permission to send those reminders. And that topic deserves a separate conversation.

Asking For Permission, The Humble Way

Some websites are quite a character, aren’t they? Self-indulgent, impolite at heart, and genuinely unlikeable too. How often do you stumble on a seemingly modest, unpretentious page just to be greeted with a wondrous permissions prompt begging to send you notifications? You haven’t read a single word yet, but there it is, already asking for a long-term commitment — and frankly, quite an invasive one.

In terms of user experience, displaying a permission prompt on load is probably the best way to make a poor first impression, and in most cases an irreversible mistake. Starting from January 2019, Chrome has changed the options displayed when a native prompt is triggered. While users might be able to dismiss a notification to react to it later, now they have to choose whether they’d like to either “Accept” or “Block” notifications. The latter results in web notifications being permanently blocked for the entire site, unless the user finds their way through the wilderness of browser settings to grant access after all. No wonder the vast majority of users block such prompts right away, without reading their contents at all.

Strategically, it’s better to ask permission only when there is a high chance a user would actually accept. For that to happen, we need to explain to the customer why we actually need their permission, and what value we can provide them in return. In practice, this strategy is often implemented in form of the ‘double request pattern.’ Instead of asking for permission immediately, we wait for a certain amount of engagement first: perhaps a couple of page visits, a few interactions, a certain amount of time spent on the site. Eventually, we can highlight the fact that a user could subscribe to notifications and how they might be valuable, or that we need their permission for more accurate, location-aware search results. Sometimes the context of the page is enough, like when an interface would like to ask for geolocation when the user visits the store locator page.

In all of these cases, a prominent call-to-action button would wait for the moment when a user is most receptive to act on it. If the user chooses to tap on the button, we can assume they are likely to proceed with the action. So, once clicked, the button would prompt an actual native permission request.

Essentially, we are breaking down the permission prompt into two requests:

A request built into the UI,
A native request at the browser level.

As Adam Lynch notes, should the user still revoke permission, perhaps due to a mis-tap or mis-click in the native browser prompt, we need to display a fallback page that explains how to manually enable the permission via their browser settings (or link to an explanation). Obviously, it doesn’t make sense to display a request for notifications if the user has already granted permission. We can use the Permissions API to query the status of any permission through a single asynchronous interface and adjust the UI accordingly.

The same strategy could be applied to any kind of permission request, such as access to geolocation, camera, microphone, Bluetooth, MIDI, WebUSB, and so on. The wording and appearance of UI notification prompts is of critical importance here, though, so it’s a good idea to track engagement and acceptance ratios for each permission or feature, and act on them accordingly. And that brings us to the king of them all — tracking major metrics for your notifications.

Track Metrics For Notifications

Usually notifications aren’t sent for the sheer purpose of informing customers about an occurring or upcoming event. Good notifications are useful and actionable, helping both customers and businesses achieve their goals. For that, relevant metrics have first to be discovered and defined.

As a bare minimum, we might need to know if the notifications we send are relevant in the first place.

Do the wording, format, and frequency of notifications drive the desired action that we aim to achieve (be it social shares, time spent on the site, or purchases)?
What kind of notifications matter more than others?
Do the notifications actually bring users back to the application?
How much time passes between sending the notification and the user’s return to the site or app?
How much time is spent on average between the clickthrough notification and the user leaving the site?

notifications track

Track whether notifications actually work by exploring if they prompt a desired action, and if yes, when. (Image source: Designing Smart Notifications) (Large preview)

Experiment with wording, length, dispatch times, and grouping and frequency of notifications for different levels of user involvement — beginner, regular user, and power user. For example, users tend to be more receptive to conversational messages that feel more casual and less like system notifications. Mentioning the names of actual human beings whose actions triggered a notification might be useful as well.

It’s never a bad idea to start sending notifications slowly to track their potential negative impact as well — be it opt-outs or app uninstalls. By sending a group of notifications to a small group first, you still have a chance to “adjust or cancel any detrimental notification campaigns before it’s too late,” as Nick Babich remarks in “What Makes A Good Notification”.

All these efforts have the same goal in mind: avoiding significant disruption and preventing notifications fatigue for our customers, while informing them about what they want to know at about the time they need to know it. However, if cookie prompts are just annoying, and frequent notifications are merely a disturbance, when it comes to the security of personal data and how it’s managed, customers tend to have much more pressing concerns.

It’s worth noting that there are significant differences in how notifications are requested, grouped, and displayed on Android and iOS, so if you are designing a native or a hybrid app, you’ll need to examine them in detail. For example, on iOS, users don’t set up app notifications until onboarding or a later usage of the app, while Android users can opt-out from notifications during installation, with the default behavior being opt-in. Push notifications sent by a PWA will behave like native notifications on a respective OS.

Admittedly, these issues will not be raised immediately, but as customers keep using an interface and contribute more and more personal data, doubts and concerns start appearing more frequently, especially if more people from their social circles are involved. Some of these issues are easy refinements, but others are substantial and often underestimated blockers.

In the final article of the series, we’ll be looking into notifications UX and permission requests, and how we can design the experience around them better, with the user’s privacy in mind.

Part 1: Privacy Concerns And Privacy In Web Forms
Part 2: Better Cookie Consent Experiences
Part 3: Better Notifications UX And Permission Requests
Part 4: Privacy-Aware Design Framework

Useful Resources And References

“Designing Notifications For Apps,” Shashank Sahay
“Different Types Of Notifications: Websites, Apps And Beyond,” Joanna Martin
“It’s Time For Notifications To Get Smart,” Alex Potrivaev
“Improving User Experience With Real-Time Features,” Lauren Plews

Smashing Editorial
(yk, il)

7 Steps to Successfully Onboarding Design Clients

Original Source: https://www.webdesignerdepot.com/2019/04/7-steps-to-successfully-onboarding-design-clients/

You’ve done the hard work: you’ve taken a lead and turned them into a paying customer. Congrats! Now, you have to build their website.

But is it that simple? The client signs the contract and you immediately get to work on designing the website?

You could certainly approach the kickoff of a web design project that way. However, you’d be missing out on the huge benefits of having a well-laid-out onboarding process.

By the time you have a signed contract in hand, you’ve already established some basic expectations with your client. That’s good. You never want to enter into a relationship with a client if they (or you) don’t know what they’re getting themselves into.

Onboarding further strengthens the basic groundwork you’ve laid down.

Use this onboarding checklist to ensure you give each of your web design projects as strong a start as possible.

Step 1: Duplicate Your Project Management Template

This first step assumes that you have a web design project template. If you haven’t created one yet, I’d strongly encourage you to do so. Each project you take on will have the same basic structure, so why not spare yourself the trouble of having to recreate it every time?

Regardless of which project management software you use, duplicating your template is easy.

In Trello, you’ll click “Show Menu”:

Then, “Copy Board”:

Name it with the new client’s name and click “Create”.

Or, in Asana, you’ll click on the “More” (three dots) icon:

Then, “Duplicate Project”:

Name it with the new client’s name and then click “Create New Project”.

Add any team members that will be working on the job to the folder now.

Step 2: Save Project Documents to the Folder

Centralize all of your documents, communications, and deliverables in the new project management folder. Start with the scope-of-work (SOW), proposal, and any notes you gathered on the client prior to the signing of the contract.

Step 3: Schedule a Kickoff Call with the Key Stakeholder

If you haven’t already done so, identify who the key stakeholder is on the client’s side. Ideally, this is one person. Is it the CEO? The marketing admin? A project manager? Whoever you will be dealing with throughout the project (i.e. the decision-maker) should be the one to attend the kickoff call.

This will streamline all communications during the project to ensure you’re not having to field requests or feedback from multiple parties.

Step 4: Reinforce Expectations During the Kickoff Call

Over the course of 30 minutes, it’s your job to briefly communicate what the client can expect from you over the course of the job while reinforcing what you need from them to make it happen.

This means talking about things like:

Your process;
Project timeline;
The feedback process;
Milestones and progress calls;
An introduction of your project management software (if you can do it through a live screen-share, that would be best).

This is also when you’ll reinforce the accountability piece by letting them know that “homework” will follow shortly.

Step 5: Send the Welcome Questionnaire

In the Welcome questionnaire you send after kickoff, explain to the client that they don’t have to worry about a thing in terms of building a beautiful website for their business. That’s your job. However, you do need certain things from them in order to do the job well.

Although I don’t build websites for clients anymore, I still use the same onboarding process for my copywriting clients. Here is the Welcome email I send to them (feel free to tailor this to your own needs):

Welcome aboard, [client name]!
I’m very excited to get started and hope you are, too!
I know what a pain it is to create content for your own brand, so I’m happy you’ve entrusted it to me.
As we get moving here, I’m going to ask you for just a few things: [link].
Please fill this out within the next seven days. If I have any questions, I’ll be in touch as soon as I can.

It’s succinct and let’s the client know I’m not asking for much. I then send them a Google Forms questionnaire to collect all the remaining details, documents, and logins I need from them:

Personally, I love Google Forms for onboarding copywriting clients, but you may want to use something like Content Snare if you expect to receive lots of design assets and content.

In terms of what you ask for? It depends on how much you’re doing for the website, but I’d suggest starting with these:

Logins to their content management system and control panel (plus, logins to third-party integrations if you need them)
Logo
Brand guidelines
3-5 websites they like the look of
Top 3 competitors’ websites
Images, videos, and other brand assets
Website pages (navigation)
Content (if they’re writing it)

Don’t start any work until you receive everything they owe you. One of the reasons you have an onboarding process is so they can’t drag their feet and cause delays later on.

Step 6: Generate the Creative Brief

Based on everything you know about the client, their target audience, and goals for the website, you now need to generate the creative brief.

This is a succinct document that lays out the details and plan for the website. It ensures that all parties — you, your team (if you have others working for you), and the client — are on the same page and in agreement of what’s to be done. That way, if questions or disagreements come up later, the creative brief will put any doubts to rest.

You should include the following:

Title (i.e. website name)
Project summary
Start date
Projected end date
Deliverables
Problems to be solved
Goals/objectives
Target audience
Project milestones and due dates

Also, if you’re in the habit of creating moodboards for clients, you can send that over with the creative brief.

Make sure to get a signature of approval before moving on. HelloSign can help you do this easily and cheaply.

Step 7: Schedule Progress Calls

One last thing to do is to schedule progress calls with the client. It might seem too early to do this, but it’s not really.

You have a project start and end date. You have projected milestones. By scheduling progress calls for each milestone now, you can put the website on everyone’s radar, which will keep everyone involved (including the client) accountable to the project.

Once your client has accepted the invitations, it’s time to start assigning tasks in your project management software and get to work!

The Benefits of Onboarding

Think about all those times a client failed to deliver something that was owed to you (like logins, logos, or content) — and how that set your project timeline back.

Think about all those times a client said, “I hate it” or asked for a fifth or sixth round of revisions despite clearly not knowing what they really wanted.

Think about all those times you missed a step and had to backtrack once you were hip-deep in the design process.

Onboarding web design clients helps you avoid common issues and strengthen your workflow by:

Documenting and storing everything in a centralized spot;
Setting and reinforcing client expectations;
Preventing scope creep;
Designing websites with better outcomes;
Boosting trust in your business.

As you refine this predictable onboarding process, you’ll be able to complete website projects more efficiently which, in turn, will lead to higher profit margins.

 

Featured image via Unsplash

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The best camera for creatives in 2019

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/iIoQZTBcbaY/best-camera

Though you may be a creative working in many disciplines, you may not have considered the advantages a camera can bring you. Adding photography to your portfolio of skills can open up doors to many new opportunities, and apart from anything else is a lot of fun in its own right!

But then the question arrives: what's the best camera I can buy? Creatives and photographers have all sorts of different needs when it comes to tech. That's why we're here to help, with our round-up of all the best cameras that creatives can buy right now. 

So what's the best camera out there right now? We think it's the Fujifilm X-T30. It’s a camera for everyone, with fantastic image quality, top-notch 4K video and access to the terrific range of X-mount lenses. At its price, there's nothing else to touch it for performance, quality and handling. If video is your thing, our best 4K camera is the Panasonic Lumix GH5, with its impressive breadth of movie-making features. 

The best photo editing appsThe 5 best laptops for photo editing

Of course, the best camera for you depends on what you need it for. Whatever your creative output, we’ve got the right option here: you’ll find the best DSLR and our favourite cheap DSLR at the top of this list, with superb mirrorless and compact options further down. We’ve also covered the best action cameras, as well as the best travel camera for your holidays – and even the best camera phone, for those times when you don't want to carry a camera.

Here's our pick of the best cameras for photography out there…

A triumphant achievement by Fujifilm, the X-T30 is a mirrorless camera that packs an incredible amount of tech into a small camera body. It's the smaller sibling to the flagship X-T3, with a lower price tag to match, and this winning combination of power and price makes the X-T30, in our eyes, the best camera around for creatives right now. It sports the latest 26.1MP X-Trans CMOS 4 APS-C sensor and X Processor Pro 4, but where advancements have really been in made is in the super-sophisticated autofocus system, with 2.16 million phase detection pixels that cover 100% of the frame, able to work even in extreme low-light conditions.

The X-T30 uses an electronic shutter that allows the user to burst-shoot at up to 30fps with no viewfinder blackout, and it can capture 4K UHD video at a maximum frame rate of 30p. The camera's ergonomics are first-rate, making use of Fujifilm's signature dial-led controls for a tactile handling experience. It's an utterly superb camera by any standards, and the fact that it comes at a sub-£1000 price makes all this all the sweeter. If you’re feeling a little more flush, take a look at the Fujifilm X-T3, which is this camera's more powerful big brother.

The Nikon D850 is still top dog in the DSLR world, and unchallenged by Canon when you consider just how many things it gets right. Normally such cameras are intended to excel in one area, such as speed or resolution, but the D850 delivers in all of them. Its 45.7MP sensor produces richly detailed images, particularly as it lacks an anti-aliasing filter, while 7fps burst shooting can be boosted to 9fps with an optional grip and battery. The 153-point AF system, meanwhile, is still Nikon’s most comprehensive iteration. And naturally, 4K video is on board too.

Around its solid core, the camera is ready for unlimited creativity, with time-lapse shooting, slow-motion video output in Full HD, in-camera Raw processing and a raft of other post-capture adjustments all falling to hand. Shooting at night? Many of the camera’s controls light up, and the ISO range stretches to a setting equivalent to 102,400 – a rarity on a camera with such a populated sensor. Need to shoot silently? This is not possible on many other DSLRs, but here you can fire 30fps bursts in complete silence.

Targeted at pros – and as at home in the studio as it is in the field – the Nikon D850's body usually comes on its own. But if you don’t already own a lens you’ll be well served by partnering it with the excellent AF-S Nikkor 24-70mm f/2.8E ED VR for general use. Can’t quite stretch to the D850’s asking price? Good-quality examples of the older Nikon D810 can still be found online.

The Canon EOS 200D / Rebel SL2 is neither the cheapest entry-level DSLR nor the newest, but it gains a spot on our best camera for creatives list by breaking from entry-level DSLR norms to provide a particularly generous feature set. In essence, it feels like it’s designed with the entry-level user’s needs and desires in mind, rather than a particular price point. The 24.2MP appears fairly conventional, but it’s furnished with Dual Pixel CMOS AF technology to make focusing nice and swift in live view, and focusing transitions smooth and professional when creating videos. These are captured in Full HD rather than 4K quality, but the option to record to 60p and a mic input boost its potential for high-quality recordings. 

The flip-out LCD, meanwhile, is a boon for shooting from unorthodox angles, and its super-sensitive touch panel lets you focus effortlessly where you want by touch. The camera’s DIGIC 7 processing engine is one of the newest, and this allows for a range of Picture Styles and in-camera Raw processing, while the full Wi-Fi, NFC and Bluetooth trinity of connectivity options star alongside. 

You can grab it as a body-only option, although most people just getting started will no doubt want to spend a shade more to pair it with the EF-S 18-55mm f/4-5.6 IS STM lens. If you’re feeling adventurous, you can even opt for a kit with the all-encompassing EF-S 18-135mm f/3.5-5.6 IS STM instead, and if you fancy something similar but with a bit more powerful, take a look at the Canon EOS 800D. This is a great option for the first-timer, particularly if live view or video is your thing.

It’s difficult to know where to start with the Panasonic GH5; there’s simply so much to pique the videographer’s interest. 4K footage can be recorded in both DCI 4K and UHD 4K flavours without the heavy crop factors that plague other 4K models, and this is captured in high-quality 10-bit 4:2:2 (internally). You can also use focus peaking to get focus bitingly sharp, call on an anamorphic shooting option, capture at high speeds for slow-motion output and opt for a (paid-for) log option. Video aside, there’s plenty more to love, from the excellent 3.6 million dot viewfinder and articulating LCD through to 9fps shooting and 225 AF points, all inside a sturdy, weather-sealed body. 

Not quite what you need? The newer Panasonic GH5S variant opts for a 10.2MP sensor for better dynamic range and low-light performance, but misses out on sensor-based image stabilisation. Alternatively, the older Panasonic GH4 also provides 4K recording, and would make a good alternative if your budget doesn’t quite reach what’s being asked here. 

In 2018 we saw an explosion of full-frame mirrorless cameras as Canon, Nikon and Panasonic started muscling in on this territory. For our money, one of the best choices for creatives in this department is the Nikon Z6, which blends comprehensive functionality and top-notch image quality with fast autofocus and fantastic low-light performance, all wrapped up in a body that doesn't cost the earth. The larger, more sophisticated Z7 is pitched towards professional photographers, and we reckon this slimmed-down model is the better choice for creatives. You still get access to the exciting new range of Z mount lenses, and the 24.5MP of resolution is going to be more than enough for most purposes.

The wide ISO range (expandable to 204,800) makes the Z6 an extremely capable choice for low-light work, and the in-body image stabilisation and 4K video using the full width of the sensor both add to this tremendous package. If you're feeling especially flush you might want to consider the NIkon Z7, which boasts a considerable 45MP of resolution, but we think the balance the Z6 offers between price and power will be a winner with any creative.

Just as Nikon’s D850 quickly became the DSLR that everyone wanted to switch to, Sony’s A7 III has mirrorless users saving up their pennies. While many models have their specific focus and target audience, the A7 III really is a camera for all. A 24MP full-frame sensor, hybrid AF system that covers a staggering 93 per cent of the frame and 4K video from oversampled footage are just a sliver of the highlights. Sony has focused on the details too, installing the useful AF joystick that found fans on previous models, and boosting battery life to a very respectable (by mirrorless standards) 710 frames. 

The A7 III is a great all-rounder, with a versatile feature-set that makes it a great fit for a range of applications, but the older Sony A7 II is still very much on a sale and worth considering if you fancy something more keenly priced. Either way, grab it with the FE 28-70mm F3.5-5.6 OSS if you’re just getting started, unless you already own a lens or two.

Today’s compact cameras are incredibly advanced, and while the  RX100 Mark IV is now a couple of years old, it’s hard to think of a camera that offers the same great balance of price, specs and portability. Despite the powerful partnership of a large 1in sensor and 24-70mm f/1.8-2.8 optic at its heart, and a high-quality electronic viewfinder that pops up on demand, it somehow manages to be smaller and lighter than most other compacts. 

And for anyone looking to travel light, it delivers plenty. The rear LCD screen flips up and round to face the front, while a maximum shutter speed of 1/32,000sec (with the electronic shutter) permits super high-speed motion to be captured with clarity. On the other end of the shutter-speed scale, a built-in ND filter allows for longer exposure than would be otherwise possible, as well as video recording in bright light. And all of this is before we get to 4K video, with slow-motion footage recorded at up to 1000fps too. It’s also wirelessly connected and charges through its USB port. Really, there’s little it can’t or doesn’t do.

The camera has been updated by both the RX100 Mark V and the recently announced Mark VI model, and these are worth considering if action or travel photography are more your thing. For everyone else after a more everyday camera for photography, the Mark IV's more modest feature set and price tag will no doubt suit you better.  

The Sony RX10 III is another camera that has been updated since its launch but is still recommended for its price-to-spec sheet – particularly as it often subject to the odd cashback offer. So why is it so tempting for travel photography? The core combo of a stacked 1in sensor and an impressively bright 24-600mm (equiv) f/2.8-4 lens is mostly why it's so special, as you just don’t get that balance of sensor size, focal range and brightness in such a compact package anywhere else. But it’s the fact that these features are both excellent performers, rather than marketing highlights, that makes the camera such a pleasure to use.

Thankfully the lens is primed with a very effective image stabilisation system to keep everything crisp. Meanwhile, 4K video recording is augmented by a range of supporting technologies and recording options, including both headphone and microphone ports and a raft of slow-motion shooting options. The weather-sealed body is also a massive bonus for those traveling through the odd patch of inclement weather, while the ergonomics allow you to get the kind of purchase that you’d normally have to turn to to a DSLR for.  

Don't need such a humongous optic? The older Sony RX10 Mark II provides much the same but with a 24-200mm (equiv) lens. Feeling fancy and want something more powerful? The newer RX10 Mark IV boasts a superior 315-point phase-detect AF system and a touchscreen, and a faster 24fps burst rate on top of sundry changes.

With each new HERO model, GoPro has been perfecting its action camera formula, so much so that you could have been forgiven for wondering how on earth they would improve on the 4K-shooting HERO6. The answer, as it turned out, lay in video stabilisation. The GoPro HERO7 boasts an ultra-smooth stabilisation system that keeps your footage smooth and professional-looking even in the choppiest of environments, as though you had the camera mounted on a sophisticated gimbal.

This isn’t the only improvement. The HERO7 will shoot Full HD at a super-slow frame rate of 240fps, meaning you can capture smooth slow-motion footage, and on the stills side, new intelligent automated shooting technology allows the camera to analyse any given shooting situation and selectively apply HDR, noise reduction and local tone mapping to make the finished shot as good as it can be. 

If, however, you prefer to have complete control over the look of your shots, the GoPro HERO7 also shoots in RAW format. Alongside these, you’ve also got all the usual GoPro hallmarks – waterproofing down to 10m, built-in GPS and instant clip sharing (now with livestreaming capabilities).

All this tech doesn’t exactly come cheap. However, if budget is an issue, consider the Silver and White HERO7 models, which sacrifice a few features for a more affordable price point.

Also read: The best cheap GoPro deals for filmmakers

Smartphones may have shrunk the compact camera market to a fraction of its former size, but the presence of cameras like the PowerShot SX620 HS prove that there are still good reasons for the two formats to co-exist. After all, what smartphone offers a stabilised 25x optical zoom range that stretches from 25-625mm (in 35mm terms), together with the SX620 HS’s level of physical control? 

Despite its beefy focal range, Canon has designed the camera with a svelte body that will still slip inside your pocket without any bother. This makes it great for those after a basic travel camera that’s as happy to hone in on far-off details as it will capture sweeping landscapes. And with Wi-Fi and NFC on board, you can quickly get your creations out into the wider world without hassle.     

If you’re after something similar but don’t quite need that monstrous zoom, the arguably more handsome IXUS 285 HS is worth popping on your shortlist. 

The Google Pixel 3's smartphone camera may not boast the highest resolution or the largest aperture among its rivals, but you can’t argue with the images it produces. Its Android-powered smart learning means it gets better over time at optimising itself for different shooting situations, and the dedicated Pixel Visual Core chip that’s powering it gives the camera a real edge. The consistency of the Pixel 3’s camera is simply remarkable – to borrow an old saw from a rival company, it just works. It does well in low light, and has an impressive digital zoom mode that allows you to get closer with a minimal drop in quality.

You’ll be previewing your images on a gorgeous 5.5-inch screen, which is a nice size for one-handed operation. The downsides? Well, the battery life could be better – if you spend a day shooting, you’ll definitely want to bring along a portable charger – and 4GB of RAM is arguably a little underwhelming given that many rivals are providing 6GB. These are small gripes though, and if you have any interest in smartphone photography for your creative work, the Pixel 3 is a fantastic choice.

If you like things super-sized and don’t mind spending a little more, you can spring for the Google Pixel 3 XL. You do get a larger battery on the XL, however the effect is mitigated in real terms by the increased power drain of the larger screen. Ultimately we think that for price and comfort of operation, the Pixel 3 is your best bet.

Also read:

The 5 best laptops for photo editingThe 16 best photo editor appsThe designer's guide to image editing in Photoshop

Beautiful Web Design Concept for Ray-Ban

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/wTP2-U-MdNE/beautiful-web-design-concept-ray-ban

Beautiful Web Design Concept for Ray-Ban
Beautiful Web Design Concept for Ray-Ban

abduzeedoApr 16, 2019

Alexander web-designer published a super cool web design concept for Ray-Ban. Ray-Ban is an American brand of sunglasses and eyeglasses created in 1937 by the American company Bausch & Lomb. The brand is known for their Wayfarer and Aviator lines of sunglasses. Alexander explored simple ways to make the product front and center. I am a fan of the simple, yet, elegant look of the site. I also love the little animation he did with the logo and the iconic form of the sunglasses.

Web Design Concept

 


Represent Your Business with a Free .design Domain Today

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

The right domain name is a vital part of your overall branding strategy. It should be both easy to remember and reflect what you do. Yet, for years designers have settled for domain extensions that really don’t fit in. While .com, .net or .biz work well enough, do they really provide users with context?

Thankfully, we no longer have to settle. Now that .design domains have arrived, they offer a unique way to promote your business. They look great on all of your branding materials, such as business cards, resumes and even as your custom email address.

And, best of all, you can register your own .design domain for free! If you already have a website – not to worry. You can simply connect your new .design domain to your existing site. Or, use the available site builder to start from scratch.

Porkbun .design domain

Why .design Stands Out

Having your own .design domain name presents quite an amazing opportunity. After all, it’s rare that an industry has such an easily identifiable domain extension.

Not only that, but there are several other reasons to go with .design, such as:

Great Names Still Available
Because .design is fairly new, there are still plenty of outstanding names available to register. However, that won’t always be the case – so consider getting yours as soon as possible.

Unique Branding Opportunities
A great rule of thumb is that, the shorter your domain, the easier it is to remember. And since .design is so industry-specific, it allows for some clever name shortening.

For example, janedoedesign.com can become janedoe.design. Not only is this shorter in length, it also makes for more memorable branding.

Perfect for Redirecting
Even if you don’t use your .design domain for your main website address, it can still be a valuable resource for redirecting elsewhere.

If, for instance, you have a profile at a design community such as Behance or Dribbble, you can point your .design domain directly to your portfolio page. This makes sharing your profile with others super simple.

Get Your FREE .design Domain

We have teamed up with Porkbun to offer all 1stWebDesigner visitors a FREE .design domain name. The first year is free, and yearly renewals will be just $35 instead of the $70 offered at some registrars.

You also get:

Free Email Hosting
You can add an email address (or multiple!) that matches your domain name. For example, anne@goldsmith.design or info@goldsmith.design, or any other name you want.

SSL Security
An SSL certificate will encrypt your visitors’ sensitive data, and also display your site with “HTTPS” in your address bar, which will let visitors know that you’ve made their security your top priority. You’ll also avoid the “NOT SECURE” label from Google.

Free WHOIS Privacy
Your contact information will be private, and protected forever. Other registrars charge you for this. PorkBun won’t.

Free Website Builder
If you want to build your .design website with no code, you can build it for free using their site builder, powered by Weebly. And with this option you don’t have to pay for website hosting.

Free Domain Connection
Whether you built your website (or plan to build it) with other services like WIX, SquareSpace, or Weebly, you can easily connect your .design domain to your website platform. Your website content will stay exactly the same, but you’ll have a modern .design domain name for your website to show off!

Here’s your chance to get a free website domain name that reflects what you do and helps you showcase your work.

To claim your free domain:

Click to claim & search for your domain name
Click the pink + icon on the desired domain
Click the checkout button & complete the checkout process.

YES! I WANT MY FREE .DESIGN DOMAIN NAME!

This offer does not apply to premium names.


How to Build a Stunning Portfolio Website as a Web Developer

Original Source: https://www.sitepoint.com/how-to-build-a-stunning-portfolio-website-as-a-web-developer/

This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible.

In your role as a professional web developer, you're up for just about any website-building challenge. But, building a creative website portfolio for your own services isn't something you're accustomed to.

As much as you love web development, you've probably never thought of it as being a particularly sexy or creative profession.

The truth is, it's not all that difficult to put an eye-grabbing portfolio together rather easily when you're armed with the right tools, and you have a selection of inspiring and relevant concepts to choose from.

Here are 8 powerful ideas, together with 32 examples, to inspire you and enable you to promote your services on your own stunning portfolio website.

The post How to Build a Stunning Portfolio Website as a Web Developer appeared first on SitePoint.

A Beginner’s Guide to npm — the Node Package Manager

Original Source: https://www.sitepoint.com/beginners-guide-node-package-manager/

Node.js makes it possible to write applications in JavaScript on the server. It’s built on the V8 JavaScript runtime and written in C++ — so it’s fast. Originally, it was intended as a server environment for applications, but developers started using it to create tools to aid them in local task automation. Since then, a whole new ecosystem of Node-based tools (such as Grunt, Gulp and Webpack) has evolved to transform the face of front-end development.

This popular article was updated on 08.06.2017 to reflect the current state of npm, as well as the changes introduced by the release of version 5.

To make use of these tools (or packages) in Node.js we need to be able to install and manage them in a useful way. This is where npm, the Node package manager, comes in. It installs the packages you want to use and provides a useful interface to work with them.

In this article I’m going to look at the basics of working with npm. I will show you how to install packages in local and global mode, as well as delete, update and install a certain version of a package. I’ll also show you how to work with package.json to manage a project’s dependencies. If you’re more of a video person, why not sign up for SitePoint Premium and watch our free screencast: What is npm and How Can I Use It?.

But before we can start using npm, we first have to install Node.js on our system. Let’s do that now…

Installing Node.js

Head to the Node.js download page and grab the version you need. There are Windows and Mac installers available, as well as pre-compiled Linux binaries and source code. For Linux, you can also install Node via the package manager, as outlined here.

For this tutorial we are going to use v6.10.3 Stable. At the time of writing, this is the current Long Term Support (LTS) version of Node.

Tip: You might also consider installing Node using a version manager. This negates the permissions issue raised in the next section.

Let’s see where node was installed and check the version.

$ which node
/usr/bin/node
$ node –version
v6.10.3

To verify that your installation was successful let’s give Node’s REPL a try.

$ node
> console.log(‘Node is running’);
Node is running
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.exit Exit the repl
.help Show repl options
.load Load JS from a file into the REPL session
.save Save all evaluated commands in this REPL session to a file
> .exit

The Node.js installation worked, so we can now focus our attention on npm, which was included in the install.

$ which npm
/usr/bin/npm
$ npm –version
3.10.10

Node Packaged Modules

npm can install packages in local or global mode. In local mode it installs the package in a node_modules folder in your parent working directory. This location is owned by the current user. Global packages are installed in {prefix}/lib/node_modules/ which is owned by root (where {prefix} is usually /usr/ or /usr/local). This means you would have to use sudo to install packages globally, which could cause permission errors when resolving third-party dependencies, as well as being a security concern. Lets change that:

Parcel delivery companyTime to manage those packages
Changing the Location of Global Packages

Let’s see what output npm config gives us.

$ npm config list
; cli configs
user-agent = “npm/3.10.10 node/v6.10.3 linux x64”

; userconfig /home/sitepoint/.npmrc
prefix = “/home/sitepoint/.node_modules_global”

; node bin location = /usr/bin/nodejs
; cwd = /home/sitepoint
; HOME = /home/sitepoint
; “npm config ls -l” to show all defaults.

This gives us information about our install. For now it’s important to get the current global location.

$ npm config get prefix
/usr

This is the prefix we want to change, so as to install global packages in our home directory. To do that create a new directory in your home folder.

$ cd ~ && mkdir .node_modules_global
$ npm config set prefix=$HOME/.node_modules_global

With this simple configuration change, we have altered the location to which global Node packages are installed. This also creates a .npmrc file in our home directory.

$ npm config get prefix
/home/sitepoint/.node_modules_global
$ cat .npmrc
prefix=/home/sitepoint/.node_modules_global

We still have npm installed in a location owned by root. But because we changed our global package location we can take advantage of that. We need to install npm again, but this time in the new user-owned location. This will also install the latest version of npm.

$ npm install npm –global
└─┬ npm@5.0.2
├── abbrev@1.1.0
├── ansi-regex@2.1.1
….
├── wrappy@1.0.2
└── write-file-atomic@2.1.0

Finally, we need to add .node_modules_global/bin to our $PATH environment variable, so that we can run global packages from the command line. Do this by appending the following line to your .profile, .bash_profileor .bashrc and restarting your terminal.

export PATH=”$HOME/.node_modules_global/bin:$PATH”

Now our .node_modules_global/bin will be found first and the correct version of npm will be used.

$ which npm
/home/sitepoint/.node_modules_global/bin/npm
$ npm –version
5.0.2

The post A Beginner’s Guide to npm — the Node Package Manager appeared first on SitePoint.

Collective #508

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

C508_Handbook

Front-end Developer Handbook 2019

Cody Lindley wrote this guide that outlines and discusses the practice of front-end engineering, how to learn it and what tools are used when practicing it in 2019.

Check it out

C508_VC

Our Sponsor
Visual Composer founder had an AMA on Reddit – and he survived!

Here are the most surprising 5 things he’s learned from the community and the future he’s planning for Visual Composer. Bonus: there’s a great freebie at the end of his post, go check it out!

Discover more

C508_yuantalk

Generative Art with CSS

The translation of Yuan Chuan’s CSSConf talk by Chen Hui Jing.

Read it

C508_CodeGuppy

CodeGuppy

A place where kids and adults alike learn JavaScript coding through fun and easy to follow tutorials.

Check it out

C508_artdirection

Art Direction For The Web Using CSS Shapes

A tutorial by Andy Clarke where he goes beyond basic CSS Shapes and shows how you can use them to create five types of distinctive and engaging layouts for your art-directed designs.

Read it

C508_typora

Typora

A very minimal Markdown editor with a seamless writing and reading experience.

Check it out

C508_griditems

Controlling leftover Grid items with pseudo-selectors

Michelle Barker describes a technique for taking care of leftover grid items.

Read it

C508_svgload

Inline an SVG file in HTML, declaratively & asynchronously!

A fast and easy way to inline some remote SVG or HTML into your page. By Scott Jehl.

Check it out

C508_styleguide

CSS Grid: Style Guide

Olivia Ng created this great style guide with CSS Grid.

Check it out

C508_deno

Deno, a new way to JavaScript

A presentation by Ryan Dahl on the new TypeScript runtime for Node called Deno.

Watch it

C508_test

Domain-Oriented Observability

Pete Hodgson describes a pattern for adding business-relevant observability in a clean, testable way.

Read it

Screen-Shot-2019-04-15-at-22.55.10

CSS masonry with flexbox, :nth-child(), and order

Tobias Ahlin describes a CSS-only way of creating a masonry (or mosaic) layout.

Read it

C508_poster

Free Font: Postertoaster

A very artsy monospace typeface by Vsevolod Abramov.

Get it

C508_acc

Accessibility Events

An article by Mat Marquis about why we don’t want a way to know when a user has a disability.

Read it

C508_3dyuan

Chasing

Yuan Chuan’s awesome animation with a 3D look.

Check it out

C508_boilerplate

Three.js Boilerplater for CodeSandbox

Francesco Michelini created a really useful Three.js boilerplate to easily quickstart a project on CodeSandbox.

Check it out

Screen-Shot-2019-04-15-at-22.45.53

GLSL: Blinn-phong shading

An incredible GLSL sphere demo by Liam Egan.

Check it out

C508_deutschmeister

Free Font: Deutschmeister Moderne

Rick Lewik created this typeface as a homage to the Grobe Deutschmeister font.

Get it

C508_variable

Get a CSS Custom Property value with JavaScript

Andy Bell shows a trick for getting a CSS variable value with JavaScript.

Read it

C508_editor

Editor

In case you didn’t know about it: a real-time, responsive HTML/CSS/JS code editor.

Check it out

C508_spiral

Whirling

A fantastic spiral demo by Yuan Chuan. Support on Chrome and Firefox.

Check it out

Screen-Shot-2019-04-15-at-22.46.16

Instagram Layout built in CSS Grid, Flexbox and Vue

A fully responsive take on the Instagram app layout using CSS Grid and Flexbox for the implementation of the layout and VueJS for the processing of the data.

Check it out

C508_pixelcorner

Pixel borders

A SASS mixin to add pixelated borders to HTML elements.

Check it out

C508_hooks

React Hooks Cheat Sheet

A React hooks cheat sheet with live editable examples.

Check it out

C508_reactsvg

From Our Blog
Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber

Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components.

Check it out

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

What’s New For Designers, April 2019

Original Source: https://www.webdesignerdepot.com/2019/04/whats-new-for-designers-april-2019/

We’re all about learning tools this month in our round of up new resources and tools for designers. From games to books to tutorials, there’s something new for everyone to learn and enjoy.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

CSSBattle

Jump to the top of the CSSBattle leaderboard by using CSS skills to replicate targets with the smallest possible code. Put your skills to the test in this fun way to test your knowledge. New targets being added as well so you can keep going and moving up in the rankings.

UX Agenda

UX Agenda is a compilation of conferences, meetups and workshops in a single, searchable location. Look for events near you or add your own UX events for free.

Codetalks.tv

Codetalks.tv is a collection of the best talks about coding around the world in one place. Watching any of the videos is free. Look for talks from specific conferences or by topic.

Static Pages

Static Pages allows you to publish any static page on a WordPress website with any URL in a matter of seconds. It also includes SEO optimization for ease of use.

Static Pages – Upload Static HTML Pages to WordPress

Javascript Grammar

Javascript Grammar is an educational e-book offering from Greg Sidelnikov, also known as @js_tut or JavaScript teacher on twitter. You can get it on Amazon, with a tweet or direct from the author.

Illustration Gallery

Illustration Gallery is a collection of royalty-free illustrations for projects. It’s updates weekly with plenty of options for personal or business use in a clean, modern style.

Neort

Neort (which is still in beta) is a digital art gallery where you can share artwork and how it was created. Upload work with a short description and gather feedback on it from a community of artists. Think of it as the artist version of Dribbble.

Geenes

Geenes is a color scale tool to help you generate color palettes for user interface elements and then export the hues for Sketch or other programing tools.

Color Review

Color Review is a tool to help you test contrast between color elements in a design. This can help you ensure that foreground and background elements have enough contrast to be read with ease by all users and is a great accessibility tool. Use it online or download the app.

Spider

Spider is a tool that helps you turn websites into organized data without coding. Add the extension to Google Chrome to start scraping data; just point and click to collect the data you need.

Code2Flow

Code2Flow is a tool to describe workflows and patterns in an easy (and visual) format. Create and build flowcharts in seconds and don’t worry about needing more complicated drag and drop tools. And it’s all interactive.

Mosaic

Mosaic is a front-end JavaScript library for building user interfaces. It uses a component-based system and has an extremely small library size.

Humane by Design

Humane by Design is a project by Jon Yablonski to provide information about designing ethically humane digital products. From the site: “The exponential growth of mobile technology has ushered in an age where time and attention is an increasingly scarce resource. Instead of technology enhancing our abilities as humans, we’ve seen it become a vehicle for extracting our attention, monetizing our personal information, and exploiting our psychological vulnerabilities. As designers, we play a key role in the creation of such technology, and it’s time we take responsibility for the impact that these products and services we build are having on people it should serve.”

Outdoor Icon Pack

The Ultimate Outdoor Icon Pack includes 64 editable vector icons and a checklist for adventure designs. The flat line styles are trendy and easy to use.

Friendly Faces

Friendly Faces is an inclusive avatar generator. Pick random options or adjust specifics to find an avatar that looks more like you. Then download and share.

Remix Icon

Remix Icon is a set of open source line-style icons in a variety of categories. Use them as part of a consistent design system or as stand-alone elements.

Asian Adventure Icons

Asian Adventure is a colorful set of 76 flat icons that represent Asian culture and elements. Icons comes in AI, SVG and PNG formats.

Tutorial: How to Make a Speech Synthesis Editor

This great – and detailed – tutorial from Smashing Magazine helps you understand the logic behind the technology powering all the voice assistants in our homes. This guide helps you create a “What You Get is What You Hear editor for digital speech synthesis.

Tutorial: How to Create Clipped, Blurred Background Images in CSS

This tutorial takes you through creating seamless blur effects using CSS filters for a trending photo look. The tutorial includes written and video instructions and is easy to follow.

Tutorial: All You Need to Know About Hyphenation in CSS

How do you feel about hyphenation on the web? It can be a somewhat touchy subject. This tutorial by Richard Rutter explains hyphenation dictionaries for the web and related CSS guidelines.

Tutorial: How to Organize Files in a Design Agency

It’s an age-old question: How to you best organize design files? The team at Clay digital agency go behind the curtain on their process, and you can definitely learn from their workflows and file structures.

Generative Poster

Generative Poster is a fun pen that will allow you to adjust parameters and create an abstract poster design quickly. Just adjust the controls to see changes as they happen and keep tweaking until you find the right design.

Lovely Puppy

Lovely Puppy is a light and cheerful display font for children’s or whimsical purposes. The download includes a font duo with the sans serif and script versions as well as a set of doodles and patterns.

Melvick

Melvick is a strong, display sans serif. It has a distinct style with upright letterforms with some disconnected strokes. This typeface includes uppercase characters and numerals.

Public Sans

Public Sans is a strong neutral typeface for various uses. The family includes thin, extra light, light, regular, medium, semibold, bold, extra bold and black variations. Plus, you can join the development on GitHub. The typeface is a variation of Libre Franklin.

Pulpo

Pulpo is a Clarendon style typeface with the skeleton of Century Schoolbook. Longer extenders give text a bit more air to breathe and improve legibility in small text sizes. Despite the strength and sturdiness of the design, each letter shape carries warmth and an echo of the human hand. The familiarity of the letterforms also conceals some nostalgia. The family has 10 styles, ranging from light to black (including italics) and is ideally suited for editorial, advertising and packaging as well as web and app design. A massive body combined with low stroke contrast, emphasizing the horizontal elements, make it very suitable on screen and for small text sizes on newsprint paper.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Get a massive 41% off Corel Painter 2019

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/HCEotnSRmgo/get-41-off-corel-painter-2019

Looking to up your painting game? Corel Painter 2019 will help you create your next masterpiece. Though it typically costs $429, it's currently on sale with 41% off at just $249.

This painting tool is one of our picks for the best software for digital artists. And rightly so. With over 900 different brushes in 25 different types of brush categories, Corel Painter 2019 is a must-have in the arsenal of any digital artist. It boasts the most realistic Natural Media and exclusive particles, pattern pens, thick paint brushes and even more – so anything you dream up you'll be able to paint perfectly. 

Since artists are known to be particular, everything is totally customisable. Import brushes, custom palettes, textures and gradients as you wish. Auto-Painting Panels make prepping, auto-painting and restoring details even easier. And thanks to Corel Painter's multi-core processors and CPUs you'll be able to create your masterpieces faster than before.

Start making masterpieces today with Corel Painter 2019. It's available for $249 here.

Related articles:

Create portrait art in Corel PainterThe 29 best iPhone apps for designers20 illustrators to follow on Instagram