Defining and Measuring Usability and UX. The Big Difference Between Usability and UX



Everyone knows that user-friendly websites and apps are vital for the overall success of a business. We know that design quality indicates credibility and trust and that those things drive results.

We know this.

So how do you know that your site or app is easy to use? What steps do you take to know for sure that your design is driving those results?

This guide will define what usability and UX are (as these terms are often confused) and this guide will also show you how usability and UX can be measured.

Ready? Let’s get started.

Usability is Not UX

We hear the terms often: usability, UX but let’s admit it – although we know they are both important in the design world, we often confuse them.

Usability is about task-based interactions such as navigating a site, filling out a form, checking out at an online store, etc. It’s the ability to do something intuitively and easily.

UX is about how a person feels when they interact with your site or app. Are they encouraged to sign up to your newsletter? Are they moved by the design in the front page? Is the copy engaging or dull?

Let’s dive into some of the details.

What Exactly is Usability?

Designers, developers, and usability experts have racked their brains trying to define usability. The truth is, there is not a universal definition. There are many books and resources on the topic and not one of them is the same.

Jakob Nielsen describe usability with these five qualities or as he calls them, “Usability Goals.”

  1. Usefulness. Although it may seem obvious, you should always be curious and ask: Is this feature useful? Is it redundant? Will it help the user accomplish a task?
  2. Learnability. When a new user comes to your website or app, you want them to easily learn how to get around. What are you doing to make this happen?
  3. Memorability: When users return to the design after a period of not using it, will they remember it?
  4. Errors: What happens when uses make an error? How many errors do users make, and do they eventually find a solution?
  5. Satisfaction. How pleasant is it to use the design? Are users sharing the website? Have you delighted them or did the whole experience cause them frustration?

How Do You Measure Usability?

Trying to test the site or app yourself is not going to work.

The usability.gov website suggests testing to measure usability. You do not need a formal lab, a room with the necessary equipment will suffice. This can also be done remotely.

Here is a list of tests for measuring usability:

Baseline Usability Testing. Baseline usability testing involves watching as people go through a series of steps to use either a website or app and jotting down any problems and their overall satisfaction. The best way to start is by putting together a test plan. With a plan in place, you’ll be able to properly determine what is working and what needs to be changed.

