Original Source: https://www.webdesignerdepot.com/2020/06/how-to-define-effective-milestones-in-design-projects/

When it comes to creating and launching a website, it’s important to deliver realistic time expectations to the client, and establish the different stages you can bill them for.

After all, creating a site is about so much more than putting some code together. From the initial brief to the launch of the site there are numerous stages in between. It can be natural to quote a lump price and charge it all at the end, or 50% upfront and 50% on completion. However, if there are snags along the way, unexpected delays, or if the client cancels last minute after you’ve nearly finished creating the site, you may be left out of pocket.

By charging stage by stage, you are getting the main chunks of what you are owed at the time you do it. While the exact web development phases differ slightly between clients and projects — and you should schedule, and bill for your specific situation — the basic steps pretty much stay the same.

Brief and Planning – Pay me ~20%

Whether your client has an existing site they are looking to re-do, or are starting from scratch, the initial brief and planning stage shouldn’t be underestimated.

This stage includes researching, finding out their requirements, and putting together a plan. You need to identify the scope of the project, the areas of main importance and the site’s purpose.

It’s at this stage you clarify what web pages and features are needed to fulfil this. You also need to define the software and any resource requirements as well as the estimated deadlines for the project. When deciding the budget, you need to remember to keep in mind any other aspects like heading to meetings.

Creating the Visuals – Pay me ~15%

The visual stage involves three main elements: wireframes, mock-ups, and prototypes.

Wireframes are simple sketches of the future website before any development or design elements (such as fonts and branding) are applied. It’s a basic backbone to base the future of the project on which allows you to see where key elements will be located.

The next stage is mock-ups which are high-fidelity statics of the future website and portray how things will look. Within this stage aspects such as colors, fonts, logos and images should be applied. This stage needs to be much more detailed and a well-thought out static version of the future site. It provides an opportunity to hone in on details and represent the suppositional final look of the site. Remember the end result will still be likely to change, but this should include all the elements needed that you could base the project on.

The third visual stage of the design is prototyping which is a highly detailed, dynamic version of the website which is due to be created. This is likely to be as similar as possible to the final system and will offer a comprehensive overview of the functionality of the site. It’s a great final chance to check out the website before it is built and make any last big tweaks.

Initial Build – Pay me ~15%

The next stage is to actually get creating the website. By utilising the previous visuals, you can get building according to the clients specifications.

It involves creating the initial home page and a “shell” for interior pages where content can be added later on. This process includes designing interactive forms, implementing payment getaways and confirming the CMS you will use. Here you will add in any custom coding too. Expect this to take up a significant amount of time depending on the level of complexity involved with the site.

Content Creation and SEO – Pay me ~15%

Once you have the main structure in place, it’s time to sort the content. By now you should have established if you are creating the content or if the client is sending elements such as text and images over themselves.

Keep in mind (and ensure the client is aware) that copy is designed to both drive engagement, and for search engine optimisation (SEO.) The style of writing is important and is something to certainly bill the client for. Content needs to be short, snappy and to the point, encouraging readers to both interact with it, and progress to other pages.

If pages require large chunks of information, it’s best to split it into manageable sections and supplement it with interesting visuals to keep them engaged. Identify search terms the client wants to rank for and check the text adheres to this. There are many SEO plugins and tools (such as Yoast) which you can use to easily check it’s optimised.

Beta Testing – Pay me ~15%

Once the design and functionality are complete, it needs to go through a beta testing stage. This is the initial test before it’s set live and promoted to the world.

The beta phase is important to iron out any errors and get feedback from the intended audience. It’s also the stage where you need to ensure proper functioning across multiple devices.

There are a number of sites and tools you can use to check how the site looks in the different mobile, tablet and desktop resolutions. The site needs to look and function as per the client’s specifications and ensure it matches their brief. Here you can see if there are any final amendments which need to be made following from feedback both from the audience and client.

Launch – Pay me ~20%

Once the site has passed the beta testing and the client is happy, it’s time to launch the site. This is the final billing stage for the client and should be a quick and simple step.

Discuss with the client when they want to launch it and get set up for then. You will need to connect any domains, check the DNS records and CNAME’s and get the site up and running. If it’s a large and complex site it can take a little longer than a smaller site, so ensure you plan for this.

Always be prepared that there could be teething problems on launch and that the client might want feedback and amendments based on how the site is used and interacted with. There are always ways to analyse user testing, monitor analytics and refine the site, so it could be worth going on some sort of retainer contract for future updates for the client.

These are the basic stages you can bill a client for. Try and decide how long each step with take and come up with pricing based on this. You can charge a deposit upfront and then always let the client know if certain steps are going to end up costing more than initially quoted.

 

Featured image via Unsplash.

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;}

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/P7L97ub87Ms/cortex-bar-branding-and-visual-identity-fatfacestudio

Cortex Bar Branding and Visual Identity by FatFaceStudio

abduzeedo06.11.20

FatFaceStudio shared an awesome branding and visual identity project for event producers from my hometown. Here’s how the awesome folks over at FatFaceStudio tell the story: When a duo of event producers from Porto Alegre, Brazil decided to open a new venue to celebrate the music from the good, not-so-old days of the early 2000’s, they named it Cortex – the part of the brain responsible for, among other things, storing memories.

These guys used to throw parties back in the day when My Chemical Romance, the Klaxons and Franz Ferdinand were banging loud in the years of 18 to 20 – somethings all over the place. 

The people that used to go to their parties are now working, have busy schedules, probably families. They end up choosing to Netflix and chill over going out to dance, till now. Cortex came to change that.

Branding and Visual Identity

Discovery

Most of the research came from Instagram. The clients had a solid username with followers who represented exactly who they wanted to attract to their new venue. We just had to gather the information about people’s lifestyles, music tastes and culture.

The research was quite fruitful. We identified the messages the brand needed to convey:

“Cortex know me from way back” – appeal to the nostalgic days of dancing and listening to loud music.
“Cortex and I share the same culture” – the audience likes specific genres, which come with specific lifestyles.
“Cortex and I are in the same vibe and in the same life stage” – even though the references are from the past, this is a place for young adults.
“Cortex want me to go out and have fun” – Cortex need to show the public there’s still a good, comfortable option for them to go out and listen to good music.

Concept

Based on the research we decided that:

We should use references from the past in a sophisticated way.
The public is open to a certain types of messaging that appeals to feelings.
The experience should be an escape from reality for an audience who often feels tired of the grind.

They explored several concepts with cerebral cortex theme/idea, memories and alternative music and presented three visual identity paths through moodboards with brief graphic explorations.

Visual identity

From the three paths we presented, the client chose to go for the one we nicknamed “Clean Punk Rocker” – a clean, indirect and grown-up assembly of elements from alternative rock music from the early 2000’s.

This definition paved the way for the visual language, since the color palette, typography and graphic elements were already approved.

As for the mark, it was discussed how to visually explore the cerebral cortex and decided to stay away from the anatomy of the brain and go for a more abstract approach.

During the research, it was frequently encountered the analogy of the mind as a labyrinth, and that was the chosen path to design de brand mark. The idea of labyrinth, mixed with symbols of rebellion used in the visual language, connected beautifully with the concept of escaping reality we previously identified.

 

For more information make sure to check out https://fatfacestudio.com/cortex-bar

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/eNrrY-4_q_E/

In this tutorial, we’ll make this cool animation of revealing the blog post excerpt on hover using pure CSS and no JavaScript. The GIF below shows what you will be able to create by the end of this. You should have basic knowledge of HTML and CSS to follow the tutorial.

 

 

This is a simple and neat animation that can be used on a page that lists blog posts. Each post on the list (or grid) shows only the featured image with the title at first. When you hover anywhere on the image, the background zooms in and the title slowly moves up revealing the excerpt, a “read more” link, the published date and time to read. Let’s get started!

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!

DOWNLOAD NOW

Setting up

Create a blank HTML document and name it index.html. Add the basic HTML skeleton. If you use Visual Studio Code, all you need to do is type “!” and hit enter. You will end up with this.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