Your test plan should include the following:

  • Scope and Purpose of the Test
  • Schedule and Location
  • Information about the Sessions (Length of session, number of days, etc.,)
  • Equipment (Laptops or mobile devices)
  • Information about the Participants
  • Roles (Who is doing the testing? What is their role?
  • Information about the Tasks (What tasks are you testing?
  • Qualitative Metrics (Here, you should survey participants before and after they perform tasks)
  • Quantitative Metrics (How many successful tasks?)

Other usability tests suggested are:

Focus Groups. Gather a demographically diverse group of people and begin a discussion about your design, it’s features and the overall ease of use.

Interviews. One on-one interviews are beneficial because they offer feedback that is not influenced by the opinions of those in a focus group.

Card Sort Testing. (A method used to help design or evaluate the organization of a site)

Wireframe testing. Wireframe testing evaluates navigation on a site or app.

First Click Testing. By looking at where users are clicking you can make sure they go down the right path.

Surveys. The old-fashioned satisfaction surveys will help you see how the site or app fares in the real world.

And that’s it for usability. Now onto UX.

What Exactly is UX?

The interest in UX has grown heavily in the past couple of years. Research has discovered that the more user-centered sites and apps are the better. Information architects, designers and people in related fields have found out that there is more to the usability of a website or app. Like we discussed before, UX refers to a person’s emotions and attitudes.

The overall user-experience goes beyond practicality. UX involves not only usability, but also marketing, accessibility and more.

Peter Morville, creator of The User Experience Honeycomb explains UX with this diagram:

Useful. Like, Nielsen, Morville agrees that usefulness is important.

Usable. Morville also agrees with Nielsen that usability is needed, however, he argues that usability is not enough.

Desirable. The way something looks to people and how it makes them feel is part of the user-experience. This is where identity, brand and other elements of emotional design.

Findable. Morville advises us to create navigable web sites and locatable objects” to make the-user experience a positive one.

Accessible. Are websites made to be accessible for everyone? Just like buildings are made with ramps and elevators, websites and apps also need to be made for people with special disabilities.

Credible. Credibility is important because it is what leads-users to trust you. This mainly falls into the marketing involved in the website (brand, identity, copy). But this is important because this is where people either trust and believe what we tell them or don’t.

Valuable. Providing value to users helps build trust and strengthen loyalty. Users are skeptical and by delivering value you are telling pulling them in.

In short, UX it’s not just about whether something is practical and it works, but it’s also about whether people have an enjoyable experience.

How Do You Measure UX?

“As practitioners, we can’t be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our knowledge of craft + medium to define innovative solutions that are more useful. – Peter Morville

UX measures the overall satisfaction of the user and their feelings about their experience on your site or app.

Do you remember visiting hosting websites five years ago? Do you recall ever becoming lost in the sea of technical information? More and more hosting companies are beginning to value the importance of UX by making their sites welcoming and user-friendly. These companies understand that with hosting being something so technical and obscure to the layperson, it should be balanced with a pleasant and inviting feel to draw them in. UX is about considering people’s feelings.

Because UX deals with more than just usability, it involves the same usability testing methods we mentioned earlier in addition to some additional ones. The usability.gov website suggests the following:

Heuristic Evaluation/Expert Review. This is a website audit designed to identify usability problems in an online product or service. The review is carried out by a small group of usability experts.

Parallel Design. Parallel design is when you have different design teams work on alternative designs at the same time, and see what they come up with. The key here is to create as much diversity as possible and discuss their concepts after they finished.

Personas. Personas are different identities you build or archetypes) for possible users. Write what you anticipate their needs and wants are, and design with them in mind.

Prototyping. Create a prototype or a sample version of the final design, and test it prior to launch.

System Usability Scale. This consists of a 10-item questionnaire with five response options for respondents; from Strongly agree to Strongly disagree.

Tasks Analysis. Task analysis is analyzing what the user is doing step-by-step by simply observing them.

Use Case. A use case is a written description of the steps you predict users will perform tasks on your site or app. After users have completed the tests, you can check your written descriptions for insights.

Wrapping Things Up

It’s a lot to take in. There was a lot covered in one single article.

You will never know for sure what every single user thinks about your site or app. In fact, you will never be able to please everyone.

But what you can do is improve and equip yourself with usability and UX tests and tools to advance your knowledge. These will steer your creativity in a direction that will deliver the best results it can. And, continue asking questions. That’s always key.

Maybe you can’t make everyone happy, but you can certainly delight enough folks to drive the results you’re looking for.

Read More at Defining and Measuring Usability and UX. The Big Difference Between Usability and UX

Facebook Chatbots: Why and How to Use Them


Bringing the Turing Test to social media

The post Facebook Chatbots: Why and How to Use Them appeared first on Official Wix Blog | Web Design & Small Business Tips to Promote Your Site.

Responsive Web Design: Building a Responsive Menu



In this responsive web design tutorial, you’ll learn how to build a responsive menu. You’ll learn how to target different breakpoints with media queries, how to write the CSS to “flip” the menu from vertical to horizontal view at those breakpoints, and how to use jQuery to create a responsive navigation icon that toggles the mobile menu.

Here’s the special discount link for Rob’s course:

Get the source code in the Code Snippets section here:

Training Center:

Subscribe on YouTube:

Subscribe on SoundCloud:

Subscribe on iTunes:

-~-~~-~~~-~~-~-
Please watch: “I just got called on my Upwork BS”

-~-~~-~~~-~~-~-

source

A Review of the CAbi Income Opportunity

I had heard of the CAbi clothing company and that they offered a network marketing plan selling their clothing as a home business, so thought I would check it out and write a review on it.

I first wanted to know about Carol Anderson, the designer. She has been designing clothes for over 25 years with her personal touch. She is a designer that pays a lot of attention to the details and unique styling in her line of clothing.

She started in a garage in Burbank CA in 1977. She loved designing clothes and told some of her friends that she wanted to design her own line of clothing. She was then just out of graduate school when she and her friend Jan January put their $800 together and started a workshop in her garage. They believed that their concept would sell. They focused on great fashion, excellent fit and quality.

In 2001 Carol took her clothing line out of the stores and started to market them with a MLM. She is calling her company CAbi (Carol Anderson by Invitation). The company is based in Rancho Dominguez, California. Carol Anderson’s clothing designs are sold exclusively in homes by CAbi Independent Sales Consultants. From the website I was able to gather that CAbi is enabling women the opportunity for women across the country to help them to make a career that will fit any lifestyle.

I could not find anything else on the career opportunity itself other than the consultant will host clothing shows in the homes of her customers. The consultant, from what I have read in my search, does have to come up with quite an investment to get started and it will take about 3 seasons to really start seeing a great profit. She sets up all the clothing in her inventory to allow the women to try them on. It is hard when there are women of so many different sizes and needs to have something for all of them.

There was a blog that I had come across where she had done an interview with a consultant from the company, but the company found out and made her take it off. The blog was very positive and actually was helping and bringing great advertising for the website and their company. But whether it was the company or they not wanting a consultant representing them, we don’t know. Apparently that consultant is no longer with the company.

They have a website but it runs very slow. The website really does not show anything other than a few models in a few outfits. It is done is a flash video form and takes so long to switch pages. There is only a small paragraph on the career opportunity and the main page that talks about Carol, the designer, does not even finish the line at the bottom of the page.

I came across another blog on CAbi that stated about some information regarding the number of associates being limited by zip code. It seems that Carol does not want this to grow too big, maybe to keep her line limited for the smaller market, not the masses.

Sorry to say I don’t have much more information than this. Information is pretty hard to find on the Internet. If this is the company for you, you may want to call the company directly, that may be the only way to find out anymore.



Source by Brian Garvin

Web Design, Graphic Design and Advertising – Differences

Difference between Graphic Design, Web Design and Advertising Design.

Based on the practices of these years and these last two months, I’ve noticed that when we offer our services as Web designer tend to confuse the customer by our very Confucianism in terms of the concepts of web design.

For this reason, I decided to write this article under the title of web Design, the title will probably not say anything, but I hope to get a lot of doubts about the concepts are concerned.

3 are the concepts that I am going to try, and I’m going to write my own words and according to my experience.

We started with Web Design:

Probably not need much eplicacion in which we do not have many doubts, however we tend to confuse Web Design India with Web Development, as well?, Simple, we offer Web design when in reality we are referring to sites that use only static HTML, something CSS and a lot of Photoshop.

In contrast, Web Development includes the above with the particularity that also adds PHP as a programming language to interact with the data base which usually is in MySql servers to Linux, or asp or aspx pages as a programming language and Sql as Bases Data for Windows Servers. Come right?

In summary for this section:

If the server is using Linux PHP Mysql; If the server is Windows will use ASP SQL.
If the site is static does not matter because the server will use HTML CSS which is supported on any of the above dimension servers.

Graphic Design:

The graphic design includes a wide range of services, ranging from the design of business cards, brochures, flyers, folders executive, and so on. Until the gigantografía (roadside billboards).

In the graphic design elements used to make nice to see the job, a photo downloaded from the Internet, background colors, letters that make the game, and so on. But this is pure Graphic Design, and the practice is more common among designers.

However, when a customer asks us to include in all their gear elements of its corporate identity, the thing changes and becomes:

Marketing Material

For the Marketing Material must meet the standards of the client, respect the tipografia, colors, sizes, relationships, separations and other items set forth in its Corporate Identity.

It is no coincidence that Major Companies invest thousands of dollars in making its corporate identity, these are large volume of documents that seek to standardize both the tape and the arts that the customer needs and will need.

For the preparation of a Corporate Identity intervene marketers (Graduates in Marketing) and study hard but the results are admirable, then that the marketers completed its work and entegó document to the customer, the latter will pass the document to your Publicist who is responsible for what is established in that document is fulfilled.

Therefore we can say that generally perform work of Graphic Design merely, but if it concerns the standards set in his client’s Corporate Identity and moved on to talk about Advertising Design Advertising and Graphic Design, as you want to call.

Besides that is heard more attractive offer “Graphic Design Advertising.”

I am sure that these concepts will help us better understand and provide better services to our customers or small businesses.



Source by WDO Tech

Creating Yin and Yang Loaders On the Web


I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos.

Before anything else, this is the animation we’re trying to achieve here:

Animated gif. The yin and yang symbol is rotating while its two lobes alternate increasing and decreasing in size - whenever one is increasing, it squishes the other one down.
The desired result: a rotating ☯ symbol, with its two lobes increasing and decreasing in size.

No matter what method we choose to use to recreate the above animation, we always start from the static yin and yang shape which looks as illustrated below:

The static yin and yang symbol.
The static yin and yang symbol (live demo).

The structure of this starting shape is described by the following illustration:

The structure of the yin and yang symbol. The two lobes are circular arcs (half circles) whose radii are half the radius of the big circle enclosing the symbol. The two small circles are in the middle of the two lobes and their diameters are half of those of the half circle lobes.
The structure of the static symbol (live demo).

First off, we have a big circle of diameter d. Inside this circle, we tightly fit two smaller circles, each one of them having a diameter that’s half the diameter of our initial big circle. This means that the diameter for each of these two smaller circles is equal to the big circle’s radius r (or .5*d). Inside each of these circles of diameter r we have an even smaller concentric circle. If we are to draw a diameter for the big circle that passes through all the central points of all these circles – the line segment AB in the illustration above, the intersections between it and the inner circles split it into 6 equal smaller segments. This means that the diameter of one of the smallest circles is r/3 (or d/6) and its radius is r/6.

Knowing all of this, let’s get started with the first method!

Plain old HTML + CSS

In this case, we can do it with one element and its two pseudo-elements. The how behind building the symbol is illustrated by the following animation (since the whole thing is going to rotate, it doesn’t matter if we switch axes):

See the Pen by thebabydino (@thebabydino) on CodePen.

The actual element is the big circle and it has a top to bottom gradient with a sharp transition right in the middle. The pseudo-elements are the smaller circles we place over it. The diameter of one of the smaller circles is half the diameter of the big circle. Both smaller circles are vertically middle-aligned with the big circle.

So let’s start writing the code that can achieve this!

First of all, we decide upon a diameter $d for the big circle. We use viewport units so that everything scales nicely on resize. We set this diameter value as its width and height, we make the element round with border-radius and we give it a top to bottom gradient background with a sharp transition from black to white in the middle.

$d: 80vmin;

.☯ {
  width: $d; height: $d;
  border-radius: 50%;
  background: linear-gradient(black 50%, white 0);
}

So far, so good:

See the Pen by thebabydino (@thebabydino) on CodePen.

Now let’s move on to the smaller circles which we create with pseudo-elements. We give our element display: flex and make its children (or pseudo-elements in our case) middle aligned with it vertically by setting align-items: center. We make these pseudo-elements have half the height (50%) of their parent element and make sure that, horizontally, they each cover half of the big circle. Finally, we make them round with border-radius, give them a dummy background and set the content property just so that we can see them:

.☯ {
  display: flex;
  align-items: center;
  /* same styles as before */
	
  &:before, &:after {
    flex: 1;
    height: 50%;
    border-radius: 50%;
    background: #f90;
    content: '';
  }
}

See the Pen by thebabydino (@thebabydino) on CodePen.

Next, we need to give them different backgrounds:

.☯ {
  /* same styles as before */
	
  &:before, &:after {
    /* same styles as before */
    background: black;
  }
	
  &:after { background: white }
}

Now we’re getting somewhere!

See the Pen by thebabydino (@thebabydino) on CodePen.

All that’s left to do before we get the static symbol is to give these two pseudo-elements borders. The black one should get a white border, while the white one should get a black border. These borders should be a third of the pseudo-element’s diameter, which is a third of half the diameter of the big circle – that gives us $d/6.

.☯ {
  /* same styles as before */
	
  &:before, &:after {
    /* same styles as before */
    border: solid $d/6 white;
  }
	
  &:after {
    /* same styles as before */
    border-color: black;
  }
}

However, the result doesn’t look quite right:

See the Pen by thebabydino (@thebabydino) on CodePen.

This is because, vertically, the border adds up to the height instead of being subtracted out of it. Horizontally, we haven’t set a width, so it gets subracted from the available space. We have two fixes possible here. One would be to set box-sizing: border-box on the pseudo-elements. The second one would be to change the height of the pseudo-elements to $d/6 – we’ll go with this one:

See the Pen by thebabydino (@thebabydino) on CodePen.

We now have the basic shape, so let’s move on to the animation! This animation involves going from the state where the first pseudo-element has shrunk to let’s say half its original size (which would mean a scaling factor $f of .5) while the second pseudo-element has expanded to take up all available space left – meaning to the diameter of the big circle (which is twice its original size) minus the diameter of the first circle (which is $f of its original size) to the state where the second pseudo-element has shrunk to $f of its original size and the first pseudo-element has expanded to 2 - $f of its original size. The first pseudo-element circle scales relative to its leftmost point (so we need to set a transform-origin of 0 50%), while the second one scales relative to its rightmost point (100% 50%).

$f: .5;
$t: 1s;

.☯ {
  /* same styles as before */
	
  &:before, &:after {
    /* same styles as before */
    transform-origin: 0 50%;
    transform: scale($f);
    animation: s $t ease-in-out infinite alternate;
  }
	
  &:after {
    /* same styles as before */
    transform-origin: 100% 50%;
    animation-delay: -$t;
  }
}

@keyframes s { to { transform: scale(2 - $f) } }

We now have the shape changing animation we’ve been after:

See the Pen by thebabydino (@thebabydino) on CodePen.

The last step is to make the whole symbol rotate:

$t: 1s;

.☯ {
  /* same styles as before */
  animation: r 2*$t linear infinite;
}

@keyframes r { to { transform: rotate(1turn) } }

And we got the final result!

However, there’s still one more thing we can do to make the compiled CSS more efficient: eliminate redundancy with CSS variables!

white can be written in HSL format as hsl(0, 0%, 100%). The hue and the saturation don’t matter, any value that has the lightness 100% is white, so we just set them both to 0 to make our life easier. Similarly, black can be written as hsl(0, 0%, 0%). Again, the hue and saturation don’t matter, any value that has the lightness 0% is black. Given this, our code becomes:

.☯ {
  /* same styles as before */
	
  &:before, &:after {
    /* same styles as before */
    border: solid $d/6 hsl(0, 0%, 100% /* = 1*100% = (1 - 0)*100% */);
    transform-origin: 0 /* = 0*100% */ 50%;
    background: hsl(0, 0%, 0% /* 0*100% */);
    animation: s $t ease-in-out infinite alternate;
    animation-delay: 0 /* = 0*-$t */;
  }
	
  &:after {
    /* same styles as before */
    border-color: hsl(0, 0%, 0% /* = 0*100% = (1 - 1)*100% */);
    transform-origin: 100% /* = 1*100% */ 50%;
    background: hsl(0, 0%, 100% /* = 1*100% */);
    animation-delay: -$t /* = 1*-$t */;
  }
}

From the above, it results that:

  • the x component of our transform-origin is calc(0*100%) for the first pseudo-element and calc(1*100%) for the second one
  • our border-color is hsl(0, 0%, calc((1 - 0)*100%)) for the first pseudo-element and hsl(0, 0%, calc((1 - 1)*100%)) for the second one
  • our background is hsl(0, 0%, calc(0*100%)) for the first pseudo-element and hsl(0, 0%, calc(1*100%)) for the second one
  • our animation-delay is calc(0*#{-$t}) for the first pseudo-element and calc(1*#{-$t}) for the second one

This means we can use a custom property that acts as a switch and is 0 for the first pseudo-element and 1 for the second:

.☯ {
  /* same styles as before */
	
  &:before, &:after {
    /* same styles as before */
    --i: 0;
    border: solid $d/6 hsl(0, 0%, calc((1 - var(--i))*100%));
    transform-origin: calc(var(--i)*100%) 50%;
    background: hsl(0, 0%, calc(var(--i)*100%));
    animation: s $t ease-in-out calc(var(--i)*#{-$t}) infinite alternate;
  }
	
  &:after { --i: 1 }
}

This eliminates the need for witing all these rules twice: all we need to do now is flip the switch! Sadly, this only works in WebKit browsers for now because Firefox and Edge don’t support using calc() as an animation-delay value and Firefox doesn’t support using it inside hsl() either.

Canvas + JavaScript

While some people might think this method is overkill, I really like it because it requires about the same amount of code as the CSS one, it has good support and good performance.

We start with a canvas element and some basic styles just to put it in the middle of its container (which is the body element in our case) and make it visible. We also make it circular with border-radius so that we simplify our job when drawing on the canvas.

$d: 80vmin;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: lightslategray;
}

canvas {
  width: $d; height: $d;
  border-radius: 50%;
  background: white;
}

So far, so good – we have a white disc:

See the Pen by thebabydino (@thebabydino) on CodePen.

Alright, now let’s move on to the JavaScript part! Before anything else, we need to get the canvas element, the 2D context and set the canvas element’s width and height attributes (things we draw on the canvas would appear stretched otherwise). Then, we’re going to need to have a radius for our big circle. We get this radius to be half the computed size of the canvas element and, after we do that, we translate our context such that we bring the 0,0 point of our canvas dead in the middle (it’s originally in the top left corner). We make sure we recompute the radius and the width and height attributes on each resize because, in the CSS, we made the canvas dimensions depend on the viewport.

const _C = document.querySelector('canvas'), 
      CT = _C.getContext('2d');

let r;

function size() {
  _C.width = _C.height = Math.round(_C.getBoundingClientRect().width);
	
  r = .5*_C.width;
	
  CT.translate(r, r);
};

size();

addEventListener('resize', size, false);

After we’ve done this, we can move on to drawing on the canvas. Draw what? Well, a shape made out of three arcs, as shown in the illustration below:

Illustration showing how half of the main shape of the symbol is made up of three half circle arcs. The first arc is half a circle following the contour of the symbol's outer circle shape, clockwise from -180° to 0°. The second one is another half a circle of half the radius of the first, going clockwise from the point where the previous arc started, 0° on its smaller support circle to 180° on the same circle. The third one is another half circle, going anticlockwise from the point where the previous arc ended, 0° on its support circle, to -180° on its support circle.
The structure of the three arc shape (live demo).

In order to draw an arc on a 2D canvas, we need to know a few things. First off, it’s the coordinates of the central point of the circle this arc belongs to. Then we need to know the radius of this circle and the angles (relative to the x axis of the local coordinate system of the circle) at which the start and end points of the arc are located. Finally, we need to know if we go from the start point to the end point clockwise or not (if we don’t specify this, the default is clockwise).

The first arc is on the big circle whose diameter is equal to the canvas dimensions and, since we’ve placed the 0,0 point of the canvas right in the middle of this circle, this means we know both the first set of coordinates (it’s 0,0) and the circle radius (it’s r). The start point of this arc is the leftmost point of this circle – this point is at -180° (or ). The end point is the rightmost point of the circle, which is at (also 0 in radians). If you need a refresher of angles on a circle, check out this helper demo.

This means we can create a path and add this arc to it and, in order to see what we have so far, we can close this path (which in this case means connecting the end point of our arc to the start point with a straight line) and fill it (using the default fill, which is black):

CT.beginPath();
CT.arc(0, 0, r, -Math.PI, 0);

CT.closePath();
CT.fill();

The result can be seen in the following Pen:

See the Pen by thebabydino (@thebabydino) on CodePen.

Now let’s move on to the second arc. The coordinates of the central point of the circle it’s on are .5*r,0 and its radius is .5*r (half the radius of the big circle). It goes from 0 to π, moving clockwise in doing so. So the arc we add to out path before closing it is:

CT.arc(.5*r, 0, .5*r, 0, Math.PI);

After adding this arc, our shape becomes:

See the Pen by thebabydino (@thebabydino) on CodePen.

Now we have one more arc left to add. The radius is the same as for the previous one (.5*r) and the first set of coordinates is -.5*r,0. This arc goes from 0 to and it’s the first arc not to go clockwise, so we need to change that flag:

CT.arc(-.5*r, 0, .5*r, 0, -Math.PI, true);

We now have the shape we wanted:

See the Pen by thebabydino (@thebabydino) on CodePen.

Next, we’re going to add the black circle to this path. We’re not going to create another path because the aim is to group all shapes with the same fill into the same path for better performance. Calling fill() is expensive, so we don’t want to do it more often than we really need to.

A circle is just an arc from to 360° (or from 0 to 2*π). The central point of this circle coincides to that for the last arc we’ve drawn (-.5*r, 0) and its radius is a third of that of the previous two arcs.

CT.arc(-.5*r, 0, .5*r/3, 0, 2*Math.PI);

Now we’re getting really close to having the full symbol:

See the Pen by thebabydino (@thebabydino) on CodePen.

All that’s left to do is create a white circle, symmetrical to the black one with respect to the y axis. This means need to switch to a white fill, start a new path and then add an arc to it using almost the same command we used to add the black circle shape – the only difference is that we reverse the sign of the x coordinate (this time, it’s +, not -). After that, we close that path and fill it.

CT.fillStyle = 'white';
CT.beginPath();
CT.arc(.5*r, 0, .5*r/3, 0, 2*Math.PI);
CT.closePath();
CT.fill();

We now have the static symbol!

See the Pen by thebabydino (@thebabydino) on CodePen.

For the animation, we want to go from the state where the first of the smaller arcs has shrunk to half is original radius (so we use a scaling factor F of .5) and the other one has expanded accordingly to the state where these initial radii are reversed.

In the initial state, given that the radius of the smaller arcs is initially .5*r, then the radius of the first of them after being scaled down by a factor F is r1 = F*.5*r. Since the radii of the smaller circles need to add up to the radius of the big circle r, we have that the radius of the second one of the smaller circles is r2 = r - r1 = r - F*.5*r.

In order to get the x coordinate of the origin of the first smaller arc for the initial state, we need to subtract its radius from the x coordinate of the point it starts at. This way, we get that this coordinate is r - r1 = r2. Similarly, in order to get the x coordinate of the origin of the second smaller arc, we need to add up its radius to the coordinate of the point it ends at. This way, we get that this coordinate is -r + r2 = -(r - r2) = -r1.

Initial vs. final state of the animation. The initial state shows the first lobe (second arc of the three arc shape) shrunken to the minimum possible (its radius being F*.5*r, where F is a value between 0 and 1), while the other lobe has expanded to fill the remaining state. In the final state, things are reversed: the first lobe has expanded, while the second one has shrunk.
The initial vs. the final state of the animation (live demo).

For the final state, the values of the two radii are reversed. The second one is F*.5*r, while the first one is r - F*.5*r.

With every frame of our animation, we increase the current radius of the first smaller arc from the minimum value (F*.5*r) to the maximum value (r - F*.5*r) and then we start decreasing it to the minimum value and then the cycle repeats while also scaling the radius of the other smaller arc accordingly.

In order to do this, we first set the minimum and maximum radius in the size() function:

const F = .5;

let rmin, rmax;

function size() {
  /* same as before */
  rmin = F*.5*r;
  rmax = r - rmin;
};

At any moment in time, the current radius of the first of the smaller arcs is k*rmin + (1 - k)*rmax, where this k factor keeps going from 1 to 0 and then back up to 1. This sounds similar to the cosine function on the [0, 360°] interval. At , the value of the cosine is 1. Then it starts decreasing and it keeps doing so until it gets to 180°, when it reaches its minimum value of -1, after which the value of the function starts increasing again until it gets to 360°, where it’s again 1:

See the Pen by thebabydino (@thebabydino) on CodePen.

Alright, but the values of the cosine function are in the [-1, 1] interval and we need a function that gives us values in the [0, 1] interval. Well, if we add 1 to the cosine, then we shift the whole graph up and the values are now in the [0, 2] interval:

See the Pen by thebabydino (@thebabydino) on CodePen.

[0, 2] isn’t [0, 1], so what we still need to do here is divide the whole thing by 2 (or multiply it with .5, same thing). This squishes our graph to the desired interval.

See the Pen by thebabydino (@thebabydino) on CodePen.

Good, but what’s up with that angle? We don’t have an angle going from to 360°. If we’re going to use requestAnimationFrame, we just have the number of the current frame, which starts at 0 and then keeps going up. Well, at the beginning, we set a total number of frames T for one animation cycle (the first arc going from the minimum radius value to the maximum radius value and then back again).

For every frame, we compute the ratio between the number of the current frame (t) and the total numeber of frames. For one cycle, this ratio goes from 0 to 1. If we multiply this ratio with 2*Math.PI (which is the same as 360°), then the result goes from 0 to 2*Math.PI over the course of a cycle. So this is going to be our angle.

const T = 120;

(function ani(t = 0) {
  let k = .5*(1 + Math.cos(t/T*2*Math.PI)), 
      cr1 = k*rmin + (1 - k)*rmax, cr2 = r - cr1;
	
})();

The next step is to put inside this function the code that actually draws our symbol. The code for beginning, closing, filling paths, changing fills stays the same, as does the code needed for creating the big arc. The things that change are:

  • the radii of the smaller arcs – they’re cr1 and cr2 respectively
  • the x coordinates of the central points for the smaller arcs – they’re at cr2 and -cr1 respectively
  • the radii of the black and white circles – they’re cr2/3 and cr1/3 respectively
  • the x coordinates of the central points of these circles – they’re at -cr1 and cr2 respectively

So our animation function becomes:

const T = 120;

(function ani(t = 0) {
  let k = .5*(1 + Math.cos(t/T*2*Math.PI)), 
      cr1 = k*rmin + (1 - k)*rmax, cr2 = r - cr1;
	
  CT.beginPath();
  CT.arc(0, 0, r, -Math.PI, 0);
  CT.arc(cr2, 0, cr1, 0, Math.PI);
  CT.arc(-cr1, 0, cr2, 0, -Math.PI, true);
  CT.arc(-cr1, 0, cr2/3, 0, 2*Math.PI);
  CT.closePath();
  CT.fill();

  CT.fillStyle = 'white';
  CT.beginPath();
  CT.arc(cr2, 0, cr1/3, 0, 2*Math.PI);
  CT.closePath();
  CT.fill();
})();

This gives us the initial state of the animation:

See the Pen by thebabydino (@thebabydino) on CodePen.

Before we actually start animating the radii of the arcs, we still need to take care of a couple more things. First of all, if we start the animation right now, we’re just going to be drawing how the shape looks for each frame over what we’ve drawn for the previous frames, which is going to create one big mess. In order to avoid this, we need to clear the canvas for each frame, before drawing anything on it. What we clear is the visible part, which is inside the rectangle of canvas dimensions whose top left corner is at -r,-r:

CT.clearRect(-r, -r, _C.width, _C.width);

The second little problem we need to fix is that we’re switching to a white fill, but at the start of the next frame, we need a black one. So we need to make this switch for each frame before the beginning of the first path:

CT.fillStyle = 'black';

Now we can actually start the animation:

requestAnimationFrame(ani.bind(this, ++t));

This gives us the morphing animation, but we still need to rotate the whole thing. Before tackling that, let’s look at the formula for k once more:

let k = .5*(1 + Math.cos(t/T*2*Math.PI))

T and 2*Math.PI are constant throughout the animation, so we can just take that part out and store it as a constant angle A:

const T = 120, A = 2*Math.PI/T;

(function ani(t = 0) {
  let k = .5*(1 + Math.cos(t*A));

  /* same as before */
})();

Now for every frame, we can also rotate the context by A after clearing the canvas.

CT.rotate(A);

This rotation keeps adding up with every frame and we now have the rotating and morphing animation we’ve been after.

SVG + JavaScript

We start with an SVG element and pretty much the same CSS as in the canvas case:

$d: 80vmin;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: lightslategray;
}

svg {
  width: $d; height: $d;
  border-radius: 50%;
  background: white;
}

This gives us a white disc:

See the Pen by thebabydino (@thebabydino) on CodePen.

Not too exciting, so let’s move on to drawing something on the SVG canvas. Just like in the canvas case, we’ll be drawing a path made up of the same three arcs (the big one with a radius that’s half the size of the SVG viewBox and the two smaller ones with a radius that’s half of that of the big arc in the static case) and two small circles (with a radius that’s a third of that of the smaller arc they share their central point with).

So we start by picking a radius r value and using it to set the viewBox on the svg element:

- var r = 1500;

svg(viewBox=[-r, -r, 2*r, 2*r].join(' '))

The next step is to add the path made up of the three arcs. Creating a path in SVG is a bit different from canvas. Here, the shape is described by the path data d attribute, which, in our case, is made up of:

  • a “move to” (M) command after which we specify the coordinates of the start point of our path (also the start point of the big arc in this case)
  • an “arc to” (A) command for each of our arcs after which we describe our arcs; each of these arcs starts from the end point of the previous arc or, in the case of the first arc, from the start point of our path

Let’s take a closer look at the components of an “arc to” (A) command:

  • the radius of our arc along the x axis of its system of coordinates – this is equal to r in the case of the big arc and to .5*r in the case of the two smaller ones
  • the radius of our arc along the y axis of its system of coordinates – this is equal to the one along the x axis in the case of circular arcs as we have here (it’s only different for elliptical arcs, but that’s beyond the scope of this article)
  • the rotation of our arc’s system of coordinates – this only influences the arc’s shape in the case of elliptical arcs, so we can safely always take it 0 to simplify things for circular arcs
  • the large arc flag – this is 1 if our arc is greater than half a circle and 0 otherwise; since our arcs are exactly half a circle, they’re not greater than haf a circle, so this is always 0 in our case
  • the sweep flag – this is 1 if the arc goes clockwise between its start and its end point and 0 otherwise; in our case, the first two arcs go clockwise, while the third doesn’t, so the values we use for the three arcs are 1, 1 and 0
  • the x coordinate of the arc’s end point – this is something we need to determine for each arc
  • the y coordinate of the arc’s end point – also something we need to determine for each arc

At this point, we already know most of what we need. All we still have to figure out are the coordinates of the arcs’ endpoints. So let’s consider the following illustration:

Illustration showing how half of the main shape of the symbol is made up of three half circle arcs. The first arc is half a circle following the contour of the symbol's outer circle shape, clockwise from (-r,0) to (r,0). The second one is another half a circle of half the radius of the first, going clockwise from the point where the previous arc started to (0,0). The third one is another half circle of the same radius as the previous one, going anticlockwise from the point where the previous arc ended to (-r,0).
The structure of the three arc shape with coordinates of arc endpoints (live demo).

From the illustration above we can see that the first arc (the big one) starts at (-r,0) and ends at (r,0), the second one ends at 0,0 and the third one ends at (-r,0) (also the start point of our path). Note that the y coordinates of all these points remain 0 even if the smaller arcs’ radii change, but the x coordinate of the second arc’s endpoint only happens to be 0 in this case when the radii of the smaller arcs are exactly half of the big one. In the general case, it’s r - 2*r1, where r1 is the radius of the second arc (the first of the smaller ones). This means we can now create our path:

- var r1 = .5*r, r2 = r - r1;

path(d=`M${-r} 0
        A${r} ${r} 0 0 1 ${r} 0
        A${r1} ${r1} 0 0 1 ${r - 2*r1} 0
        A${r2} ${r2} 0 0 0 ${-r} 0`)

This gives us the three arc shape we’ve been after:

See the Pen by thebabydino (@thebabydino) on CodePen.

Now let’s move on to the small circles. We already know the coordinates of their central points and their radii from the canvas method.

circle(r=r1/3 cx=r2)
circle(r=r2/3 cx=-r1)

By default, all these shapes have a black fill so we need to explicitly set a white one on the circle at (r2,0):

circle:nth-child(2) { fill: white }

We now have the static shape!

See the Pen by thebabydino (@thebabydino) on CodePen.

Next, we’re going to animate the shape of our path and the size and position of our two small circles using JavaScript. This means that the first thing we do is get these elements, get the radius R of the big circle and set a scaling factor F that gives us the minimum radius (RMIN) down to which the arcs can be scaled. We also set a total number of frames (T) and a unit angle (A).

const _P = document.querySelector('path'), 
      _C = document.querySelectorAll('circle'), 
      _SVG = document.querySelector('svg'), 
      R = -1*_SVG.getAttribute('viewBox').split(' ')[0], 
      F = .25, RMIN = F*R, RMAX = R - RMIN, 
      T = 120, A = 2*Math.PI/T;

The animation function is pretty much the same as in the canvas case. The only thing that’s different is the fact that now, in order to change the path shape, we change its d attribute and, in order to change the small circles’ radii and positions, we change their r and cx attributes. But everything else works exactly the same way:

(function ani(t = 0) {
  let k = .5*(1 + Math.cos(t*A)), 
      cr1 = k*RMIN + (1 - k)*RMAX, cr2 = R - cr1;
	
  _P.setAttribute('d', `M${-R} 0
                        A${R} ${R} 0 0 1 ${R} 0
                        A${cr1} ${cr1} 0 0 1 ${R - 2*cr1} 0
                        A${cr2} ${cr2} 0 0 0 ${-R} 0`);
  _C[0].setAttribute('r', cr1/3);
  _C[0].setAttribute('cx', cr2);
  _C[1].setAttribute('r', cr2/3);
  _C[1].setAttribute('cx', -cr1);
	
  requestAnimationFrame(ani.bind(this, ++t));
})();

This gives us the morphing shape:

See the Pen by thebabydino (@thebabydino) on CodePen.

There’s just one more thing to take care of and that’s the rotation of the whole symbol, which we set on the _SVG element:

let ca = t*A;

_SVG.style.transform = `rotate(${+ca.toFixed(2)}rad)`;

And we now have the desired result with SVG and JavaScript as well!

SVG + CSS

There’s one more method of doing this, although it involves changing things like the path data from CSS, which is something only Blink browsers support at this point (and they’re not even matching the latest spec).

It’s also a bit breakable because we need to have the same radius value both in the SVG viewBox attribute and as a Sass variable.

- var r = 1500;

svg(viewBox=[-r, -r, 2*r, 2*r].join(' '))
  path
  circle
  circle
$d: 65vmin;
$r: 1500;
$r1: .5*$r;
$r2: $r - $r1;
$rmin: .25*$r;
$rmax: $r - $rmax;

We could access the value of this radius from the CSS, but only as a custom property, if we were to do something like this:

- var r = 1500;

svg(viewBox=[-r, -r, 2*r, 2*r].join(' '))
  style :root { --r: #{r} }

However, while this may be very helpful in some cases, it is useless here, as we currently have no way of putting CSS variables into the path data string we build with Sass. So we’re stuck with having to set the same value both in the viewBox attribute and in the Sass code.

The basic styles are the same and we can create the path data with Sass in a way that’s similar to the Pug method:

$r: 1500;
$r1: .5*$r;
$r2: $r - $r1;

path {
  $data: 'M#{-$r} 0' + 
         'A#{$r} #{$r} 0 0 1 #{$r} 0' +
         'A#{$r1} #{$r1} 0 0 1 #{$r - 2*$r1} 0' + 
         'A#{$r2} #{$r2} 0 0 0 #{-$r} 0';
  d: path($data);
}

This gives us our three arcs shape:

Screenshot of the three arcs shape
The three arcs shape (live demo, Blink only).

For the two small circles, we set their radii and positions along the x axis. We also need to make sure one of them is white:

circle {
  r: $r1/3;
  cx: $r2;
	
  &:nth-child(2) { fill: white }
	
  &:nth-child(3) {
    r: $r2/3;
    cx: -$r1
  }
}

We now have the static shape:

Screenshot of the static yin and yang shape.
The static yin and yang shape (live demo, Blink only).

In order to get the effect we’re after, we need the following animations:

  • a morphing animation of the path shape, where the radius of the first of the smaller arcs goes from the minimum possible radius ($rmin: .25*$r) to the maximum possible one ($rmax: $r - $rmin) and then back, while the radius of the last arc goes from $rmax to $rmin and back again; this can be done with a keyframe animation from one extreme to the other and then using the alternate value for animation-direction
  • another alternating animation that scales the radius of the first small circle from $rmin/3 up to $rmax/3 and then back down to $rmin/3 again; the second small circle uses the same animation only delayed by the value of a normal animation-duration
  • a third alternating animation that moves the central points of the two small circles back and forth; in the case of the first (white) small circle, it moves from $rmax down to $rmin; in the case of the second (black) circle, it goes from -$rmin down to -$rmax; what we can do here to unify them is use a CSS variable as a switch (it only works in WebKit browsers, but setting the path data or the circle radii or offsets from the CSS doesn’t have better support either)

So let’s first see the morphing @keyframes. These are created by setting pretty much the same path data as before, only replacing $r1 with $rmin and $r2 with $rmax for the 0% keyframe and the other way around for the 100% one:

@keyframes m {
  0% {
    $data: 'M#{-$r} 0' + 
           'A#{$r} #{$r} 0 0 1 #{$r} 0' +
           'A#{$rmin} #{$rmin} 0 0 1 #{$r - 2*$rmin} 0' + 
           'A#{$rmax} #{$rmax} 0 0 0 #{-$r} 0';
    d: path($data);
  }
  100% {
    $data: 'M#{-$r} 0' + 
           'A#{$r} #{$r} 0 0 1 #{$r} 0' +
           'A#{$rmax} #{$rmax} 0 0 1 #{$r - 2*$rmax} 0' + 
           'A#{$rmin} #{$rmin} 0 0 0 #{-$r} 0';
    d: path($data);
  }
}

Now we just need to set this animation on the path element:

$t: 1s;

path { animation: m $t ease-in-out infinite alternate }

And the shape morphing part works!

Animated gif. Shows the three arcs shape morphing from the state where the first lobe is the minimal one to the state where the second one is minimal.
The three arcs shape morphing (live demo, Blink only).

Next step is to move on to scaling and moving the two small circles. The scaling @keyframes follow the same pattern as the morphing ones. The radius value is $rmin/3 at 0% and $rmax/3 at 100%:

@keyframes s {
    0% { r: $rmin/3 }
  100% { r: $rmax/3 }
}

We set this animation on the circle elements:

circle { animation: s $t ease-in-out infinite alternate }

And now the radii of the two small circles are animated:

Animated gif. Here, the radii of the two small circles are also animated from their minimum to their maximum size and back.
The three arcs shape morphing and the small circles scaling (live demo, Blink only).

It’s a start, but we have a number of problems here. First of all, the second small circle should decrease in size when the first one is growing bigger and the other way around. We fix this by setting an animation-delay that depends on a CSS variable we initially set to 0 and then switch to 1 on the second small circle:

circle {
  --i: 0;
  animation: s $t ease-in-out calc(var(--i)*#{$t}) infinite alternate
	
  &:nth-child(3) { --i: 1 }
}

As mentioned before, using calc() as an animation-delay value only works in WebKit browsers, but setting r from the CSS has even poorer support, so the animation-delay is not the biggest problem we have here. The result can be seen below:

Animated gif. The radii of the two small circles are also animated from their minimum size to their maximum size and back such that, when the first is at its minimum, the second is at its maximum and the other way around.
The three arcs shape morphing and the small circles scaling (live demo, Blink only).

This is much better, but we still nedd to animate the positions of the small circles along the x axis. The way we do this is with a set of @keyframes that make cx go from $rmax to $rmin and back again for the first small circle and from -$rmin to -$rmax and back for the second one. In these two cases, we have both a different order and a different sign, so we need to come up with a keyframe animation that satisfies both.

Getting around the order problem is the easy part – we use the same animation-delay as we did for the scaling radii animation.

But what about the sign? Well, we use our custom property --i again. This is 0 for the first small circle and 1 for the second one, so we need a function that takes in --i and gives us 1 when this variable’s value is 0 and -1 for a value of 1. The simplest one that comes to mind is raising -1 to the power --i. Sadly, that’s not possible with CSS – we can only have arithmetic operations inside calc(). However, calc(1 - 2*var(--i)) is another solution that works and it’s not much more complicated. Using this, our code becomes:

circle {
  --i: 0;
  --j: calc(1 - 2*var(--i));
  animation: s $t ease-in-out calc(var(--i)*#{-$t}) infinite alternate;
  animation-name: s, x;
	
  &:nth-child(3) { --i: 1 }
}

@keyframes x {
    0% { cx: calc(var(--j)*#{$rmax}) }
  100% { cx: calc(var(--j)*#{$rmin}) }
}

The result can be seen below… and it’s not quite as expected:

Animated gif. The position of the two small circles should animate smoothly, instead it seems to flip suddenly from the initial one to the final one.
Result (live demo, Blink only).

What we have looks like a sudden flip at 50% in between the two end values, not a smooth animation. This is not what we wanted, so it looks like we need to abandon this tactic.

We have another option here though: combining cx with transform. The two small circles are always positioned such that the distance between their central points is $r. So what we can do is position the second of the small circles at -$r, then translate them both by a distance that’s between $rmax and $rmin:

circle {
  transform: translate($r2*1px);
  animation: s $t ease-in-out infinite alternate;
  animation-name: s, x;
		
  &:nth-child(3) {
    cx: -$r;
    animation-delay: -$t, 0s
  }
}

@keyframes x {
    0% { transform: translate($rmax*1px) }
  100% { transform: translate($rmin*1px) }
}

This finally behaves as we wanted it to!

Animated gif. The position of the small circles animates smoothly between the initial and the final one for each.
Correct animation (live demo, Blink only)

One more thing we can do here to simplify the code is get rid of the initial $r1 and $r2 values and replace them with those in the 0% keyframe of each animation:

path {
  d: path('M#{-$r} 0A#{$r} #{$r} 0 0 1 #{$r} 0' +
          'A#{$rmin} #{$rmin} 0 0 1 #{$r - 2*$rmin} 0' + 
          'A#{$rmax} #{$rmax} 0 0 0 #{-$r} 0');
  animation: m $t ease-in-out infinite alternate
}

circle {
  r: $rmin/3;
  transform: translate($rmax*1px);
  animation: s $t ease-in-out infinite alternate;
  animation-name: s, x;
	
  &:nth-child(3) {
    cx: -$r;
    animation-delay: -$t, 0s
  }
}

@keyframes m {
  to {
    d: path('M#{-$r} 0A#{$r} #{$r} 0 0 1 #{$r} 0' +
            'A#{$rmax} #{$rmax} 0 0 1 #{$r - 2*$rmax} 0' + 
            'A#{$rmin} #{$rmin} 0 0 0 #{-$r} 0');
  }
}

@keyframes s { to { r: $rmax/3 } }

@keyframes x { to { transform: translate($rmin*1px) } }

The visual result is exactly the same, we just have less code.

The final step is to make the SVG element itself rotate infinitely:

svg { animation: r 2*$t linear infinite }

@keyframes r { to { transform: rotate(1turn) } }

The finished loading animation can be seen in this Pen.

So there you have it – one loading animation, four different methods of recreating it from scratch for the web. Not everything we’ve explored in here is usable in practice today. For example, the support for the last method is really poor and the performance is awful. However, exploring the limits of what’s becoming possible these days was a fun exercise and a great learning opportunity.


Creating Yin and Yang Loaders On the Web is a post from CSS-Tricks

Iterable Website and Branding — behance.net/gallery/52285067/Iterable-Website-…



📩 Iterable Website and Branding

— behance.net/gallery/52285067/Iterable-Website-and-Branding




Source

15 Pre-Built Websites for Small Businesses and Clients



Being a freelancer has its definite upside, but it has its challenges as well. As a freelancer, you have a substantial amount of freedom with respect to your daily work habits. At the same time, you’ll sometimes face challenges that office workers are not accustomed to.

You’ll always have deadlines to meet, and you can usually meet them in a timely matter; unless of course you slack off, or fall prey to distractions. We’re 4 tips with you. Follow them, and you’re much more likely to handle whatever challenges that may come your way, and continue to deliver high-quality work; and always on time.

 

1. Take Advantage of Be Theme’s Pre-Built Websites

Don’t start from scratch like these guys who invented a new way of designing websites.

Be Theme’s pre-built websites are designed to help you turn out quality work in a much shorter time than most web designers/developers can do. They are super easy to install, as you will see by viewing this cool 40-second video.

Pre-built websites will also save you tons of time. You can skip prototyping, wireframing, and coding; and you’ll never end up looking like these guys!

 

For Example; See What You Can Do with These 15 Pre-Built Websites:  

 

Be Craftbeer

This Craftbeer pre-built website’s large images helps to emphasize the product; and you’ll find them on every page. Parallax and JavaScript effects are put to good use as well.

Be eLearning

eLearning is one of the latest trends in education. If you have an online eLearning business, a poorly designed website would probably not serve you well. See what this fresh looking, easy to navigate pre-built website can do for you.

Be Tiles

This pre-built website speaks volumes about fine interior design. The product is front and center, the message is crisp and clear, and the layout could well have been done by an architect.

Be Artist

Are you considering revamping your website to give it an enhanced look and feel? Take this pre-built website template as your starting point. You can either keep the dark default background, or use any color you wish.

Be Burger

Here’s the perfect website design solution if you have an online burger delivery service; or any other food catering service. A hip design highlights the product in a way that’s bound to engage the user.

Be Sports club

The Sports Club pre-built website displays a modern design that any fitness center would be willing to spend big bucks for to emulate on their website. Neat special effects add to its clean, cool look and feel.

Be Hotel2

This pre-built website for a hotel will make the viewer head right for the phone to make a reservation; without giving it a second thought. The hero image is stunning, the message is powerful, and all the relevant sections are included.

Be Restaurant

Be Restaurant’s cool and engaging design is made even more dashing and dynamic by the use of this pre-built website’s slider effect. There are not many restaurants, if there are any at all, whose websites can compare with this one.

Be Architect 2

The key to Be Architect2 is its ability to provide such an unusual and compelling user experience. The Muffin Group team combined different perspectives with an ingenious use of design elements to produce this amazing result.

Be Boutique

The background video in the hero section of this pre-built website is used to perfection. You can achieve the same results; plus, the structure of this website is just what you’re looking for to create an awesome portfolio.

Be VPN

There’s absolutely no reason why a corporate website can’t have a friendly look to it. This design for an IT website is well-organized, as a corporate website should be. But, it also includes a casual twist – the human element; which fits in perfectly.

Be Oculist

Spend enough time working in front of a computer, and a visit to an eye doctor is a likely outcome. Viewing these specialist’s website designs may give you pause. Most are horrible. You can do much better with this pre-built website as a starting point.

Be Furniture

This great looking design, complete with striking images and a slideshow approach, is an ideal choice for a client in the retail furniture business. Be Furniture’s judiciously-designed layouts will make getting a website up and running an easy task.

Be Car

The Be Car pre-built website conveys a feeling of luxury. Plenty of white space throughout adds to the elegant look; and the layouts make it easy for you to get your message across and engage your users.

Be Tea

How’s this for a layout when you’re tasked with an assignment to build a tea shop website? Interactions between the image, the typography, and the black menu, combine to produce a vintage look, that is at the same time charming, and luxurious.

 

2. Set Up and Stick to a Regular Schedule

When you’re not working under direct supervision, it’s all too easy to slack off; first a little, and then even more. Creating a work schedule is imperative, and it’s one of the first things a freelancer needs to do. That’s the first rule. The second rule is to stick to it! It may take a while to get into a rhythm; but that’s OK. Make it a point to include downtime in your schedule to avoid burnout.

3. Set Clear Boundaries Between Your Work and Your Home Life

It’s all too easy for a freelancer to blend work in with home life. This is an excellent way to put a dent in your productivity, since blending the two seldom works. To keep this from happening, follow these two guidelines: (1) set aside a separate work space, and (2) make yourself unavailable while you’re working. One more guideline; don’t be afraid to stop work if you’re in the midst of something. You’ll find it’s almost always easy to continue where you left off.

4. Make It a Habit to Take Regular Breaks

Your brain requires periodic breaks. If you don’t make that happen, your productivity is likely to start sliding downhill faster than you realize. The Pomodoro technique; called the “tomato theory” by some, suggests taking short breaks periodically during a lengthy work session. 45 minutes of work, followed by a 15-minute break, is about optimum.  You’ll quickly discover that you’re accomplishing more by taking these breaks than if you insist on working straight through.

 

Summing It All Up

Do These Things:

  • Establish a schedule; and religiously follow it.
  • Save time and energy by using Be Theme’s 250+ pre-built websites.
  • Create a dedicated work space.
  • Make yourself unavailable during your work hours.
  • Review your accomplishments at the end of each day.

Avoid These:

  • Working straight through without taking breaks. It will hurt your productivity.
  • Isolating yourself. Find someone you can talk shop with.
  • Neglecting clients or colleagues. You risk becoming invisible.

 

 

Read More at 15 Pre-Built Websites for Small Businesses and Clients