Create your stylesheet and name it styles.css. Link the stylesheet to your HTML document below the <title> tag using

<link rel="stylesheet" href="styles.css" type="text/css">

I have used ‘Lato’ font for the text and ‘Font Awesome’ for the icons. So add the following two lines below the title tag, before your stylesheet line to be able to use these fonts.

<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

HTML & CSS

Each developer has a different way of working. Some developers create the complete HTML first and then get started with CSS. However I prefer to do both simultaneously because it helps me see the result taking shape bit by bit. To make it easier for you, I’ve split the next process into two parts.

Part 1

In the first part, we will achieve these:

Create a blog post item
Set the background image
Zoom the image on hover
Add a dark background overlay on the image which darkens more on hover

HTML

First add a div within the opening and closing body tags with a class “wrapper”. This acts as a container. Within that comes a single blog post item in an article tag. Give it a class name “post”.

<div class="wrapper">

<article class="post">

</article>

</div>

The background image cannot be added to this article element directly because we need to apply the zoom effect. Hence let’s create an empty div inside the article just for this.

<div class="post-bg"></div>

If you open this up on your browser, you will see nothing yet! So, it’s time for some CSS.

CSS

Add these basic styles into styles.css:

body{
font-family: ‘Lato’,sans-serif;
line-height: 1.5;
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
color: #b1fffa; /* A bright green color */
}
.wrapper{
margin: auto; /* This is to center the content on page */
width: 1100px; /* You can change this value for smaller screens using media queries */
padding: 40px;
}

Next, add styles to the article element:

article.post{
position: relative;
width: 515px; /* You can change this value for smaller screens using media queries */
height: 450px; /* Height is required */
overflow: hidden;
}

The position property needs to be set because we will be absolutely positioning its child elements – the title, excerpt and other text. overflow: hidden is to make sure that this block doesn’t expand when the child background div is transformed to give the zoom effect. You will understand this in just a minute.

We need to now add styles to the div we placed for our background image.

.post-bg{
width: 100%;
height: 100%;
background-image: url(‘https://images.pexels.com/photos/267569/pexels-photo-267569.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260’);
background-position: center;
background-size: cover;
transition: all .7s;
}

I have used a direct link of an image from pexels.com. You can use your own image. The CSS transition property is used to set the properties that need to animate (in our case it is all) and the time for transition ( we have set it to 0.7 seconds). Refer to CSS transitions on w3schools.com for a more detailed explanation.

Here comes the code snippet used for the zoom effect:

.post:hover .post-bg,
.post:focus .post-bg {
transform: scale(1.1);
}

Now check your browser. And if you got everything right, you will see the blog post image and when you take your mouse on it, the image zooms.

As you can see in the CSS above, we are actually just increasing the size (using transform) of .post-bg div by 1.1 times when it’s parent element is hovered/focused. But since the parent’s overflow property is set to hidden, you feel the image is being zoomed.

Next, if you observe carefully, there’s a dark background overlay over this image. And on mouse hover, the overlay darkens further. To add this overlay, we need to use ::after to create a pseudo element and give styles as follows.

.post-bg::after {
content: ”;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .7s;
}

The position:absolute along with width and height of 100% makes this pseudo element cover the image completely. The background color is black with 0.5 opacity. Again, the transition property is for animation.

Add the below code to increase the opacity when the parent element .post is hovered/focused.

.post:hover .post-bg::after,
.post:focus .post-bg::after {
background: rgba(0, 0, 0, 0.7);
}

Opacity of 0.5 is changed to 0.7. This works!

Part 2

We have our background all set. Now let’s achieve the following:

Add the title, excerpt, read more link, published date and time to read
Place the above elements in their respective positions
Display only the title in the center at first (Hide the other elements)
Animate the title and reveal the other elements simultaneously

HTML

After the .post-bg div, let’s add all the required elements. The HTML part is mostly self-explanatory.

<h2 class="post-title">
<a href="#">Pure CSS Animation of Blog Post Excerpt on Hover</a>
</h2>

The excerpt of your post that compels the user to click on "Read More" link below

<a class="post-read-more" href="#">
Read More
<i class="fa fa-arrow-right"></i>
</a>

<div class="post-date-time">
<span class="post-icon-text">
<i class="fa fa-calendar"></i>
June 1, 2020
</span>
<span class="post-icon-text">
<i class="fa fa-clock"></i>
8 Minutes Read
</span>
</div>

If you check your browser now, you cannot see any changes at all. Where have all the elements gone? You can use the inspector tool of your browser and check. They have been pushed down by the .post-bg div and are not visible because the overflow property of .post is set to hidden. Let’s work on the CSS.

CSS

The best way to get each of these in place is by setting position property to absolute and using the top, left and right properties for alignment.

.post-title, .post-excerpt, .post-read-more, .post-date-time {
position: absolute;
top: 20%;
left: 8%;
right: 8%;
text-align: center;
overflow: hidden;
}

Of course, now you will see that everything overlaps. Let’s give different values to top property and space them out correctly – the way we want to see them once revealed.

.post-title{
top: 15%;
}
.post-excerpt{
top: 46%;
}
.post-read-more{
top: 67%;
}
.post-date-time{
top: 80%;
}

This sets the position of elements, but we need some additional styling to get the font sizes and spacing right. Replace the above code with this:

.post-title{
top: 15%;
max-height: 120px; /* This is to make sure that longer titles are truncated */
}
.post-title a{
font-size: 1.4em;
line-height: 1;
}
.post-excerpt{
top: 46%;
max-height: 82px; /* This is to make sure that longer excerpts are truncated */
font-size: 1.1em;
}
.post-excerpt:after{
content: ‘…’;
}
.post-read-more{
top:67%;
font-weight: bold;
font-size: 1.1em;
}
.post-date-time{
top: 80%;
font-size: 0.8em;
}
.post-icon-text {
padding: 0 10px;
}
i.fa{
padding: 0 5px;
}

This looks perfect!

Let’s hide all the elements except for the title, simply by setting the opacity to 0.

.post-excerpt, .post-read-more, .post-date-time {
opacity: 0;
}

Change the top value of .post-title to 35% – to make it appear in the center. Also, the top value of .post-date-time to 90% because the date and time slide up from bottom.

You have come really far! The only part remaining now is the actual animation – which is simple. First, set the transition property to all the four elements:

.post-title, .post-excerpt, .post-read-more, .post-date-time {
transition: all 0.5s;
}

Now let’s set the properties of each element on hover.

The top property of .post-title on .post hover

.post:hover .post-title{
top: 15%;
}

The opacity of .post-excerpt and .post-read-more

.post:hover .post-excerpt, .post:hover .post-read-more{
opacity: 1;
}

The top and opacity properties of .post-date-time

.post:hover .post-date-time{
top: 80%;
opacity: 1;
}

And there you go! You did it.

You now know how to create a zoom effect on a background image, how to add an overlay on a background image, and how to animate various elements using pure CSS animation. Just in case you didn’t get the expected output, I’ve got you covered. Download the full source code here and compare yours with this one.

Source Code

 

Original Source: https://www.smashingmagazine.com/2020/06/mirage-javascript-timing-response-passthrough/

Mirage JS Deep Dive: Understanding Timing, Response And Passthrough (Part 3)

Mirage JS Deep Dive: Understanding Timing, Response And Passthrough (Part 3)

Kelvin Omereshone

2020-06-10T12:30:00+00:00
2020-06-10T17:34:03+00:00

Mirage JS was built to give frontend developers the ability to simulate actual backend API calls. So far, we have seen how we can create records with Mirage, intercept API requests via route handlers and, last but not least, how the shape of the data returned to us from Mirage is affected.

In this part of the series, we will see Mirage mechanism for simulating other aspects of an actual backend server like slow network, HTTP status code response, and also making requests to an actual backend even though Mirage is intercepting your frontend requests.

Let’s begin by simulating slow network requests.

Timing

When developing your frontend application that relies on a backend API, it’s useful to see how your application behaves under slow networks (think about testing loading messages and loaders). This test is important because requests to backend API are asynchronous in nature. What this means is that we can’t make assumptions about when we will get the response so we need to write our code as if it might come immediately, or there might be a delay.

A common reason for a delay in response is a slow Internet connection. It is then really important to know how your app would behave in such circumstances. Mirage caters to this need by making available a timing option which is a property passed to a route handler that tells the handler to wait for a particular duration specified by the timing option (in milliseconds) before returning a response whenever the route it is handling is called.

Note: By default, Mirage is setting a 400ms delay for the server during development and 0 during testing so your tests can run faster (no one really enjoys slow tests).

We now know in theory how to customize Mirage’s server response time. Let’s see a couple of ways to tweak that response time via the timing option.

timing On routes()

As earlier stated, Mirage sets a default delay for the server response time to be 400ms during development and 0 for tests. You could override this default on the routes method on the Server instance.

In the example below, I am setting the timing option to 1000ms in the routes method to artificially set the response delay for all routes:

import { Server } from ‘miragejs’

new Server({
routes() {
this.routes = 1000
}
})

The above tells Mirage to wait for 1000 milliseconds before returning a response. So if your front-end make a request to a route handler like the one below:

this.get(‘/users’, (schema) => {
return schema.users.all();
});

Mirage will take 1000 milliseconds to respond.

Tip: Instead of directly using the schema object, you could use ES 6 object restructuring to make your route handler cleaner and shorter like below:

this.get(‘/users’, ({ users }) => {
return users.all()
}

timing For Individual Routes

Although the this.timing property is useful, in some scenarios you wouldn’t want to delay all your routes. Because of this scenario, Mirage gives you the ability to set the timing option in a config options object you could pass at the end of a route handler.
Taking our above code snippets, let’s pass the 1000ms response delay to the route itself as opposed to globally setting it:

this.get(‘/users’, ({ users }) => {
return users.all();
}, { timing: 1000 });

The result is the same as globally assigning the timing. But now you have the ability to specify different timing delays for individual routes. You could also set a global timing with this.timing and then override it in a route handler. Like so:

this.timing = 1000

this.get(‘users’, ( { users } ) => {
return users.all()
})

this.get(‘/users/:id’, ({ users }, request) => {
let { id } = request.params;
return users.find(id);
}, { timing: 500 });

So now when we make a request to /users/1, it will return the below user JSON in half of the time (500ms) it would take for every other route.

{
“user”: {
“name”: “Kelvin Omereshone”,
“age”: 23,
“id”: “1”
}
}

Passthrough

Route handlers are the Mirage mechanism for intercepting requests your frontend application makes. By default, Mirage will throw an error similar to the one below when your app makes a request to an endpoint that you haven’t defined a Route handler for in your server instance.

Error: Mirage: Your app tried to GET ‘/unknown’, but there was no route defined to handle this request. Define a route for this endpoint in your routes() config. Did you forget to define a namespace?

You can, however, tell Mirage that if it sees a request to a route that you didn’t define a route handler for, it should allow that request to go through. This is useful if you have an actual backend and you want to use Mirage to test out endpoints that haven’t been implemented yet in your backend. To do this, you would need to make a call to the passthrough method inside the routes methods in your Mirage server instance.

Let’s see it in code:

import { Server } from ‘miragejs’

new Server({
routes() {
// you can define your route handlers above the passthrough call
this.passthrough()
}
})

Note: It is recommended keeping the call to passthrough at the bottom in order to give your route handlers precedence.

Now when Mirage sees requests to a route that you didn’t define in Mirage, it would let them “passthrough”. I really find this useful because it makes Mirage play nicely with an actual backend. So a scenario would be, you are ahead of your backend team and you want to make a request to an endpoint that you don’t have in your production backend, you could just mock out that endpoint in mirage and because of the passthrough option, you wouldn’t need to worry about other parts of your app making requests failing.

Using passthrough To Whitelist Route

passthrough takes in options to allow you to have more control over routes you want to whitelist. So as opposed to calling passthrough without any option and allowing routes not present in mirage to passthrough, you can pass in one or more strings of the routes you want to whitelist to passthrough. So if we want to whitelist /reviews and /pets we can do that using passthrough like so:

this.passthrough(‘/reviews’, ‘/pets)

You can also do multiple calls to passthrough:

this.passthrough(‘/reviews’)
this.passthrough(‘/pets’)

Note: I find passing multiple route strings to passthrough cleaner as opposed to making multiple calls. But you are free to use whatever feels natural to you.

Using passthrough On A Set Of HTTP Verbs

The above passthrough we defined will allow all HTTP verbs (GET, POST, PATCH, DELETE) to passthrough. If your use case requires you to allow a subset of the HTTP verbs to passthrough, Mirage provides an options array on the passthrough method wherein you pass the verbs you want Mirage to whitelist on a particular route. Let’s see it in code:

// this allows post requests to the /reviews route to passthrough
this.passthrough(‘/reviews’, [‘post’]);

You could also pass multiple strings of routes as well as the HTTP verbs array like so:

// this allows post and patch requests to /reviews and /pets routes to passthrough

this.passthrough(‘/pets’, ‘reviews’, [‘post’, ‘patch’])

Response

Now you see the level of customization Mirage gives you with both the timing option and passthrough method, it feels only natural for you to know how to customize the HTTP status code Mirage sends for the requests you make. By default, Mirage would return a status of 200 which says everything went fine. (Check out this article for a refresher on HTTP status code.) Mirage, however, provides the Response class which you can use to customize the HTTP status code as well as other HTTP headers to be sent back to your frontend application.

The Response class gives you more control over your route handler. You can pass in the following to the Response class constructor:

The HTTP status code,
HTTP Headers,
Data (a JSON payload to be returned to the frontend).

To see how the Response class works, we would start on an easy note by rewriting our previous route handler using the Response class. So we would take the below route handler:

this.get(‘users’, ( { users } ) => {
return users.all()
})

and then reimplement using the Response class. To do this we first need to import the Response class from Mirage:

import { Response } from ‘miragejs’

We would then rewrite our route handler using the Response class:

this.get(‘/users’, ({ users }) => {
return new Response(200, {}, users.all());
});

Note: We are passing an empty {} to the header argument because we are do not want to set any header values for this response.

I believe we can infer that Mirage under the hood uses the Response class when we previously returned users.all() because both implementations would act the same way and return the same JSON payload.

I will admit the above use of Response is a little bit verbose because we are not doing anything special yet. However, the Response class holds a world of possibility to allows you to simulate different server states and set headers.

Setting Server States

With the Response class, you can now simulate different server states via the status code which is the first argument the Response constructor takes. You can now pass in 400 to simulate a bad request, 201 to simulate the created state when you create a new resource in Mirage, and so on. With that in mind, let’s customize /users/:id route handler and pass in 404 to simulate that a user with the particular ID was not found.

this.get(‘/users/:id’, (schema, request) => {
let { id } = request.params;
return new Response(404, {}, { error: ‘User with id ${id} not found’});
});

Mirage would then return a 404 status code with the error message similar to the below JSON payload:

{
“error”: “User with id 5 not found”
}

Setting Headers

With the Response class, you can set response headers by passing an object as the second argument to the Response constructor. With this flexibility, you can simulate setting any headers you want. Still using our /users/:id route, we can set headers like so:

this.get(‘/users/:id’, (schema, request) => {
let { id } = request.params;
return new Response(404, {“Content-Type” : “application/json”, author: ‘Kelvin Omereshone’ }, { error: `User with id ${id} not found`});
});

Now when you check Mirage logs in your browser console, you would see the headers we set.

Wrapping Up

In this part of the Mirage JS Deep Dive series, I have expounded three mechanisms that Mirage exposes to its users in order to simulate a real server. I look forward to seeing you use Mirage better with the help of this article.

Stay tuned for the next and final part of the series coming up next week!

Part 1: Understanding Mirage JS Models And Associations
Part 2: Understanding Factories, Fixtures And Serializers
Part 3: Understanding Timing, Response And Passthrough

(ra, il)