2PM Founder: Successful Entrepreneurs Are Polymaths

Having founded and sold multiple ecommerce companies, and having worked for numerous ecommerce startups, Web Smith believes broad economic trends determine entrepreneurial success as much as tactical execution. Successful entrepreneurs, Smith asserts, must be polymaths — possessing knowledge across multiple subjects — to understand opportunities. And that’s the purpose of 2PM, his latest company.

“2PM is short for ‘to polymaths,’” he told me. “That’s for a reason. You cannot start a business and scale it unless you have a holistic view of every aspect of your industry and related industries.”

2PM is a media company, an advisory firm, and a seed investor. I spoke with Smith recently about his ecommerce journey, 2PM, and his outlook for online selling, post Covid-19.

What follows is our entire audio conversation and its transcript, which is edited for length and clarity.

Eric Bandholz: Tell us about yourself.

Web Smith: I didn’t set out to have a career in ecommerce. Starting in Austin in 2009, I launched, with buddies, an ecommerce and media play for the CrossFit community. We sold that in 2012. I then joined Rogue Fitness in Columbus, Ohio. It’s a tremendous company with roughly 1,000 employees now. Fully bootstrapped.

From there, I co-founded Mizzen+Main, a men’s apparel company. We bootstrapped it, too. It was a very painful experience, but I learned a lot — tactically, professionally, and personally.

From there, I decided to get out of entrepreneurship. I was burnt out. I worked for a few media companies, such as Uncrate and Gear Patrol, that set my path forward, which was to launch 2PM. I didn’t have a business plan. I just hoped that it was going to work.

2PM is short for “to polymaths.” That’s for a reason. You cannot start a business and scale it unless you have a holistic view of every aspect of your industry and related industries.

My first phase of entrepreneurship, in my mid-twenties, I didn’t understand how things interacted with each other — such as the politics of fundraising and interpersonal relationships. This time around, at 37 years old, I know my limitations. I understand when I need to outsource. I’m okay growing slowly. I try not to be swayed by others.

Bandholz: Is 2PM bootstrapped, as well?

Smith: Definitely. It was a hobby that became a daily task that I eventually monetized. I had a vision for the platform, helping to move the ecommerce industry forward, with data insights and interpersonal connections. So we’re delivering on that. Could it be bigger? Yes. But I’m not sweating the details just yet.

Bandholz: How do you bring value to your 2PM customers?

Smith: One of the best ways to grow a business is to find the right wave at the right time. Those are typically the most successful businesses. I’ve come from a few of those businesses. Without CrossFit early on, there probably would be no Rogue Fitness. But Rogue is way bigger than CrossFit now. They caught a wave, and they ran with it and optimized after the fact.

So I try to present opportunities to businesses. They can act on them for a strategic advantage.

Bandholz: How can you know when the market is moving or shifting to identify those opportunities? It seems like a bit of luck.

Smith: I don’t think it’s luck. It comes from having an entire perspective of what 2PM represents. If you study the entire ecosystem enough, you’ll discover connections between different events, how various industries interact or react to certain things. You’re going to see it.

Bandholz: 2PM also provides seed level investments.

Smith: Yes, 2PM does angel and seed round investing. We also consult with innovative companies that we call growth partners. Examples include Verizon Media, ShipBob, Passport, The Chernin Group, BigCommerce, CommonThread, ButcherBox, Alibaba, Rogue, Duradry, and Packlane.

Those engagements provide operational insights to 2PM as well as recurring revenue, which we reinvest into the company. It improves our content and our ability to help others.

And, yes, I allot an amount each quarter to invest in brands and platforms.

Bandholz: What do you look for in these investments?

Smith: It depends on the company. If it’s a consumer-products brand, I look for omnichannel expertise. I think that Recess [sparkling water] has done a wonderful job. Element [apparel] has done a wonderful job as has Sanzo [sparkling water]. Haus [adult beverages] is tremendous.

From a fashion standpoint, you have Alps and Meters and Rowing Blazers as well as my stake in Mizzen.

I just look for the companies that are supporting the ecosystem. These are all exciting things for me.

Bandholz: Are the investments purely financial, or is there also a time commitment?

Smith: It’s intended to be purely financial. But I’m always available to help. I’m passionate about that. I want to be helpful, and I want to be operational.

Bandholz: Is 2PM just you, or do you have help?

Smith: I have help. My editor is Hilary Milnes. Andrew Haynes is creative director. Andrew Johnson is head developer. Vincenzo Landino helps me with all audio production. I’m soon to hire one or two others. But the vast majority of the content that you see from newsletters to drafting memos, to managing and growing, to moderating Polymathic (our invitation-only forum) — that’s all me. I’m pushing 70-to-80 hour weeks.

Bandholz: What are the valuations for ecommerce brands?

Smith: Ecommerce valuations are based on EBITDA. We’ve tried the tech valuation thing, which I’ve never agreed with. Ecommerce is about profitability.

Bandholz: We’ve all seen the shift from bricks-and-mortar to online over the past few months. Will this be the new normal?

Smith: Yes. 100 percent. I just published something in yesterday’s edition of 2PM. It talked about how close we are to a cashless society. Cashless societies are a leading indicator of what’s to come in ecommerce. China has mastered the cashless society. Because of that, commerce penetration is inching towards 40, 42 percent, which is insane.

Once the U.S. gets to 30, 35, 40 percent, you’re talking about $3 trillion in overall retail spend through ecommerce. Consider what top-of-mind ecommerce brands can do once the market is much larger, and customer acquisition becomes less expensive.

We’re going to see a lot of companies blow up really fast. It’s just a matter of time.

Bandholz: How does Amazon play into this?

Smith: Amazon is the ecommerce industry’s fullback. We should support Amazon in every way, shape, and form. I try to look through the lens of American history. Our government no longer builds infrastructure as it used to. The infrastructure that Amazon has developed is what would have happened if the government did it in the ’40s, ’50s, or ’60s.

Amazon has built the logistics ecosystem — the equivalent of lines, roads, highways, tunnels, and bridges — that we need to run ecommerce businesses. Amazon should be supported as such. Do I agree with a lot of their practices? Of course not. Would I put my brands on Amazon? Probably not. But the ecommerce industry would be much smaller without Amazon’s involvement.

Bandholz: How can our listeners follow you or contact you?

Smith: 2PM is my home base. I’m on Twitter, too — @web. I like helping entrepreneurs in any way. So if listeners have questions about ecommerce or consumer psychology and sociology, and anything else, I would enjoy the dialog.

How To Create A Porsche 911 With Sketch (Part 3)

How To Create A Porsche 911 With Sketch (Part 3)

How To Create A Porsche 911 With Sketch (Part 3)

Nikola Lazarević

2020-08-07T10:00:00+00:00 2020-08-08T03:34:52+00:00

We continue our tutorial with the wheels of our Porsche 911 car, but before we proceed with the next steps, I’d like to shine the spotlight on the famous Fuchs wheels that were designed in the shape of a cloverleaf (or a wing). First, a bit of history:

“The Fuchs wheel is a specialty wheel made for the first Porsche 911/911S model in the early 1960’s. Designed in conjunction with Otto Fuchs KG, Porsche modeler Heinrich Klie, and Ferdinand Porsche Jr., the Fuchs wheel was the first lightweight forged wheel to be fitted to a production automotive vehicle. They provided the rear-engined Porsche 911 sports car with a reduction in unsprung mass, through a strong and lightweight alloy wheel.”

— Source: Wikipedia

We’ll start with the design of the tires first.

Tires

Un-hide the wheel base in the Layers panel. Turn off Borders and set Fills to #2A2A2A. Then, duplicate this shape, change Fills to #000000, move it behind the base wheel (right-click on it and choose Move Backward) and push it 20px to the right.

Tip: Holding Shift + will move the selection in 10-pixel increments.

Screenshot of the steps described in the previous paragraph of the tutorial.
Let’s start working on the tire design. (Large preview)

Select the base wheel and add some guidelines to make alignment of all elements easier. To do this, show the Sketch rulers (press Ctrl + R). Then, add a vertical guideline at the center of the base wheel with a click on the upper ruler, and do the same for the horizontal guide on the left ruler.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add a vertical and a horizontal guideline at the center of the ‘base wheel’. (Large preview)

Temporarily turn off the guidelines by pressing Ctrl + R on the keyboard. Create a tiny rectangle with a width of 2px and a height of 8px, with the Fills set to #000000 and the Borders turned off. This rectangle will serve as the base unit for creating the treads (a.k.a. the tread pattern). Center the rectangle to the base wheel horizontally.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the base unit for the treads. (Large preview)

Zoom in close enough (here, I zoomed in to 3200%), choose Transform from the top toolbar, select the top middle point and push it 2px to the right, then select the middle bottom point and push it 2px to the left to make it look slanted.

Note: If you don’t see the Transform tool in the top toolbar, you can add it there via ViewCustomize Toolbar… or you can use the keyboard shortcut Cmd + Shift + T.

Screenshot of the steps described in the previous paragraph of the tutorial.
Transform the tread base unit and make it look slanted. (Large preview)

Turn back on the guidelines (Ctrl + R) and make sure this rectangle is selected. Put the rectangle into a group by pressing Cmd + G on the keyboard. Give this group the name treads.

We will use the Rotate Copies tool to create the treads around the wheel base. Like Create Symbol, Rotate Copies can be one of those features that will save you a lot of time and effort!

Note: If you are using Sketch version 67.0 or 67.1, you may experience a bug with Rotate Copies operation. If this happens, you will need to create the treads around the wheel base manually; or (better), you should update to v. 67.2 (or later) where this issue has been resolved.

Make sure the rectangle inside the group treads is selected, then go to LayerPath → select Rotate Copies. A dialog box that will open will let you define how many additional copies of the selected element to make. Enter 71 so that in total we will have 72 rectangles around the wheel base that will be the treads. Press Rotate in the dialog box. After you have entered this value in the dialog, you will be presented with all of the rectangles and a circular indicator in the middle.

Tip: Performing this step in Sketch is very CPU and memory intensive! If you are working on a modern machine, probably you will not experience any issues; but if your Mac is a bit older, then your mileage may vary. In general, when working with a large number of copies, try to first turn off Borders to avoid getting stuck and to achieve the result of the operation faster.

Screenshot of the steps described in the previous paragraph of the tutorial.
Use the Rotate Copies feature to create the treads. (Large preview)

Now, move this circular indicator down until it is located precisely at the intersection of the guides — and voilà! we have 72 rectangles evenly placed around the wheel base. When you’re done, press Esc or Enter. Note that if you miss putting the circular indicator (the center of rotation) right at the intersection of the guides, the rectangles won’t be distributed perfectly around the wheel base so be careful.

Note: The Rotate Copies tool doesn’t create a compound shape in the newer versions of Sketch (version 52 or later) and instead creates (and rotates) separate copies of the shape. By putting the first shape into a group we’ve secured that all created and rotated shapes are inside this group named treads.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘treads’ group created. (Large preview)

Select the base wheel again, duplicate, position it above treads in the Layers panel list, and scale it down by 14px. Change Color to #3F3F3F and turn on Borders — set Color to #000000, Position to Inside and Width to 1px.

Screenshot of the steps described in the previous paragraph of the tutorial.
Continue working on the tire details. (Large preview)

Duplicate this circle, turn off Fills and set the Border Width to 20px. We only want to show 24 of the Borders14 on the top left side and 14 on the bottom right side. To do that, type in the Dash field r*π*0.25 where r is diameter of the circle (254px in my case), 0.25 is 25% (or 14) of the border, and π is 3.14.

So in this case enter the following formula in the Dash field: 254*3.14*0.25, and press Enter (or Tab) on the keyboard.

Note: If you enter a number in the Dash field and press Tab on the keyboard, Sketch will automatically fill the Gap field with the same number. Same thing will happen if you press Enter.

Screenshot of the steps described in the previous paragraph of the tutorial.
Let’s show only 2/4 of the borders. (Large preview)

Duplicate the circle, scale it down a bit, set the Borders Width to 12px and apply an Angular Gradient with the following properties:

  1. #9D9D9D
  2. #000000
  3. #000000
  4. #595959
  5. #000000
  6. #000000
Screenshot of the steps described in the previous paragraph of the tutorial.
Set an Angular Gradient on the circle shape. (Large preview)

Then, apply a Gaussian Blur effect with an Amount of 4.

Screenshot of the steps described in the previous paragraph of the tutorial.
Apply a Gaussian Blur. (Large preview)

Once again, duplicate the circle, turn off Gaussian Blur and scale it down. Turn on Fills, make sure it is still #3F3F3F, set the Borders to Outside position and Width to 1px. Change Color to Linear Gradient and use #000000 for the first color stop and #444444 for the last color stop.

Add Inner Shadows — for the Color use #FFFFFF at 20% Alpha and set Blur to 2; then apply Shadows — for the Color use #000000 at 90% Alpha and set Blur to 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Inner Shadows effect added. (Large preview)

Now it’s the perfect time to add a bit of a texture! Select and copy the wheel base shape, paste it on top, then Move Backward once so it sits just beneath the circle we’ve just created. Set Fills to Pattern Fill, Type to Fill Image and choose the bottom right pattern. Set Opacity for this shape to 10%.

Screenshot of the steps described in the previous paragraph of the tutorial.
Now add a bit of texture. (Large preview)

Select the circle on top, duplicate, turn off Borders, Inner Shadows and Shadows. Set Fills to #000000 and Opacity to 100% and scale down this circle by 32px. Apply a Gaussian Blur with the Amount of 4.

Screenshot of the steps described in the previous paragraph of the tutorial.
(Large preview)

Push it down 3px, then duplicate and move the duplicate 6px up.

Screenshot of the steps described in the previous paragraph of the tutorial.
Duplicate then move the duplicate up. (Large preview)

Duplicate the last circle, turn off the Gaussian Blur, push it down by 3px and scale it down by 4px. Add a Shadows effect with the Color set to #FFFFFF at 90% Alpha and Blur set to 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
Duplicate the circle again, push and scale it down a bit. Almost there! (Large preview)

Now, duplicate this circle, turn off Shadows and scale it down a bit (by 2px). Turn on Borders, set position to Inside, Width to 1px and apply a Linear Gradient:

  1. #CCCCCC
  2. #A6A6A6
  3. #A4A4A4
  4. #CFCFCF
Screenshot of the steps described in the previous paragraph of the tutorial.
Apply a Linear Gradient. (Large preview)

Change Fills to Angular Gradient with the following properties (attention! it’s a long list of color stops):

  1. #D3D3D3
  2. #ACACAC
  3. #D8D8D8
  4. #B4B4B4
  5. #8F8F8F
  6. #B2B2B2
  7. #C4C4C4
  8. #A4A4A4
  9. #C3C3C3
  10. #ADADAD
  11. #ADADAD
  12. #949494
  13. #BBBBBB
  14. #929292
  15. #C2C2C2
  16. #B4B4B4
  17. #8F8F8F
  18. #B4B4B4
  19. #D8D8D8
  20. #A9A9A9
Screenshot of the steps described in the previous paragraph of the tutorial.
Apply an Angular Gradient. (Large preview)

Then, add an Inner Shadows effect — set Color to #000000 at 50% Alpha and set Blur and Spread to 2.

Duplicate, scale it down by 14px, change Fills to #434343 Solid Color, Borders position to Outside, and Inner Shadows properties to: Color #000000 at 90% Alpha, Blur and Spread set to 24.

Then add two Shadows effects:

  • first — Color: #000000 at 50% Alpha; Y: 2; Blur: 5
  • second — Color: #000000 at 50% Alpha; Blur: 2
Screenshot of the steps described in the previous paragraph of the tutorial.
Add two Shadows effects. (Large preview)

Again, duplicate the shape, scale it down by 8px, turn off Fills, Shadows and Inner Shadow, and set Borders Color to #414141.

Screenshot of the steps described in the previous paragraph of the tutorial.
Duplicate and scale down the circle. (Large preview)

Switch to the Oval tool (O), and draw a circle from the intersection of the guides. Turn off Fills, set Borders Color to #575757, position to Inside and Width to 1px.

Duplicate, scale it down a bit and make sure the border Width is 1px. Repeat this seven more times, so at the end you have nine concentric circles. Make sure that all Borders Width are 1px. Use the image below as reference.

Screenshot of the steps described in the previous paragraph of the tutorial.
The nine concentric circles. (Large preview)

Select all the concentric circles and put them into a group.

Rims

We will start working on the rim design next.

Draw a circle from the intersection of the guides, then draw a rectangle on top and center it horizontally to the circle.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start working on the rim design. (Large preview)

Select this rectangle, double-click on it to switch to vector editing mode and move the points until you have something like on the image below. Select the top two points and set the Radius to 20.

Screenshot of the steps described in the previous paragraph of the tutorial.
Set the radius of the top two points. (Large preview)

We will use Rotate Copies again to distribute this shape around the circle. Select both — circle and the modified rectangle — turn off Borders and place them into a group. Now select the modified rectangle, go to LayerPath, select Rotate Copies, enter 4 in the dialog box (so we’ll have a total of five shapes), click Rotate, and align the circular indicator to the intersection of the guides. When done, press Esc or Enter.

Screenshot of the steps described in the previous paragraph of the tutorial.
Use Rotate Copies to distribute this shape around the circle. We’re getting closer to the cloverleaf design! (Large preview)

Select all shapes inside the group and apply a Subtract operation from the top toolbar. Add Inner Shadows effect — for the Color use #FFFFF at 50% Alpha and set Blur to 2. Then apply Shadows with Color set to #000000 at 70% Alpha and both Blur and Spread set to 2. Finally, change Fills to #000000.

Screenshot of the steps described in the previous paragraph of the tutorial.
Subtract, add Inner Shadows and Shadows, change Fills to black. (Large preview)

Draw a circle from the intersection of the guides but make it a bit bigger than the shape below, then draw a shape and center it horizontally to the circle. Select both, turn off Borders and put them into a group. Select the shape and perform a Rotate Copies operation. Enter 4 in the dialog box (so again, we’ll have a total of five shapes), click Rotate, and align the circular indicator to the intersection of the guides. When ready, press Esc or Enter.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Rotate Copies feature is useful again. (Large preview)

Select all shapes inside the group and apply a Subtract operation from the top toolbar. Add an Inner Shadows effect — for the Color use #FFFFF at 50% Alpha and set Blur to 2. Change Fills to #131313.

Screenshot of the steps described in the previous paragraph of the tutorial.
Subtract, then add Inner Shadows. (Large preview)

Now, we will create one rim bolt head.

Zoom in close enough (I zoomed in to 400%) and draw a circle. Set Fills to #4F4F4F, change Borders position to Outside, Width to 1px and use #8F8F8F for the Color. Add one more border but this time use #000000 for the Color, set position to Center and make sure the Width is 1px.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create a bolt head — first steps. (Large preview)

Draw a rectangle in the middle of the circle, turn off Borders, enter vector editing mode, hold Shift and click on the right segment to add a point in the middle, then do the same for the left segment. Push those points 2px to the left and to the right to create a hexagonal shape. Apply a Linear Gradient for the Fills — use #AEAEAE for the top and #727272 for the bottom color stop. Add Inner Shadows using #000000 at 50% Alpha for the Color and set Blur to 2, and apply Shadows using #000000 at 90% Alpha for the Color and set Blur to 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
Continue working on the bolt head. (Large preview)

Duplicate the hexagonal shape, enter vector editing mode, select all the point on the left side and push them 1px to the right, then select all top points and push them 1px down, push the bottom points 1px up and the right points 1px left. Clear the Shadows and modify the Linear Gradient:

  1. #8F8F8F
  2. #979797
  3. #A4A4A4
  4. #636363
  5. #4A4A4A

Now apply an Inner Shadows effect. For the Color use #000000 with 50% Alpha and set Blur to 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
The bolt head details, now with the gradient applied. (Large preview)

Select all the shapes that we used to create the bolt head and group them into a bolt head group. We can Create Symbol out of the bolt head group and we can use it as many time as we need it.

To create the new Symbol, select the bolt head group, right-click on it, and choose Create Symbol from the menu. The dialog box Create New Symbol will appear, give a name to the symbol (bolt head) and click OK.

Now we need to distribute the bolt head symbols around the circle. Duplicate the symbol, choose Rotate from the top toolbar, drag the crosshair marker to the the intersection of the guides, and rotate it 72 degrees. Continue duplicating and rotating the symbol in 72-degree increments, without letting the selection go.

Screenshot of the steps described in the previous paragraph of the tutorial.
Distribute the ‘bolt head’ symbols around the circle. (Large preview)

Now select each symbol instance and adjust the angle of rotation to 0 degrees.

Tip: I’m suggesting to initially adjust the angle to 0 degrees so that you can better see the process and how the bolts will look like when placed on the rim. Once the rim bolts are in place, though, my recommendation is to experiment some more and try setting a different angle of rotation for each bolt symbol. This will make the wheels look more realistic — after all, in real life it’s much more likely to see rim bolts at random angles than aligned perfectly to 0 degrees!

Finally, select all the instances of the bolt head symbol, place them into a group bolts and perform a Move Backward once.

Screenshot of the steps described in the previous paragraph of the tutorial.
The group ‘bolts’ is now finished. (Large preview)

Draw a shape, set Border Color to #CFCFCF, set Width to 1px and position to Inside, and use a Linear Gradient for the Fills:

  1. #5F5F5F
  2. #B5B5B5
  3. #CBCBCB

Then add Inner Shadows effect using #000000 at 30% Alpha, and Blur set to 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
Continue working on the rim details. (Large preview)

Grab the Vector tool (V) and draw two shapes that we will use for the highlights. Use a Linear Gradient for the Fills — use for the top color stop #F3F3F3 at 100% Alpha and the same color for the bottom but at 0% Alpha. Use the same gradient settings for both shapes and also apply a Gaussian Blur with the Amount of 1 to both shapes.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the highlights. (Large preview)

Select all shapes that we’ve just created, group them and distribute them evenly around the rim. Use the same method that we used for the bolt heads.

Screenshot of the steps described in the previous paragraph of the tutorial.
Distribute the shapes around the rim. (Large preview)

Select the Oval tool (O) and draw a circle from the intersection of the guides. Turn off Borders and use Linear Gradient with colors set to #D8D8D8 for the top stop and #848484 for the bottom stop. Use Inner Shadows and Shadows to make it look slightly raised.

Let’s add a light Inner Shadows effect with the following properties:

  • Color: #FFFFFF at 80% Alpha
  • Blur: 2

Then, add a dark Inner Shadows effect:

  • Color: #000000 at 50% Alpha
  • Blur: 2

Finally, apply a Shadows effect:

  • Color: #000000 at 50% Alpha
  • Blur: 2
  • Spread: 1
Screenshot of the steps described in the previous paragraph of the tutorial.
Create the circle in the middle and apply all the styles. (Large preview)

Duplicate this circle, scale it down a bit, turn off Inner Shadows and Shadows, turn on Borders and add the first border:

  • Color: #B5B5B5;
  • Position: Outside
  • Width: 1px

Then add a second one on the top:

  • Color: #656565
  • Position: Center
  • Width: 1px
Screenshot of the steps described in the previous paragraph of the tutorial.
Work on the details in the center of the rim. (Large preview)

Let’s finish the wheel design by adding to the rim the Porsche emblem.

Note: Recreating the original Porsche logo for the rims, all in vectors, is outside of the scope of this tutorial. There are a few options — you can create it yourself by following the same basic principles outlined on these pages; you can download the logo from Wikipedia in SVG format and then try to modify it; or you can download a copy of the logo in vector lines from my website (porsche-line-logo-f.svg). This copy of the Porsche logo was created by me from scratch, all in vectors, and this is the variant that I recommend you to use.

After downloading the logo file (porsche-line-logo-f.svg) bring it into our design.

Switch to the Scale tool in the top toolbar, and in the dialog box enter 20px in the height field, to adjust the size of the logo. Align the logo horizontally with the circle below.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the Porsche logo to the center of the rim. (Large preview)
Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche emblem in the center of the rim (detail close-up). (Large preview)

Completing the wheels — two possible workflows

Since a copy of the front wheel (once it’s complete) will be used more than once in our illustration, we have two options now:

  • A. We can complete the front wheel design, duplicate the wheel, make a couple of tweaks, and use the duplicate as the rear wheel. This is the easiest variant.
  • B. Or, for learning purposes, we can use a workflow involving the use of nested symbols. This is the more interesting option which I’ll explore in more detail in a bit. Buckle up!

A. Workflow #1: duplicate the wheel and adjust the copy

Pick up the Vector tool (V) and draw a shape on top of the wheel. Turn off Borders and Fill the shape with black #000000 color. Apply Gaussian Blur with an Amount of 10. This way we will recreate the shadow from the car body over the wheel — just an extra bit of realism added.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the shadow from the car body over the wheel. (Large preview)

Select the wheel group, wheel base copy layer and the shadow shape layer and group these into a front wheel group.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the ‘front wheel’ group. (Large preview)

Now that the wheel is ready, duplicate the front wheel group, rename the group in the Layers panel list to rear wheel and drag it to the right to its place.

Screenshot of the steps described in the previous paragraph of the tutorial.
[Move the ‘rear wheel’ group to its place. (Large preview)

Select the wheel group inside and push it 20px to the right, then select the wheel base copy layer and push it 20px to the left. The rear wheel is ready.

Screenshot of the steps described in the previous paragraph of the tutorial.
Move the ‘wheel’ group to the right, and the ‘wheel base copy’ layer to the left. The ‘rear wheel’ group is ready. (Large preview)

B. Workflow #2: use nested symbols

Pick up the Vector tool (V) and draw a shape on top of the wheel. Turn off Borders and Fill the shape with black #000000 color. Apply Gaussian Blur with an Amount of 10. This way we will recreate the shadow from the car body over the wheel — just an extra bit of realism added.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the shadow from the car body over the wheel. (Large preview)

The wheel is finished. Now we’ll use a symbol and a nested symbol to create the front and rear wheels.

Select the wheel group, wheel base copy layer and the shadow shape layer and group these into a front wheel group.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the ‘front wheel’ group. (Large preview)

Here we’re coming to the more interesting bits! Select the wheel group and create a wheel symbol, then select the front wheel and create a front wheel symbol. The front wheel symbol is now a nested symbol!

Tip: You can learn more about nested symbols in the Sketch help pages dedicated to this topic, and in the following article written by Noam Zomerfeld.

Nested symbols are regular symbols that are made from other symbols that already exist in your Sketch file. In this case, the front wheel symbol is made from the wheel symbol, so the wheel symbol is nested inside the front wheel symbol.

What could be better than one symbol? Perhaps a symbol with another one inside it — enter Nested Symbols! This feature gives you a lot of possibilities when combining symbols together. Nesting symbols can be especially useful when you need to create variations of one symbol.
— Javier-Simon Cuello, “Unleashing The Full Potential Of Symbols In Sketch

Now, go to the Symbols page in Sketch, duplicate the front wheel symbol, select the wheel group and push it 20px to the right, then select the wheel base copy and push it 20px to the left. At the end, rename this symbol to rear wheel.

Screenshot of the steps described in the previous paragraph of the tutorial.
Front and rear wheel symbols. (Large preview)

Go back to our design, select and duplicate the front wheel symbol, then using the Inspector panel change the symbol to rear wheel, rename the symbol in the Layers panel list to rear wheel and drag it to the right. Done!

So far it may seem that we’ve spent more time playing with nested symbols, compared to the other workflow. That’s true. But also we have learned how to use this feature — and now if you would like to change the design of the wheels, instead of doing so in two separate groups, you’ll need to do it only once inside the wheel symbol and the changes will be automatically applied to both wheels of the car. This is why we used a nested symbol to create the front and rear wheels. (Also, imagine if you’re working on a design of a vehicle that has many more wheels visible from the side, not only two! The time saved will multiply.)

Back to the bigger picture — with the wheels complete, we are very close to the final design. Let’s take a look.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche 911 should look similar to this now. (Large preview)

The Shadow Under the Wheels and the Car Body

Pick the Oval tool and draw an ellipse under the wheels. Set Fills to #000000 with 80% Opacity, turn off Borders and apply a Gaussian Blur with an Amount of 5.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start making the shadow below the car. (Large preview)

Duplicate the oval shape, adjust the width using Resize handles (make it smaller), and set Fills Opacity to 50%.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add one more oval shape. (Large preview)

Duplicate this shape once again, adjust the width, and set Fills Opacity for this layer to 80%.

Screenshot of the steps described in the previous paragraph of the tutorial.
And one more. (Large preview)

Select the shadow ellipses and group them all into a shadows group. Move this group to the very bottom in the Layers panel list.

17. Final Touches — The Racing Decals

We are almost there! It’s time to add some racing decals to the car body and to the windshields.

Screenshot of the steps described in the previous paragraph of the tutorial.
Try to find some inspiration for the racing decals and stickers. (Large preview)

The Porsche sticker

Jump over to the Wikimedia Commons website and download the Porsche Wortmarke in SVG format. Bring it to our design, scale it up and position it like on the image below.

Screenshot of the steps described in the previous paragraph of the tutorial.
The ‘Porsche Wortmarke’ added to the door. (Large preview)

Create some rectangles using the Rectangle tool (R), set Fills to #0F0F13 and turn off Borders. Select all elements and group them into a porsche sticker group, then drag this group inside bodywork just below the door layer.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add some decoration around the ‘Porsche’ sticker letters. (Large preview)

Shell sticker

Next, download the vintage Shell logo in SVG format and open it in Sketch. Delete the white rectangle at the bottom inside the logo group, then copy and paste it into our design. Place it just above the porsche sticker in the Layers panel list and position it like on the image below.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the vintage Shell logo sticker. (Large preview)

Dunlop sticker

Download the Dunlop logo in SVG format, open it in Sketch and delete the yellow rectangle. Bring it to our design, scale it down a bit and place in close to the tail light. Make sure that the logo is inside the bodywork group, right above the Shell logo in the list of layers.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the Dunlop logo sticker. (Large preview)

Marlboro sticker

Get the SVG version of the Marlboro logo from Wikimedia Commons, paste into our design and scale it down. Use the resize handles to squeeze the red shape, then move the letters up, close to the red shape, and finally change Fills for the red shape to Linear Gradient with the following parameters:

  1. #E60202
  2. #BB0101
  3. #860000
Screenshot of the steps described in the previous paragraph of the tutorial.
Add and modify the Marlboro logo sticker. (Large preview)

Please make sure that this logo is inside bodywork group and above “Dunlop” logo.

Heuer Chronograph sticker

Download and open in Sketch the Tag Heuer SVG logo. Delete everything except: the rectangle with the black border, the red rectangle, and the word “Heuer”.

Select the rectangle with the black border, turn off Borders and change Fills to #CC2132. Next, select the inner red rectangle, turn on Borders, set Color to #FFFFFF, position to Outside and Width to 12px. Then use the Type tool (T) and type the word Chronograph — for the font use Helvetica Bold, with the size set to 72px.

Note: If you don’t have Helvetica Bold installed, use a font similar in appearance (for example, Arial Bold), as this scale it would be difficult to spot the differences.

Convert the text block into vector shapes, by right-clicking on it and selecting Convert to Outlines. Finally, select the bigger red rectangle, enter vector editing mode, select the top two points and push them down a bit. Select everything and place all the elements into a heuer chronograph logo group.

Screenshot of the steps described in the previous paragraph of the tutorial.
Create the ‘heuer chronograph logo’ group. (Large preview)

Bring this modified logo to our design, scale it down and place it onto the car body. Like before, make sure it’s inside bodywork, and it’s above the Marloboro logo.

Screenshot of the steps described in the previous paragraph of the tutorial.
Put the Heuer Chronograph sticker on the car, to the left of the driver’s door. (Large preview)

Porsche Crest Badge

Jump over to Wikimedia and download the Porsche logo in SVG format. We will need to modify and simplify it a bit because it’s too complex and we don’t need all of these details for the scale at which we’ll be using it in our illustration.

Open the SVG logo file in Sketch, and first delete all the groups (amw-link and d-link) inside it. Then, select the shape on top, press Enter to switch to vector editing mode, select the word “Porsche” and the registered trademark symbol and delete them as well.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start modifying the Porsche logo. (Large preview)

Next, click on the arrow in the front second crest compound shape to reveal its components, select the four paths and drag them outside the compound path, then change their color to #B12B28. Reveal the contents of the first compound crest shape, select all the paths that form the word “Porsche” and delete them.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche crest logo is now complete. (Large preview)

Bring the modified Porsche crest logo to our design, scale it down, select the path that is the last one inside the Porsche logo group and add a Shadows effect — for the Color use #000000 at 50% Alpha and set Blur to 2.

Screenshot of the steps described in the previous paragraph of the tutorial.
Put the Porsche crest logo in place on the car body. (Large preview)

The Porsche crest badge should be placed inside the bodywork group just like the previous stickers that we added, above the heuer chronograph logo group.

Rallye Monte-Carlo sticker

Draw a rounded rectangle using the Rounded Rectangle tool (U), enter vector editing mode and add and move the vector points to make the shape like on the image below.

Set Color to #9C010E and turn off Borders. Duplicate this shape, change Color to, i.e., #000000 so you can see better what you are doing, enter vector editing mode, select the top points and push them down a bit. Push by the same distance the right points to the left, and the left points to the right. Then push up the bottom points a bit more.

Turn off Fills, turn on Borders with position set to Inside, Width set to 6px, and Color to #D7CB82. Convert Borders into a shape by going to LayerConvert to Outlines.

Screenshot of the steps described in the previous paragraph of the tutorial.
Start working on the Rallye Monte-Carlo sticker. (Large preview)

Draw a rectangle without Borders, set Color to #D7CB82, enter vector editing mode, add points in the middle of the top and bottom segment, and push them up and down a bit. Type the words: “SIEGER, WINNER, VAINQUEUR, 1968”. For the font use Helvetica Bold (or alternatively Arial Bold) with the #9C010E Color. Add the Porsche Wortmarke (we’ve used it earlier, remember?) to the bottom, and set Color to #D7CB82.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the shape, text, and the ‘Porsche Wortmarke’. (Large preview)

Convert text to outlines, select the “1968” shape on the left side of the rectangle, zoom in and use Transform from the top toolbar to modify the shape:

  1. select the middle point on the right side and push it up a bit;
  2. select the bottom point on the right side and push it down the same amount of pixels.

Perform a similar action for the “1968” on the right side of the rectangle, but this time use the middle and bottom points on the left side.

Screenshot of the steps described in the previous paragraph of the tutorial.
Continue adding the details to the Rallye Monte-Carlo sticker. (Large preview)

Type “RALLYE” “MONTE” “-CARLO” as a three separate words, use the same font and change the Color to #D7CB82.

Again, do a Convert to Outlines action and use Transform from the top toolbar to modify the shapes. I won’t go much into details here, but first modify the words “RALLYE” and “-CARLO” by using the method outlined above. Then, select all three shapes (the words), invoke the Transform tool, select the middle top point and push it up a bit to make the shapes elongated, and finally scale it up a bit by holding Alt + Shift on the keyboard while dragging the top right Resize handle. Use the image below as a reference.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Rallye Monte-Carlo sticker finished. (Large preview)

Select and group all the elements we used to create this sticker into a rallye monte-carlo group, bring it into our design, and put it on the side windshield. In the Layers panel list this sticker should be inside the windshields group on top.

Screenshot of the steps described in the previous paragraph of the tutorial.
Put the Monte-Carlo sticker on the side windshield. (Large preview)

Smashing Magazine Sticker

This is the last sticker we are going to put on the car. Download the Smashing Magazine logo in SVG format, open it in Sketch and draw a red (#D33A2C) rectangle below the logo. Select both, create a group Smashing Magazine sticker, copy and paste into our design. Place it next to Rallye Monte Carlo sticker and scale it if needed.

In the Layers panel list this should be inside the windshields group on top.

Screenshot of the steps described in the previous paragraph of the tutorial.
The Smashing Magazine sticker added. (Large preview)

I encourage you to add even more decals to the car body and the side windshield. Use the image below as a source for your inspiration.

Note: These are just examples and recreating all the decals in vectors is outside of the scope of this tutorial. You can apply the principles learned from this tutorial and tweak the decals in vector format in a similar way.

Screenshot of the steps described in the previous paragraph of the tutorial.
Some side windshield decals examples. (Large preview)
Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche 911 car body decals examples. (Large preview)

Racing Number and Drivers Names

One more important detail — since this car is a racing car we need to add a racing number to it.

Download the Montserrat font family (if you don’t have it already), install only the “Montserrat Bold” font variant, and type the racing number. Set the Size to 180px and the Color to #000000. Then, Convert to Outlines to be able to apply a gradient to the racing number, and change Fills to a Linear Gradient:

  1. #22222B
  2. #3E3E42
  3. #656566
  4. #1B1B1E
  5. #0F0F13
Screenshot of the steps described in the previous paragraph of the tutorial.
Add the racing number. (Large preview)

Now add the drivers’ last names. I will add shamelessly my last name and the last name of one of my best friends, Ivan Minic. Use the Text tool to add the names, for the font use again “Montserrat Bold”, set Size and Line to 20px and Color to #2F2F2F.

Screenshot of the steps described in the previous paragraph of the tutorial.
Add the drivers’ last names. (Large preview)

Select the names and the racing number, and move them inside the bodywork group, just above the door layer.

Select and put all elements created so far into one group — Porsche 911. Our Porsche 911 is now officially finished!

Screenshot of the steps described in the previous paragraph of the tutorial.
The Porsche 911 in all its glory! Great job! (Large preview)

Finally, let’s add a background. Create a rectangle of the same size as the artboard, set the Fills to #F4F3F2, and push it below the Porsche 911 group.

Final image 3/3: Add the background and complete the Porsche 911 tutorial illustration!
Final image 3/3: Add the background and complete the Porsche 911 tutorial illustration! (Large preview)

Conclusion

We’ve put a lot of time and effort to reach the final destination and now you know too how to create all in vectors one of my favorite cars, the original Porsche 911 from 1968, in Sketch app. 🙂

The tutorial probably wasn’t too easy, but the end results were well worth it, in my opinion.

The next step, of course, is to design your own favorite car. Select a car (or another object you like) and be sure to find as many photos of it from different angles, so that you can carefully replicate all of the important details.

More car illustrations for your inspiration — these are some of other racing cars that I’ve been creating in Sketch recently.
More car illustrations for your inspiration — these are some of other racing cars that I’ve been creating in Sketch recently. (Large preview)

As you can see, there are certain tools and features in Sketch that you can master to create similar objects — use them to speed up and simplify the whole process.

I hope you will also remember how important is the proper naming of the layers/shapes (and groups), and stacking them in the right order so that even the most complex of illustrations are easy to organize and to work with.

Finally, if you have any questions, please leave a comment below or ping me on Twitter (@colaja) and I will gladly help you.

Further Reading

  1. Mastering the Bézier Curve in Sketch” (a tutorial by Peter Nowell)
  2. Designing A Realistic Chronograph Watch In Sketch” (a tutorial by Nikola Lazarević)
  3. Styling — Fills” (Sketch help page)
  4. Harnessing Vector Awesomeness in Sketch” (a tutorial by Peter Nowell)
  5. Vector Editing (and Vector Editing Mode)” (Sketch help page)
  6. Shapes” (Sketch help page)
  7. Copy styles in Sketch” (a tutorial by Drahomír Posteby-Mach)
  8. Getting the pixels right in Sketch” (a tutorial by Nav Pawera)
  9. Sketch Symbols, Everything you need to know, and more!” (a tutorial by Brian Laiche)
  10. Unleashing The Full Potential Of Symbols In Sketch” (an article by Javier Simon Cuello)
  11. How to Edit Shapes with Rotate Copies tool” (Sketch help page)
  12. Creating Nested Symbols” (Sketch help page)
  13. Nested Symbols in Sketch — I 😍 you” (a tutorial by Noam Zomerfeld)
  14. Unleashing The Full Potential Of Symbols In Sketch: Nested Symbols” (a tutorial by Javier Cuello)
Smashing Editorial (mb, ra, yk, il)

Use Purchasing Trends to Merchandise Products

You are not alone if confused about the products people are apt to buy today. Even consumers aren’t always sure. Most consumers have opted to stay closer to home during a time when family vacations and festivals would have been the norm.

How we present information on the home page, landing pages, and across social media impacts sales. If you’re struggling to find what works for your target audience, consider using overall purchasing trends as a guide.

Covid-19 Commerce Insight (“CCInsights”) is a collaboration of Emarsys, the omnichannel engagement platform, and GoodData, a business-intelligence firm. Its purpose is to provide trends and analysis, based on 1 billion consumers and 2,500 brands, of the economic impact of Covid-19. According to CCInsights, U.S. consumers in the mid-2020 are focused on goods that fall into four main categories:

  • Physical self-improvement. Personal exercise equipment and nutrition.
  • Simplified household management. Appliances, gadgets, and tools that make running the household smoother.
  • Comfortable living. Home decor and related products that make the house feel more like an oasis.
  • Outdoor fun. Items for the backyard and local outings.

Even when they don’t directly apply to your business model, understanding trends helps identify ways to present products online.

CCInsights reports that the simple jump rope gained momentum mid-March and has retained popularity ever since. It’s ranked in the top 10 trending products many times over, peaking at a year-over-year uplift of more than 62,000 percent in May and 2,841 percent for the year ended July 30.

<img aria-describedby="caption-attachment-355688" class="wp-image-355688" title="Trending products, ending July 30, 2020" src="https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020.jpg" alt="Trending products for the twelve months ending July 30, 2020. Skipping ropes increased 2,841 percent year-over-year, followed by motorcycle helmets (459 percent), screw guns (204 percent), and rugs (283 percent) Source: CC Insights.” width=”1002″ height=”263″ srcset=”https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020.jpg 2000w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020-300×79.jpg 300w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020-570×150.jpg 570w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020-768×202.jpg 768w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020-1536×403.jpg 1536w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020-150×39.jpg 150w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/pec-trends-1200-0723020-500×131.jpg 500w” sizes=”(max-width: 1002px) 100vw, 1002px”>

Trending products for the twelve months ending July 30, 2020. Skipping ropes increased 2,841 percent year-over-year, followed by motorcycle helmets (459 percent), screw guns (204 percent), and rugs (283 percent) Source: CCInsights.

Product Trends

Product trends tell us what consumers are more likely to purchase.

Consider, for example, personal fitness items. Top trending goods (beyond jump ropes) include handheld weights, boxing gloves, and basketball hoops. Ranked lower are treadmills and ellipticals. This tells us consumers don’t have the room or budget for full-sized equipment. Perhaps many are waiting for gyms reopen in their area.

Motorcycle helmets and golf clubs are on the rise. Here we can deduce plenty of people want to get outdoors, but they’re more apt to do so either by themselves or in small groups.

The acceleration of residential power tools tells us that folks are tackling home-based do-it-yourself projects. That means they’re more focused on living comfortably.

The trend of programmable washing machines and dishwashers explains a desire to work smarter, not harder.

From all this, we can decipher that most consumers want to find ways to appreciate life at home by making things as functional, comfortable, and attractive as they can. Merchants can use these insights to select the best products to feature throughout their online store and third-party channels.

Examples

By understanding trends in your target audience, you can focus on what’s most apt to appeal.

For example, Dick’s Sporting Goods combines trending activities with context-of-use images to promote bikes, golf equipment, backyard games, and portable fitness products.

Collage of at home and outdoor sports.

Featured categories on Dick’s Sporting Goods home page include Bikes, Golf, Backyard Fun, and Fitness.

BSN Sports’ home page gives primary attention to at-home training, directly linking to relatively small and affordable products.

Image of a couple training in their backyard.

BSN Sports’ home page focuses on at-home training, directly linking to relatively small and affordable products.

Lowe’s shifts its long term focus from home improvement, tools, and appliances to converting small spaces into workplaces. The home page links to do-it-yourself worksheets and unique products, such as headphones, office chairs, and wi-fi range extenders.

Lowe's home page featuring home office space

The top of Lowe’s home page focuses on home-based work and schooling.

The Container Store groups items in multiple categories to create a robust section called “Home Learning Solutions.”

The Container Store landing page for home schooling

The Container Store’s landing page for homeschooling, called “Home Learning Solutions.”

Not all brands can take advantage of trends. Still, even merchants that sell luxury or high-cost merchandise have options.

Take Cub Cadet, for example. It manufactures residential and commercial yard equipment — not minor accessories. Before displaying a single product, its home page promotes free delivery or local pick-up as well as financing options — capitalizing on trends of comfortable and affordable home maintenance.

Cub Cadet breakout of slides for delivery and financing

Cub Cadet home page slider promotes free delivery or pick-up and financing options before featuring a product, an Ultima Series ZTX.

If you sell higher-priced items — essential or not — financing options, free delivery, and extended warranties are an excellent way to convey value.

Ecommerce Growth

Consumer response to the pandemic isn’t changing anytime soon. With the end of summer near and continued restrictions, most people plan to stay close to home for at least the rest of the year. This translates to continued ecommerce growth across most sectors.

However, with growth comes competition. To keep and attract customers, consider using nationwide trends as part of your product spotlight strategy.

5 Content Marketing Ideas for September 2020

Content marketing is the act of creating, publishing, and promoting articles, podcasts, and videos with the intent of attracting, engaging, and retaining customers. Producing such content in September 2020 is difficult, however, without recognizing the worldwide pandemic.

Fortunately, there are still many opportunities to generate productive content around back-to-school, dating, hobbies, shopping, and reading.

Here are five content marketing ideas your business can try in September 2020.

1. Back-to-school Tips

Although many schools will start in August, there is plenty of time to offer back-to-school content in September due to the on-going coronavirus pandemic.

This year, many schools will likely hold some combination of online and in-person classes. What’s more, the balance of homeschooling and physical classes will probably be fluctuating throughout the month and beyond. Your business could help with this uncertainty.

<img aria-describedby="caption-attachment-355633" class="wp-image-355633 size-large" src="https://www.practicalecommerce.com/wp-content/uploads/2020/08/080420-homeschooling-by-jessica-lewis-570×381.jpg" alt="September content could offer tips and suggestions to help parents manage work and homeschooling. Photo: Jessica Lewis.” width=”570″ height=”381″ srcset=”https://www.practicalecommerce.com/wp-content/uploads/2020/08/080420-homeschooling-by-jessica-lewis-570×381.jpg 570w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/080420-homeschooling-by-jessica-lewis-300×200.jpg 300w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/080420-homeschooling-by-jessica-lewis-768×513.jpg 768w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/080420-homeschooling-by-jessica-lewis-150×100.jpg 150w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/080420-homeschooling-by-jessica-lewis-500×334.jpg 500w, https://www.practicalecommerce.com/wp-content/uploads/2020/08/080420-homeschooling-by-jessica-lewis.jpg 1000w” sizes=”(max-width: 570px) 100vw, 570px”>

September content could offer tips and suggestions to help parents manage work and homeschooling. Photo: Jessica Lewis.

For September, consider publishing how-to and informational articles, podcasts, or videos that will help parents deal with these challenges.

Here are a few possible examples.

  • Woodworking supply store. Publish articles showing how to build a folding desk for homeschooling or how to transform a table into a stand-up workspace.
  • Office supply retailer. Create a “how-to-find-a-tutor guide” for professionals who might be working from home and homeschooling, too. Include a list of homeschooling supplies.
  • Children’s apparel shop. Produce a series on how to save money on clothing during the school year, since so many classes may be online.
  • Kitchen supply merchant. Produce nutritious recipes that kids can make at home.

2. Stay-at-home Date Nights

The global pandemic has altered the habits of consumers. This includes how couples date. For your business’s September 2020 content marketing, consider creating content around enjoying a fun stay-at-home date night.

Consider content around a fun stay-at-home dating activity, such as painting.

Consider content around a fun stay-at-home dating activity, such as painting. Photo: Ali Ridho.

Try to integrate your company’s products into the stay-at-home ideas. For example, date-night tips from an art supply retailer might include:

  • Complete a paint-by-numbers project,
  • Watch a Bob Ross training episode on YouTube,
  • Trace old photos, transforming them into sketches.

Similarly, an online shop that sells teas and coffees could compose articles around tea tastings, coffee cake making, and the like.

3. New Hobbies

The pandemic is prompting consumers to pick up new hobbies, as described in these example articles:

If this trend continues in September, you could create a series of new hobby suggestions that are related to the products your business sells.

  • Craft shop. Suggest, as examples, crocheting, knitting, sewing, cross-stitch, painting, and scrapbooking.
  • Kitchen supply store. Recommend cooking, baking, coffee-making, or similar.
  • An outfitter. Discuss fly tying, photography, and map collecting.
A craft shop that sold yarn, needles, and patterns could suggest knitting.

A craft shop that sold yarn, needles, and patterns could suggest knitting. Photo: Margarida Afonso.

As a bonus, try to suggest three kinds of hobbies:

  • Hobbies that make money,
  • Hobbies that keep participants physically fit,
  • Hobbies that are creative.

4. Pandemic Holiday Shopping

Starting a new hobby is not the only Covid-induced behavioral change. Shopping habits have changed, too. Holiday shopping in 2020 will be unlike any other year.

Thus, how online stores promote holiday sales may need to change, as well. For example, some consumers may be nervous about product availability and could start shopping much sooner this year.

Consider publishing holiday gift guides in the form of articles, podcasts, and videos as soon as possible.

As inspiration, here are several gift-giving guides (Christmas and otherwise) with a dad-theme.

5. Read a Book Day: September 6

September 6, 2020, is “National Read a Book Day” in the United States. It’s an opportunity to pull out your company’s list of favorite novels and nonfiction works. Book recommendations may not seem exciting, but they can be useful evergreen content.

Book recommendations may not seem too exciting, but they can be useful evergreen content.

Book recommendations may not seem too exciting, but they can be useful evergreen content. Photo: Hu Chen.

As with all content marketing ideas, look for ways to connect your read-a-book listicles to the products your company sells.

For example, an omnichannel farm and ranch supply retailer might choose to recommend novels from Laura Ingalls Wilder, Zane Grey, and Louis L’Amour.

An online retailer selling hiking and camping gear could recommend books such as “Into the Wild, Between a Rock and a Hard Place” by Aron Ralston, who amputated his arm while mountain climbing. Or, “Touching the Void: The True Story of One Man’s Miraculous Survival” by Joe Simpson, who fell from a vertical mountain face in the Andes.

A Practical Guide To Product Tours In React Apps

A Practical Guide To Product Tours In React Apps

A Practical Guide To Product Tours In React Apps

Blessing Krofegha

2020-08-06T10:00:00+00:00 2020-08-07T03:05:17+00:00

As stated on Appcues:

“Product tours — sometimes called product walkthroughs — introduce users to a new product and help them find their bearings.”

Usually, when it needs to showcase a new feature or complex UI functionality in a web app, the customer-success team would send a campaign email to all of its users. While this is a great way to create such awareness, some users might not have the opportunity to see the added feature; hence, the purpose of the email would be defeated.

A better way to increase user awareness of a particular feature in a web app is by integrating concise, self-explanatory UI tips, called product tours.

Product tours guide users to “a-ha” moments, or showcase high-value features that are being underused. Product tours can be powerful tools to introduce users to a new product and to help them find their bearings. They can draw attention to product launches, promo offers, and product sales.

But when done wrong, product tours can end up feeling like a backseat driver. And no one likes a backseat driver, do they?

In this tutorial, you’ll learn about what a product tour is and the types of product-tour packages in the React ecosystem, along with their pros and cons.

If you are building customer-facing products using React, then you might be keen to implement this in your React application. By the end, we’ll have built a product tour for a simple shopping-cart UI using React Joyride.

We won’t go through React and JavaScript’s syntax basics, but you don’t have to be an expert in either of these languages to follow along.

A basic product tour
A basic product tour. (Large preview)

Product Tour Guidelines

Product tours are a tricky aspect of web apps, requiring some user-experience expertise to drive results. I’d recommend going through Appcues’ tips for product tours. The following are a few guidelines to consider.

Never Lecture

Putting a lot of tours on a web page is tempting. But users are usually not keen on long introductory tutorials. They become anxious when they have to ingest a lot of information before being able to use a feature in the app.

Break It Down

Don’t teach everything. Focus on a single feature, and create a tour of two to three steps to showcase that feature. Show many small tours, rather than a single long tour. Prioritize their sequence.

Add Value

Do you enjoy taking your own tour? How about your teammates? Present the tour in such a way that users will understand. Showcase value, rather than stories.

Now that we know the value of product tours and seen some guidelines for building them, let’s cover some React libraries for product tours and learn how to use them.

There are only a few React-based libraries for implementing tours. Two of the most popular are React Tour and React Joyride.

React Tour

React Tour has around 1,600 stars on GitHub and is being actively developed. The best use case for React Tour is a simple product tour in which little customization is required. A demo is available.

How It Works

With React Tour, you pass the className selector and content for each step to the component. The library will render the tour’s user interface based on a button click, or after you’ve mounted the component. It’s simple for static pages and UIs:

 const steps = [ { selector: '.first-tour', content: 'This is the content for the first tour.', }, { selector: '.second-tour', content: 'Here is the content for the second Tour.', } // ...
]

Pros

  • React Tour is best for tours that need little customization.
  • It works well for static content and for dynamic content whose selector labels always exist in the UI.
  • Fans of styled-components might find it interesting because it has a hard dependency on styled-components.

Cons

  • If your project has no dependency on styled-components, then you might not find it easy to implement.
  • Your creativity will be limited because it doesn’t support customization.

React Joyride

The other main product-tour library is React Joyride, which has about 3,100 stars on GitHub and is also actively maintained.

How It Works

We pass the className as a target and the content. The state stores the tour. The Joyride component uses steps as props.

 state = { steps: [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This is another awesome feature!', }, ... ] }; render () { const { steps } = this.state; return ( 
...
); } }

Pros

  • Integrating React Joyride in a web app is less rigid than with React Tour, and it has no hard dependency on other libraries.
  • Events and actions are made available, which fosters customization.
  • It’s frequently improved.

Cons

  • The UI isn’t as elegant as React Tour’s.

Why React Joyride?

Product tours, especially for really big web apps, require customization, and that sets React Joyride apart from React Tour. The example project we’ll make demands some creativity and customization — hence, we’ll go with React Joyride.

Building A Simple Product Tour

First, we’ll build a simple React tour using the props available to us in React Joyride. Next, we’ll use the useReducer hook to automate the tour’s processes.

Clone the “standard-tour” branch in the GitHub repository, or use the web page of your choice, as long as you’re able to follow along.

Install the packages by running npm install.

To start the app, run npm run start.

We’ll be covering the following steps:

  • define the tour’s steps;
  • enable a skip option in each step;
  • change text labels on buttons and links;
  • customize styles like button colors and text alignment.

Then, we’ll add some custom features:

  • autostart the tour;
  • start the tour manually (i.e. with a link or button click);
  • hide the blinking beacon.

The props in React Joyride enable us to perform some basic functionality.

For this tutorial, we’ll build a product tour of the UI shown below:

The web UI. (Large preview)

Define The Tour’s Steps

To begin with, ensure that you’re targeting the particular classNames that will hold the content of the tour on the page — that is, according to whether you’ll be using your UI instead of the shopping-cart UI.

In the component folder, create a Tour.js file, and paste the following code into it. Also, ensure that the target classNames exist in your style sheet. Throughout this article, we’ll tweak the Tour.js component to suit the task at hand.

import React from "react";
import JoyRide from "react-joyride";
const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour’s logo", }, { target: ".tour-cart", content: "View the cart you’ve added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", },
];

What we’ve done is simply define our tour’s steps by targeting the classNames that will form the bedrock of our content (the text). The content property is where we define the text that we want to see when the tour starts.

Enable Skip Option in Each Step

A skip option is important in cases where a user isn’t interested in a particular tour. We can add this feature by setting the showSkipButton prop to true, which will skip the remaining steps. Also, the continuous prop comes in handy when we need to show the Next button in each step.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} /> </> );
};

To change the text labels on either buttons or links, we’ll use the locale prop. The locale prop has two objects, last and skip. We specified our last tour as the End tour, while skip is the Close tour.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} locale={{ last: "End tour", skip: "Close tour" }} /> </> );
};

Customize Styles, Like Button Colors And Text Alignment

The default color of buttons is red, and text alignment is always set right. Let’s apply some custom styles to change button colors and align text properly.

We see in our code that the styles prop is an object. It has other objects with unique values, including:

  • tooltipContainer
    Its key is textAlign, and its value is left.
  • buttonNext
    Its key is backgroundColor, and its value is green.
  • buttonBack
    Its key is marginRight, and its value is 10px.
  • locale
    Its keys are last and skip, and its values are End Tour and Close Tour, respectively.
const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left" }, buttonNext: { backgroundColor: "green" }, buttonBack: { marginRight: 10 } }} locale={{ last: "End tour", skip: "Close tour" }} /> </> );
};

The library exposes some props to use on our elements in place of the default elements, some of which are:

The product tour
The product tour. (Large preview)

useReducer

We’ve seen how to create a product tour and how to customize it using the various props of Joyride.

The problem with props, however, is that, as your web app scales and you need more tours, you don’t just want to add steps and pass props to them. You want to be able to automate the process by ensuring that the process of managing tours is controlled by functions, and not merely props. Therefore, we’ll use useReducer to revamp the process of building tours.

In this segment, we are going to take control of the tour by using actions and events, made available by the library through a callback function.

To make this process feel less daunting, we’ll break this down into steps, enabling us to build the tour in chunks.

The complete source code is available, but I’d advise you to follow this guide, to understand how it works. All of our steps will be done in the Tour.js file in the components folder.

Define the Steps

import React from "react";
import JoyRide from "react-joyride";
const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour’s logo.", }, { target: ".tour-cart", content: "View the cart you’ve added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", },
];

In this first step, we define our steps by targeting the appropriate classNames and setting our content (text).

Define the Initial State

 const INITIAL_STATE = { run: false, continuous: true, loading: false, stepIndex: 0, // Make the component controlled steps: TOUR_STEPS, key: new Date(), // This field makes the tour to re-render when the tour is restarted
};

In this step, we define some important states, including:

  • Set the run field to false, to ensure that the tour doesn’t start automatically.
  • Set the continuous prop to true, because we want to show the button.
  • stepIndex is the index number, which is set to 0.
  • The steps field is set to the TOUR_STEPS that we declared in step 1.
  • The key field makes the tour re-render when the tour is restarted.

Manage The State With Reducer

 const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { // start the tour case "START": return { ...state, run: true }; // Reset to 0th step case "RESET": return { ...state, stepIndex: 0 }; // Stop the tour case "STOP": return { ...state, run: false }; // Update the steps for next / back button click case "NEXT_OR_PREV": return { ...state, ...action.payload }; // Restart the tour - reset go to 1st step, restart create new tour case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date() }; default: return state; }
};

In this step, using a switch statement when case is START, we return the state and set the run field to true. Also, when case is RESET, we return the state and set stepIndex to 0. Next, when case is STOP, we set the run field to false, which will stop the tour. Lastly, when case is RESET, we restart the tour and create a new tour.

According to the events (start, stop, and reset), we’ve dispatched the proper state to manage the tour.

Listen to the Callback Changes and Dispatch State Changes

 import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride";
const callback = data => { const { action, index, type, status } = data; if (action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) } }); }
};

Using the exposed EVENTS, ACTIONS, and STATUS labels offered by React Joyride, we listen to the click events and then perform some conditional operations.

In this step, when the close or skip button is clicked, we close the tour. Otherwise, if the next or back button is clicked, we check whether the target element is active on the page. If the target element is active, then we go to that step. Otherwise, we find the next-step target and iterate.

Autostart the Tour With useEffect

useEffect(() => { if(!localStorage.getItem("tour"){ dispatch({ type: "START"}); }
}, []);

In this step, the tour is auto-started when the page loads or when the component is mounted, using the useEffect hook.

Trigger The Start Button

const startTour = () => { dispatch({ type: "RESTART" });
};

The function in this last step starts the tour when the start button is clicked, just in case the user wishes to view the tour again. Right now, our app is set up so that the tour will be shown every time the user refreshes the page.

Here’s the final code for the tour functionality in Tour.js:

import React, { useReducer, useEffect } from "react";
import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; // Define the steps
const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour’s logo.", disableBeacon: true, }, { target: ".tour-cart", content: "View the cart you’ve added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", },
]; // Define our state
const INITIAL_STATE = { key: new Date(), run: false, continuous: true, loading: false, stepIndex: 0, steps: TOUR_STEPS,
}; // Set up the reducer function
const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { case "START": return { ...state, run: true }; case "RESET": return { ...state, stepIndex: 0 }; case "STOP": return { ...state, run: false }; case "NEXT_OR_PREV": return { ...state, ...action.payload }; case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date(), }; default: return state; }
}; // Define the Tour component
const Tour = () => { const [tourState, dispatch] = useReducer(reducer, INITIAL_STATE); useEffect(() => { if (!localStorage.getItem("tour")) { dispatch({ type: "START" }); } }, []); const callback = (data) => { const { action, index, type, status } = data; if ( action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) }, }); } }; const startTour = () => { dispatch({ type: "RESTART" }); }; return ( <> <button className="btn btn-primary" onClick={startTour}> Start Tour </button> <JoyRide {...tourState} callback={callback} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, }} locale={{ last: "End tour", }} /> </> );
};
export default Tour;

Conclusion

We’ve seen how to build a product tour in a web UI with React. We’ve also covered some guidelines for making product tours effective.

Now, you can experiment with the React Joyride library and come up with something awesome in your next web app. I would love to hear your views in the comments section below.

Resources

Smashing Editorial (ks, ra, al, yk, il)

‘Buy On Google’ Opens to All Merchants

Google Shopping has made its second significant change in the last few months. The first change was implementing free Google Shopping listings. The second is opening the “Buy on Google” program to all merchants, commission-free.

“Buy on Google” allows consumers to purchase products from merchants without leaving Google. The program will roll out to all merchants by early 2021, according to Google.

Consider the example below of the “Buy on Google” process. After searching “hard drives,” a consumer can access the “Shopping” tab and click the “Buy on Google” option.

After searching "hard drives," a consumer can access the “Shopping” tab and click the “Buy on Google” option.

After searching “hard drives,” a consumer can access the “Shopping” tab and click the “Buy on Google” option.

Clicking the first listing (“Samsung Portable SSD T7” external drive) will produce a product page. Consumers can then click “Quick checkout” or “Add to cart,” log in to Google (if they haven’t already), and fill out delivery details and payment info.

Once on the product page, consumers click "Quick checkout" or "Add to cart."

Once on the product page, consumers click “Quick checkout” or “Add to cart.”

Aside from being commission-free, changes to the program include:

  • Linking to your payment provider in Merchant Center. Formerly, Buy on Google advertisers could use only PayPal to process payments from consumers. Shopify Payments is now an option, with more payment processors to come. Merchants will need to link their payment processor with Merchant Center.
  • Handling customer support directly. Google previously provided exclusive support to Buy on Google consumers. Those support queries, such as order or shipping problems, will now initially go to merchants, who must provide an appropriate customer-support email address in Merchant Center.
  • Product returns. Google can process returns from consumers, or merchants can do it themselves. If Google does it, merchants will link to their shipping carrier in Merchant Center. The carrier will then bill merchants directly.
  • Amazon product feeds. Another change is the ability to upload the same product feed for Amazon into Merchant Center. Google will automatically map the fields. This is a huge value-add in my experience, as the technical product-feed glitches can be challenging.

Consumers who purchase through Google receive a guarantee against incorrect or late shipments and not receiving a refund after returning items. Google encourages consumers to contact the merchant first.  If no response after two days, Google provides Shopping support.

Concerns

Audience data is not available to merchants who use “Buy with Google.” If they tag their site with Google Ads or Analytics pixels, merchants can create audiences and set up remarketing campaigns. Merchants can also create lookalike audiences to expand their reach. But now, consumers will purchase directly on Google. Merchants cannot remarket to them.

Consider, also, brand implications. The entire experience is now on Google. Consumers’ product research and subsequent purchase transactions occur through Google — not the merchant’s site. Likely this will diminish merchants’ branding (much like Amazon’s marketplace).

Additionally, participating merchants who submit incorrect product information and perform poor customer service risk suspension by Google.

The Big Picture

Google’s marketplace quest continues. Though it has been live for a while, “Buy on Google” is now available to all merchants. By not paying commissions, merchants can potentially increase advertising budgets. Google Shopping is already a top revenue source for many companies. “Buy on Google” is a logical next step.

Creating A Static Blog With Sapper And Strapi

Creating A Static Blog With Sapper And Strapi

Creating A Static Blog With Sapper And Strapi

Daniel Madalitso Phiri

2020-08-05T09:00:00+00:00 2020-08-06T03:03:48+00:00

In this tutorial, we will build a statically generated minimal blog with Sapper, a Svelte-based progressive JavaScript framework, for our front end, and then use Strapi, an open-source headless content management system (CMS), for the back end of our application. This tutorial is aimed at intermediate front-end developers, specifically those who want the versatility of a headless CMS, like Strapi, as well as the minimal structure of a JavaScript framework, like Sapper. Feel free to try out the demo or check out the source code on GitHub.

To go through the article smoothy, you will need the LTS version of Node.js and either Yarn or npm installed on your device beforehand. It’s also worth mentioning that you will need to have a basic understanding of JavaScript and GraphQL queries.

Before getting started, let’s get some definitions out of the way. A static-site generator is a tool that generates static websites, and a static website can be defined as a website that is sourced from purely static HTML files. For an overview of your options for static-site generators today, check out “Top 10 Static Site Generators in 2020”.

A headless CMS, on the other hand, is a CMS accessible via an API. Unlike the traditional CMS’ of the past, a headless CMS is front-end agnostic and doesn’t tie you to a single programming language or platform. Strapi’s article “Why Frontend Developers Should Use a Headless CMS” is good resource to understand the usefulness of a headless CMS.

Static-site generators, like headless CMS’, are quickly gaining mainstream appeal in the front-end web development community. Both pieces of technology bring with them a much lower barrier to entry, flexibility, and a generally better developer experience. We’ll see all this and more as we build our blog.

You might be wondering, “Why should I use this instead of the alternatives?” Sapper is based on Svelte, which is known for its speed and relatively small bundle size. In a world where performance plays a huge role in determining an effective user experience, we want to optimize for that. Developers today are spoiled for choice when it comes to front-end frameworks — if we want to optimize for speed, performance, and developer experience (like I do in this project), then Sapper is a solid choice!

So, let’s get started building our minimal blog, starting with our Sapper front end.

Sapper Front End

Our front end is built with Sapper, a framework for building extremely high-performance web apps using Svelte. Sapper, which is short for “Svelte app maker”, enables developers to export pages as a static website, which we will be doing today. Svelte has a very opinionated way of scaffolding projects, using Degit.

“Degit makes copies of Git repositories and fetches the latest commit in the repository. This is a more efficient approach than using git clone, because we’re not downloading the entire Git history.”

First, install Degit by running npm install -g degit in your command-line interface (CLI).

Next up, run the following commands in the CLI to set up our project.

npx degit "sveltejs/sapper-template#rollup" frontend
# or: npx degit "sveltejs/sapper-template#webpack" frontend
cd frontend
npm install
npm run dev

Note: We have the option of using either Rollup or Webpack to bundle our project. For this tutorial, we will be using Rollup.

These commands scaffold a new project in the frontend directory, install its dependencies, and start a server on localhost.

If you’re new to Sapper, the directory structure will need some explaining.

Sapper’s App Structure

If you look in the project directory, you’ll see this:

├ package.json
├ src
│ ├ routes
│ │ ├ # your routes here
│ │ ├ _error.svelte
│ │ └ index.svelte
│ ├ client.js
│ ├ server.js
│ ├ service-worker.js
│ └ template.html
├ static
│ ├ # your files here
└ rollup.config.js / webpack.config.js

Note: When you first run Sapper, it will create an additional __sapper__ directory containing generated files. You’ll also notice a few extra files and a cypress directory — we don’t need to worry about those for this article.

You will see a few files and folders. Besides those already mentioned above, these are some you can expect:

  • package.json
    This file contains your app’s dependencies and defines a number of scripts.
  • src
    This contains the three entry points for your app: src/client.js, src/server.js, and (optionally) src/service-worker.js, along with a src/template.html file.
  • src/routes
    This is the meat of the app (that is, the pages and server routes).
  • static
    This is a place to put any files that your app uses: fonts, images, and so on. For example, static/favicon.png will be served as /favicon.png.
  • rollup.config.js
    We’re using Rollup to bundle our app. You probably won’t need to change its configuration, but if you want to, this is where you would do it.

The directory structure is pretty minimal for the functionality that the project provides. Now that we have an idea of what our project directory looks like and what each file and folder does, we can run our application with npm run dev.

You should see the Svelte-eque starter home page of our blog.

A screenshot of the Sapper Starter webpage.
Your Sapper home page. (Large preview)

This looks really good! Now that our front end is set up and working, we can move on to the back end of the application, where we will set up Strapi.

Strapi Back End

Strapi is both headless and self-hosted, which means we have control over our content and where it’s hosted — no server, language, or vendor lock-in to worry about, and we can keep our content private. Strapi is built with JavaScript and has a content editor built with React. We’ll use this content editor to create some content models and store actual content that we can query later on. But before we can do all of this, we have to set it up by following the instructions below.

1. Install Strapi and Create New Project

  • Open your CLI.
  • Run yarn create strapi-app backend --quickstart. This will create a new folder named backend and build the React admin UI.

2. Create Administrator

A screenshot of the Strapi register screen.
Create an admin account. (Large preview)

3. Create Blog Collection Type

  • Navigate to “Content-Types Builder”, under “Plugins” in the left-hand menu.
  • Click the “+ Create new collection type” link.
  • Name it “blog”.
  • Click “Continue”.
A screenshot of the Strapi dashboard - creating a new collection type
Create a new collection type. (Large preview)
  • Add a “Text field” (short text), and name it “Title”.
  • Click the “+ Add another field” button.
A screenshot of the Strapi dashboard - creating a new text field
Create a new Text field. (Large preview)
  • Add a “Text field” (long text), and name it “Description”.
  • Click the “+ Add another field” button.
A screenshot of the Strapi dashboard - creating a new text field
Create a new Text field. (Large preview)
  • Add a “Date field” of the type “date”, and name it “Published”.
  • Click the “+ Add another field” button.
A screenshot of the Strapi dashboard - creating a new date field
Create a new Date field. (Large preview)
  • Add a “Rich Text field”, and name it “Body”.
  • Click the “+ Add another field” button.
A screenshot of the Strapi dashboard - creating a new rich text field
Create a new Rich Text field. (Large preview)
  • Add another “Text field” (short text), and name it “Slug”.
  • Click the “+ Add another field” button.
A screenshot of the Strapi dashboard - adding a new text field
Create a new Text field. (Large preview)
  • Add a “Relation field”.
  • On the right side of the relation, click on the arrow and select “User”.
  • On the left side of the relation, change the field name to “author”.
A screenshot of the Strapi dashboard - creating a new relation
Create a new Relation field. (Large preview)
  • Click the “Finish” button.
  • Click the “Save” button, and wait for Strapi to restart.

When it’s finished, your collection type should look like this:

A screenshot of the Blog collection type showing all its fields
Overview of your Blog collection type. (Large preview)

4. Add a New User to “Users” Collection Type

  • Navigate to “Users” under “Collection Types” in the left-hand menu.
  • Click “Add new user”.
  • Enter your desired “Email”, “Username”, and “Password”, and toggle the “Confirmed” button.
  • Click “Save”.
A screenshot of the User collection type with the 'add new user' button highlighted
Add some user content. (Large preview)

Now we have a new user who we can attribute articles to when adding articles to our “Blog” collection type.

5. Add Content to “Blogs” Collection Type

  • Navigate to “Blogs” under “Collection Types” in the left-hand menu.
  • Click “Add new blog”.
  • Fill in the information in the fields specified (you have the option to select the user whom you just created as an author).
  • Click “Save”.
A screenshot of the Blog collection type with the 'add new blog' button highlighted
Add some blog content. (Large preview)

6. Set Roles and Permissions

  • Navigate to “Roles and Permissions” under “Plugins” in the left-hand menu.
  • Click the “Public” role.
  • Scroll down under “Permissions”, and find “Blogs”.
  • Tick the boxes next to “find” and “findone”.
  • Click “Save”.
A screenshot of the Strapi Permissions page with the find and findone actions highlighted
Set permissions for your Public role. (Large preview)

7. Send Requests to the Collection Types API

Navigate to https://localhost:1337/blog to query your data.

You should get back some JSON data containing the content that we just added. For this tutorial, however, we will be using Strapi’s GraphQL API.

To enable it:

  • Open your CLI.
  • Run cd backend to navigate to ./backend.
  • Run yarn strapi install graphql to install the GraphQL plugin.

Alternatively, you can do this:

  • In the admin UI, navigate to “Marketplace” under “General” in the left-hand menu.
  • Click “Download” on the GraphQL card.
  • Wait for Strapi to restart.
A screenshot of the Strapi Marketplace with the download button on the GraphQL plugin highlighted
Download the GraphQL plugin. (Large preview)

When the GraphQL plugin is installed and Strapi is back up and running, we can test queries in the GraphQL playground.

That is all for our back-end setup. All that’s left for us to do is consume the GraphQL API and render all of this beautiful content.

Piecing Together Both Ends

We’ve just queried our Strapi back end and gotten back some data. All we have to do now is set up our front end to render the content that we get from Strapi via the GraphQL API. Because we are using the Strapi GraphQL, we will have to install the Svelte Apollo client and a few other packages to make sure everything works properly.

Installing Packages

  • Open the CLI, and navigate to ./frontend.
  • Run npm i --save apollo-boost graphql svelte-apollo moment.

Moment.js helps us to parse, validate, manipulate, and display dates and times in JavaScript.

The packages are now installed, which means we are able to make GraphQL queries in our Svelte app. The blog we’re building will have three pages: “home”, “about” and “articles”. All of our blog posts from Strapi will be displayed on the “articles” page, giving users access to each article. If we think about how that would look, our “articles” page’s route will be /articles, and then each article’s route will be /articles/:slug, where slug is what we enter in the “Slug” field when adding the content in the admin UI.

This is important to understand because we will tailor our Svelte app to work in the same way.

In./frontend/src/routes, you will notice a folder named “blog”. We don’t need this folder in this tutorial, so you can delete it. Doing so will break the app, but don’t worry: It’ll be back up and running once we make our “articles” page, which we’ll do now.

  • Navigate to./frontend/src/routes.
  • Create a folder named “articles”.
  • In./frontend/src/routes/articles, create a file named index.svelte, and paste the following code in it.
  • When pasting, be sure to replace <Your Strapi GraphQL Endpoint> with your actual Strapi GraphQL endpoint. For your local version, this will usually be https://localhost:1337/graphql.
<script context="module"> import ApolloClient, { gql } from 'apollo-boost'; import moment from 'moment'; const blogQuery = gql` query Blogs { blogs { id Title Description Published Body author { username } Slug } } `; export async function preload({params, query}) { const client = new ApolloClient({ uri: '<Your Strapi GraphQL Endpoint>', fetch: this.fetch }); const results = await client.query({ query: blogQuery }) return {posts: results.data.blogs} }
</script> <script> export let posts;
</script> <style> ul, p { margin: 0 0 1em 0; line-height: 1.5; } .main-title { font-size: 25px; }
</style> <svelte:head> <title>articles</title>
</svelte:head> <h1>recent posts</h1> <ul>
{#each posts as post} <li> <a class="main-title" rel='prefetch' href='articles/{post.Slug}'> {post.Title} </a> </li> <p> {moment().to(post.Published, "DD-MM-YYYY")} ago by {post.author.username} </p>
{/each}
</ul>

This file represents our /articles route. In the code above, we’ve imported a few packages and then used Apollo Client to make a query: blogQuery. We then stored our query response in a variable, results, and used the preload() function to process the data needed on our page. The function then returns posts, a variable with the parsed query result.

We’ve used Svelte’s #each block to loop through the data from Strapi, displaying the title, date of publication, and author. Our <a> tag, when clicked, goes to a page defined by the slug that we entered for our post in Strapi’s admin UI. This means that when the link is clicked, we open up a page for a particular article, and the slug is used to identify that article.

For our /articles/:slug route, create a file named [slug].svelte, in ./src/routes/articles, and paste the following code:

<script context="module"> import ApolloClient, { gql } from 'apollo-boost'; import moment from 'moment'; const blogQuery = gql` query Blogs($Slug: String!) { blogs: blogs(where: { Slug: $Slug }) { id Title Description Published Body author { username } Slug } } `; export async function preload({params, query}) { const client = new ApolloClient({ uri: '<Your Strapi GraphQL Endpoint>', fetch: this.fetch }); const results = await client.query({ query: blogQuery, variables: {"Slug" : params.slug} }) return {post: results.data.blogs} }
</script> <script> export let post;
</script> <style> .content :global(h2) { font-size: 1.4em; font-weight: 500; } .content :global(pre) { background-color: #f9f9f9; box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05); padding: 0.5em; border-radius: 2px; overflow-x: auto; } .content :global(pre) :global(code) { background-color: transparent; padding: 0; } .content :global(ul) { line-height: 1.5; } .content :global(li) { margin: 0 0 0.5em 0; }
</style> <svelte:head> <title>an amazing article</title>
</svelte:head> {#each post as post} <h2>{post.Title}</h2> <h3>{moment().to(post.Published)} by {post.author.username}</h3> <div class='content'> {@html post.Body} </div> {/each} <p>⇺<a href="articles"> back to articles</a></p>

Note: In Svelte, dynamic parameters are encoded using [brackets]. Our [slug].svelte file lets us add routes for different posts dynamically.

Just like in routes/articles/index.svelte, here we’ve imported a few packages, and then used Apollo Client to make a query: blogQuery. This query is different because we’re filtering our data to make sure it returns a specific blog post. The params argument in our preload() function lets us access params.slug, which is the slug of the current page (that is, the slug of this particular blog post). We used params.slug as a variable in our GraphQL query so that only the data with a slug matching the slug of our web page is returned. We then stored our query response in a variable (results), and our preload() function returns posts, a variable with the parsed query result.

Finally, we displayed our post’s title, publication date, and body (wrapped in Svelte’s {@html} tag).

That’s it. We can now dynamically display pages for any posts added to Strapi’s back end.

We can now work on the “about” and “home” pages. In ./frontend/src/routes, paste this code in the about.svelte file:

<svelte:head> <title>about</title>
</svelte:head> <h1>about this site</h1> <p>
minimalist web design really let's the content stand out and shine. this is why a simple website design is the first choice of so many artists, photographers, and even some writers. they want their creative content to be the center of attention, rather than design elements created by someone else. </p> <p>this minimal blog is built with <a href="https://svelte.dev/">svelte</a> and <a href="https://strapi.io/">strapi</a> images by <a href="https://unsplash.com/@glencarrie">glen carrie</a> from unsplash </p>

For our home page, let’s go to ./frontend/src/routes and paste the following code in index.svelte:

<style> h1, figure, p { text-align: center; margin: 0 auto; } h1 { font-size: 2.8em; font-weight: 400; margin: 0 0 0.5em 0; } figure { margin: 0 0 1em 0; } img { width: 100%; max-width: 400px; margin: 0 0 1em 0; } p { margin: 1em auto; padding-bottom: 1em; } @media (min-width: 480px) { h1 { font-size: 4em; } }
</style> <svelte:head> <title>a minimal sapper blog</title>
</svelte:head>
<p>welcome to</p>
<h1>the<b>blog.</b></h1> <figure> <img alt='the birds on a line' src='bird-bg.png'> <figcaption>where less is more</figcaption>
</figure> <p>
<strong>
we're minimal and that might seem boring, except you're actually paying attention.
</strong>
</p>
<p class="link"><a href="about">find out why</a>...</p>

We’ve created all the pages needed in order for our app to run as expected. If you run the app now, you should see something like this:

A screenshot of the minimal blog home page
Your finished minimal blog home page. (Large preview)

Pretty sweet, yeah?

Locally, everything works great, but we want to deploy our static blog to the web and share our beautiful creation. Let’s do that.

Deploy To Netlify

We’re going to deploy our application to Netlify, but before we can do that, log into your Netlify account (or create an account, if you don’t already have one). Sapper gives us the option to deploy a static version of our website, and we’ll do just that.

  • Navigate to ./frontend.
  • Run npm run export to export a static version of the application.

Your application will be exported to ./frontend/sapper/export.

Drag your exported folder into Netlify, and your website will be live in an instant.

The Netlify Dashboard
Drag your export folder to the Netlify Dashboard. (Large preview)

Optionally, we can deploy our website from Git by following Netlify’s documentation. Be sure to add npm run export as the build command and __sapper__/export as the base directory.

We also have the option to deploy to with Vercel (formally ZEIT, as mentioned in Sapper’s documentation).

Conclusion

That was fun, right? We just built a static blog with Sapper and Strapi and deployed it to Netlify in less than 15 minutes? Besides the stellar developer experience, Strapi and Sapper are such a delight to work with. They bring a fresh perspective to building for the web, and this tutorial is a testament to that. We definitely aren’t limited to static websites, and I can’t wait to see what you all build after this. Share your projects with me on Twitter. I can’t wait to see them. Take care, till next time!

Resources

Smashing Editorial (ks, ra, al, yk, il)

Amid Covid-19, it’s time to build

“It’s Time to Build” is a popular blog post by Marc Andreessen, the Internet pioneer and investor. He wrote it in April 2020 at the onset of the worldwide pandemic.

Andreesen believes the pandemic is a failure of all of us to build governmental and commercial solutions to current and future societal needs.

The post is controversial to some. But not to me. Covid-19 is here, and it’s not going away anytime soon. Ecommerce businesses are lucky. Amid the global pandemic, our industry is thriving and pushing forward.

Fringe Sport, my company, exists to improve lives through strength. We do this by helping folks build amazing garage and community gyms. It seems a lot of people want to build a gym in their garage these days, and we are here to assist.

I’ve taken “It’s Time to Build” to heart. Perhaps all of us in ecommerce can focus on it.

What does it mean to build?

With the coronavirus, there is a strong desire to maintain, to wait it out. We must reject that. We must create. We must make things better. We must help people.

Help your customers

The first people to help are customers. Starting in the early days of the pandemic, Fringe Sport experienced a burst in sales. People (customers) were looking for certainty in a time of uncertainty. But for us, this burst of sales strained (or broke) our operations. We had to prioritize what to fix.

First, we focused on being able to ship orders quickly. This was not easy! It meant a lot of work on our processes, procedures, and systems. It also meant hiring more employees. We hired seemingly anyone we could get our hands on. Referrals from employees and friends led to awesome new team members.

Next, we scaled our supply chain. Early on we recognized that the sales burst could continue. We worked with our suppliers to increase deliveries so we could get products to our customers. We were successful, but the process is not complete.

Another bottleneck was customer support. What we thought were infrequent customer service issues became an avalanche. We built out the team, processes, and systems to provide quality support. Our customers are desperate for products to improve their strength, fitness, and mental health during a pandemic. They wanted certainty in a world without it.

Help your employees

I’ve always strived to make Fringe Sport a fantastic place for the right employees. We have a robust benefits package, which we’ve expanded with Covid. We provide masks for every employee. We explain the Covid risks. We encourage them to comply with masks and social distancing, even when they aren’t at work. We also remind them that if Covid affects them or their families, we’ll stand behind them with time off and other resources. We’re looking at adding even more benefits to make Fringe Sport an even better place.

Help your business

Build your business! We’ve long struggled with systems and processes at Fringe Sport. And then Covid hit. It was transforming. We had much less time, yet we were able to move quickly to fix the broken areas. There’s a saying, “If you want something done, give it to a busy person.” When we got busy, we got things done!

Help your family

Don’t neglect your family. The pandemic has created uncertainty for everyone — including our families. I mostly work from home now. I’ve assisted my wife and kids to stay safe and feel safe. I’m trying to provide leadership that my family needs.

Help the world

And finally, I’m striving to help the world and my community. There’s now massive global confusion and a lack of leadership. I’m trying to radiate calm and certainty while avoiding political bickering.

In short, I’m here to help. And I’m here to build.

Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF

Vitaly Friedman

2020-08-04T14:00:00+00:00 2020-08-05T03:07:46+00:00

Every UI component, no matter if it’s an accordion, a hamburger navigation, a data table, or a carousel, brings along its unique challenges. Coming up with a new solution for every problem takes time, and often it’s really not necessary. We can rely on smart design patterns and usability tests, and ask the right questions ahead of time to avoid issues down the line.

Smart Interface Design Patterns Checklists
Meet “Smart Interface Design Checklists”, with questions to ask when designing and building any interface component.

Meet Interface Design Patterns Checklists, a deck of 100 cards with common questions to ask while dealing with any interface challenge — from intricate data tables and web forms to troublesome hamburgers and carousels. Plus, many other components (full list ↓), explored in full detail.

Each checklist has been curated and refined for years by yours truly — all based upon usability sessions, design iterations and A/B tests. Useful for designers & front-end developers to discuss everything a component requires before starting designing or coding.

And if you’d like to dive into design patterns live, attend our upcoming online workshops on Smart Interface Design Patterns, 2020 Edition, where we’ll explore 100s of practical examples over 5×2.5h live sessions.

Checklist Card Box

Workshop + Checklists

{ “sku”: “checklist-cards”, “type”: “Book”, “price”: “450.00”, “sales_price”: “375.00”, “prices”: [{ “amount”: “450.00”, “currency”: “USD”, “items”: [ {“amount”: “449.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “450.00”, “currency”: “EUR”, “items”: [ {“amount”: “449.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “375.00”, “currency”: “USD”, “items”: [ {“amount”: “374.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “375.00”, “currency”: “EUR”, “items”: [ {“amount”: “374.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] } ] } $
375.00 $
450.00

Vitaly’s 5×2.5h online workshop, with the checklists PDF, live sessions and examples.

Checklists PDF Deck

{ “sku”: “checklist-cards”, “type”: “E-Book”, “price”: “10.00”, “prices”: [{ “amount”: “10.00”, “currency”: “USD” }, { “amount”: “10.00”, “currency”: “EUR” } ] } $
10.00

DRM-free, of course. PDF.
Included with Smashing Membership.

About The Checklists

Meet 100 checklist cards with everything you need to tackle any UI challenge — from intricate tables to troublesome carousels. Created to help us all keep track of all the fine little details to design and build better interfaces, faster. Plus, it’s useful to not forget anything critical and avoid costly mistakes down the line. Check the preview.

When working on pretty much any interface problem, we sit down with designers and developers and talk about its design, markup and behavior — using checklists. The deck creates a much-needed sense of alignment, so everyone is one the same page before jumping into design or coding tools.

The deck includes checklists on:

  • designing for touch (free preview),
  • hamburger menu and accordions,
  • carousels and navigation,
  • filtering, sorting, search,
  • data tables and feature comparison,
  • pricing plans and product page,
  • sliders and video players,
  • configurators and wizards,
  • date pickers and calendars,
  • timelines, maps, seating plans,
  • privacy and authentication,
  • onboarding and offboarding,
  • reviews and testimonials,
  • video and audio players,
  • web forms and donation forms.
  • Plus, 400 practical interface examples (free preview).
A look inside the Checklist Card box.

Beautifully designed by our dear illustrator Ricardo Gimenes, this deck is always by your side — on your desk or on your phone when you’re on the go.

Additionally, you get practical examples, action points and the checklists in a wide resolution (16×9) for reference and presentations.

Spotify slider example
Hamburger design checklist
A little bonus: 400 practical examples, action points and the checklist in 16×9.

You’ll get:

  • 100 checklists cards on everything from carousels to web forms, carefully curated and designed,
  • Practical examples and action points for your reference in 16×9,
  • Editable text file to adjust for your needs,
  • Life-time access to the deck, updated regularly.
  • Attend online workshop or get the checklist PDF.
A look inside the card deck.

Workshop + Checklists

{ “sku”: “checklist-cards”, “type”: “Book”, “price”: “450.00”, “sales_price”: “375.00”, “prices”: [{ “amount”: “450.00”, “currency”: “USD”, “items”: [ {“amount”: “449.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “450.00”, “currency”: “EUR”, “items”: [ {“amount”: “449.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “375.00”, “currency”: “USD”, “items”: [ {“amount”: “374.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “375.00”, “currency”: “EUR”, “items”: [ {“amount”: “374.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] } ] } $
375.00 $
450.00

Vitaly’s 5×2.5h online workshop, with the checklists PDF, live sessions and examples.

Checklists PDF Deck

{ “sku”: “checklist-cards”, “type”: “E-Book”, “price”: “10.00”, “prices”: [{ “amount”: “10.00”, “currency”: “USD” }, { “amount”: “10.00”, “currency”: “EUR” } ] } $
10.00

DRM-free, of course. PDF.
Included with Smashing Membership.

Table of Contents

Designing For Touch Checklist

+
Accordion Checklist

+
Navigation Checklist

+
Hamburger Menu Checklist

+
Filtering Checklist

+
Sorting Checklist

+
Search Autocomplete Checklist

+
Carousels Checklist

+
Tables Checklist

+
Pricing Plans Checklist

+
Sliders Checklist

+
Date Pickers Checklist

+
Configurators Checklist

+
Feature Comparison Checklist

+
Timelines Checklist

+
Schedule And Calendars Checklist

+
Maps Checklist

+
Seating Plans Checklist

+
Privacy Checklist

+
Onboarding Checklist

+
Reviews and Testimonials Checklist

+
Web Forms Checklist

+
Donation Form Checklist

+
Authentication Checklist

+
Product Page Checklist

+
Video Player Checklist

+

About the Author

Vitaly FriedmanVitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems. Get in touch.

“Smart Interface Design Patterns, 2020 Edition”, Online Workshop with Vitaly Friedman (Sep 22 – Oct 6)

Do you want to dive deeper into the bits and pieces of smart interface design patterns? We’ll be hosting a series of online workshops, in which we’ll take a microscopic examination of common interface components and reliable solutions to get them right — both on desktop and on mobile.

We’ll study 100s of hand-picked examples and we’ll design interfaces live, from mega-dropdowns and car configurators — all the way to timelines and onboarding. And: we’ll be reviewing and providing feedback to each other’s work. Check all topics and schedule.

Example of autocomplete in three different online shops.
Google slider example
Carousel Design Checklist
Vitaly’s Smart Interface Design Patterns Workshop, broken down into 5×2.5h sessions, with 100s of practical examples.

<!–

The workshop includes:

  • 1500+ workshop slides with practical examples and action points
  • 100 checklist cards on everything from carousels to web forms
  • Editable text file to adjust for your needs
  • Life-time access to the deck, updated regularly
  • Live, interactive workshop sessions
  • Hands-on exercises and reviews
  • All workshop recordings
  • Dedicated Q&A time for all your questions
  • A Smashing Certificate

–>

The workshop is delivered in five 2.5h long sessions with lots of time for you to ask all your questions. It’s for interface designers, front-end designers and developers who’d love to be prepared for any challenge coming their way.

You’ll walk away with a toolbox of practical techniques for your product, website, desktop app or a mobile app.

Workshop + Checklists

{ “sku”: “checklist-cards”, “type”: “Book”, “price”: “450.00”, “sales_price”: “375.00”, “prices”: [{ “amount”: “450.00”, “currency”: “USD”, “items”: [ {“amount”: “449.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “450.00”, “currency”: “EUR”, “items”: [ {“amount”: “449.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “375.00”, “currency”: “USD”, “items”: [ {“amount”: “374.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] }, { “amount”: “375.00”, “currency”: “EUR”, “items”: [ {“amount”: “374.00”, “type”: “Book”}, {“amount”: “1.00”, “type”: “E-Book”} ] } ] } $
375.00 $
450.00

Vitaly’s 5×2.5h online workshop, with the checklists PDF, live sessions and examples.

Checklists PDF Deck

{ “sku”: “checklist-cards”, “type”: “E-Book”, “price”: “10.00”, “prices”: [{ “amount”: “10.00”, “currency”: “USD” }, { “amount”: “10.00”, “currency”: “EUR” } ] } $
10.00

DRM-free, of course. PDF.
Included with Smashing Membership.

Thank You For Your Support!

We sincerely hope that the insights you’ll gain from our little goodies will help you boost your skills while also building wonderful, new friends. A sincere thank you for your kind, ongoing support, patience and generosity — for being smashing, now and ever. ❤️

More Smashing Stuff

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Paul and Alla are some of these people. Have you checked out their books already?

Can You Design A Website For The Five Senses?

Can You Design A Website For The Five Senses?

Can You Design A Website For The Five Senses?

Suzanne Scacca

2020-08-04T08:00:00+00:00 2020-08-09T03:34:13+00:00

Maybe it’s the whiff of someone’s perfume. Or a bite of pizza from a new restaurant. Or a song playing over the loudspeakers at the store. But the second it hits, you’re immediately transported to another place, time, or mood.

Imagine if your website could evoke this kind of response. Visitors who respond to the sensory stimulation would instantly be in a more positive headspace, which they’d then associate with the site and your brand.

Just be careful if you’re going to attempt this. Not every sense-triggered memory or emotion is going to be a positive one, so you want to focus on more generalized and shared experiences that come with little risk of backfiring.

Here are some ideas to help you do this:

Designing For The Sense Of Sight

A website is a medium to be seen, so you’d assume that the sense of sight is the most powerful one to play with. But there’s a difference between a visitor taking in the photos and words on a web page and feeling something because of what they’ve seen.

The truth is, sight is the most pragmatic of the senses. Typically, what you see is what you get.

Nevertheless, it is possible to design a website so that it alters the mood of anyone who visits it.

Color theory is one tool you can use to inspire visitors to feel a certain way based on what they see. However, that can be problematic as colors often have multiple meanings not just across cultures but within them as well. So, while you might think you’re making visitors feel happier with bright yellow hues, it could instead be making them feel overwhelmed and anxious.

What I’d suggest you focus on is how to use visuals to create an immersive experience that transports your visitors to another place or time. They shouldn’t need to look past the homepage for it either (though it’s a good idea if you can make it extend across the site).

Travel and hospitality sites have a tendency to do this well. Let’s look at an example.

Visit Philly is a tourism site I like to use to find things to do around the city. And that’s because this is how most of the pages on the site are designed:

Visit Philadelphia website homepage
The homepage of the Visit Philly website welcomes people to the City of Brotherly and Sisterly Love. (Source: Visit Philly) (Large preview)

Each page feels like a physically immersive experience without forcing visitors to watch a background video or scroll through a carousel of photos. Instead, each full-sized image perfectly encapsulates the setting that awaits each visitor.

Unlike staged, overly manipulated or stock photos that portray an unrealistic reality, visitors aren’t likely to ignore this kind of content. Because it’s real and it’s also easy to put themselves in the shoes of the people they’re looking at. The man and his dog. The family going for a walk. Or the people enjoying the spectacle that is Spruce Street Harbor Park:

Visit Philly website - page dedicated to Spruce Street Harbor Park with full-sized photo
A page dedicated to Spruce Street Harbor Park in Philadelphia. (Source: Visit Philly) (Large preview)

For people who’ve been to Philadelphia, the visuals on this site are likely to lure them back to the good times they had. And for people who are new to the city, the oversized visuals that show off the city’s hotspots enable them to picture what it’s like to go, which is a very effective way to sell someone on an experience.

Designing For The Sense Of Smell

Back in elementary school, our teachers would reward us with good scores on homework and tests with a handwritten note like “Great work!” and a scratch-n-sniff sticker. Like these ones available on Etsy:

Etsy - 1970s Original Scratch ‘N’ Sniff Stickers
A pack of 1970s Scratch ‘N’ Sniff stickers are available through Etsy. (Source: Etsy) (Large preview)

If you don’t know what these are, the name says it all. You scratch your nail against the sticker and it smells just like the picture on it.

Looking at this photo, I can still smell the “Berry Good” strawberry. This is going to sound crazy, but it reminds me of success. I don’t know if my teachers had an entire pack of the strawberry stickers, but it’s the one I got most frequently. And so I guess that’s why I associate it with good grades just by looking at it.

This is what you want to aim for with your website. You want to depict some recognizable scent in a way that the majority (if not all) of your visitors instantly feel good.

For example:

A used bookstore or library website with imagery that depicts rows upon rows of old books like the Providence Athenaeum:

Providence Athenaeum homepage - full-sized photo of library and rows of books
The Providence Athenaeum homepage ‘smells’ like old books. (Source: Providence Athenaeum) (Large preview)

Voracious readers will definitely be able to smell the athenaeum and its old collection of books through this photo.

Or how about a company that’s known for making cleaning products like Tide?

Tide homepage with photo of freshly cleaned and folded laundry besides washer
The Tide homepage includes a couple images of freshly cleaned and folded laundry. (Source: Tide) (Large preview)

Even if you don’t use Tide to do your laundry, you know exactly what the first image in this carousel is going to smell like.

Fresh laundry is the scent of cleanliness and comfort. I’d also argue that it’s the scent of satisfaction because nothing feels better than getting laundry done and over with.

I also really like what Coffee Culture Cafe & Eatery has done with its homepage video:

Coffee Culture Cafe website with video of coffee beans
Coffee Culture Cafe puts its coffee beans on full display. (Source: Coffee Culture Cafe & Eatery) (Large preview)

It’s not abnormal for a restaurant or cafe to show photos of its food or drinks. However, this is the raw product: the coffee beans. And as any coffee drinker can attest, this photo smells delicious and is something that’s sure to awaken their anticipation in ordering their first cup.

Designing For The Sense Of Sound

I was driving to the beach over the weekend when a song came on that made me smile. It was “What I Got” by Sublime, a song I listened to many times when making the long drive to the beach with friends in college.

Although I was alone on this particular trip and headed to a different beach, there was something about that song that instantly transformed my mood. The stress I was feeling about work melted away and all I could focus on was how good it was going to feel to spend the day in the sunshine by the water.

That’s something that the right sound can do. It can pull us out of the present and take us back to a memory of the past. Or it can overwhelm us with emotion that has no real grounding in the moment and, yet, there it is.

It doesn’t have to be music. And, honestly, on a website, it shouldn’t be. But that doesn’t mean you can’t still appeal to visitors’ ears through design.

There are two ways to approach this.

The first is to include imagery that depicts a predictable sound and one that brings joy (or whatever positive emotion you’re shooting for). Take the website for Kindermusik:

Kindermusik website - toddler plays with mini xylophone
Kindermusik website shows how kids learn through music. (Source: Kindermusik) (Large preview)

For many of us, the xylophone was one of the first instruments we were introduced to as kids. So, it’s hard to imagine anyone seeing the top photo and not immediately hear the sounds of a kid banging away on the bars.

And while this school is all about providing kids with music-based education, not every image sounds like music. For instance, the Benefits page has this photo at the top:

Kindermusik Benefits: baby smiles and laughs
A baby laughs at the top of the Kindermusik Benefits page. (Source: Kindermusik) (Large preview)

There might not be any sound coming through this site, but we all know the distinctive sound of a baby’s laugh. For parents trying to decide where to have their kids educated, they’ll be pleased to hear the sound of a child laughing as they visit this web page.

The other way to approach sound in design is to remove it entirely from the experience.

This works well for places like Scandinave Spa where customers come to enjoy the solitude and silence as they retreat from pressures of society, work, life and so on:

Scandinave Spa - home page video with darkened, empty and quiet rooms and experiences
The Scandinave Spa uses images that sound quiet. (Source: Scandinave Spa) (Large preview)

If a lack of noise is what makes the real life experience so valuable, then choosing images that represent this is really important. So, obviously, sites like these won’t have images of people standing around talking nor will it incorporate bright or flashy lights.

A calm experience is best depicted by an absence of noise, movement and distraction.

Designing For The Sense Of Taste

Dr. Bence Nanay wrote about the cooking show paradox on Psychology Today, debating why it is that so many people enjoy watching someone else cook. It can’t possibly be to learn how to cook as recipes are everywhere online. And while they might enjoy the competitive aspect of some of these shows, he suggests the main reason is this:

Watching cooking shows is eating vicariously in the most literal sense possible — we get mental imagery of tasting and smelling the food without actually tasting or smelling it.

I think we can expand a bit further on Nanay’s argument.

I also believe that people become more invested in an outcome when they get to see the process of it being made. This isn’t something we’re usually allowed to see as consumers. We go out to eat and the food is sitting there on a plate for us. So, there’s something about the build-up of watching food or drinks being made that adds something extra to the experience.

That’s why I don’t think it’s enough to just use static photos of a restaurant’s dishes or food company’s products on a website. Not if you want to deeply connect to the visitors’ sense of taste, that is.

For instance, this is the video that’s embedded into the top of Sweet Charlie’s website:

A 30-second video that depicts the process of creating rolled ice cream before putting it into the hands of a very satisfied customer.

If you’ve ever been to a shop that makes rolled ice cream, you know just how enjoyable it is to watch this process in person. So, for a website to recreate that process — especially for first-time customers wondering what the heck rolled ice cream is — it’s a brilliant move.

Designing For The Sense Of Touch

The sense of touch is a relatively easy one to depict on the web. We see it all the time on ecommerce sites that allow shoppers to zoom in on fabrics and get a sense for what they feel like to touch or wear.

Like the zoom-in capabilities Anthropologie gives its shoppers:

Anthropologie product zoom - green and black dress closeup
Anthropologie allows shoppers to zoom in on each item in its online store. (Source: Anthropologie) (Large preview)

But this is nothing more than window-shopping done virtually. Anyone could walk through a store and brush their hands through racks of clothes. Don’t get me wrong, it’s a necessary functionality. However, this isn’t how we use the sense of touch to create a deeper connection with visitors.

We need to play around with more drastic tactile sensations.

One element you might want to fixate on is temperature. If there’s a heating or cooling element, work with that.

Another element you can play with is the feeling or pressure of human touch. There are many applications for this, though it’s particularly useful for websites that advertise therapeutic services.

For instance, this is how Massage Envy invites people to its spa services:

Massage Envy website with picture of woman getting massage
The Massage Envy website uses images of people getting massages instead of just empty massage rooms and tables. (Source: Massage Envy) (Large preview)

This is a good start. Some spa and massage websites just show images of empty massage rooms and tables. At least here prospective customers can kind of see the massage process.

I don’t think there’s much to feel here though as the positioning of the masseuse and pressure being applied seem unrealistic. I’m guessing it’s a stock photo chosen for its symmetry, color and attractiveness.

But there are ways to capture the tangible experience while still making it look good for a website. For instance, the Bodhi Spa uses a video to take visitors through various services they can experience — alone or with others — at the space.

At one point, they’re shown someone getting a massage:

Bodhi Spa website - woman receives deep neck and head massage
The video on the home page of the Bodhi Spa website shows a woman receiving a hands-on massage. (Source: Bodhi Spa) (Large preview)

Notice the symmetry of this screengrab and how it doesn’t have to come at the expense of authenticity. Plus, the video shows customers how the massage feels as the masseuse applies pressure and moves her hands around the woman’s neck and head.

Visitors then get to see a couple enjoying the benefits of hydrotherapy, with the woman picking up a handful of salt and placing it in the pool they’re in:

Bodhi Spa website - woman adds salt to hydrotherapy pool
The Bodhi Spa intro video shows a couple enjoying the benefits of salt therapy. (Source: Bodhi Spa) (Large preview)

There’s a lot to touch in this video. The fine salt crystals. The warm water in the hydrotherapy tub. And, shortly after this screengrab, the couple holds hands as they enter the cool-down room.

A copywriter can certainly convey a lot of the feel-good benefits of something like this, but it’s also effective to let visitors see it with their own two eyes and experience it vicariously through others.

Wrapping Up

While I think that trying to design for all five senses at once would lead to sensory overload, choosing one particularly potent sense to design for is a great idea.

If you can find a way to recreate that sense through your site, your visitors may experience:

  • Heightened awareness,
  • Positive and happier thoughts than before they entered the site,
  • A greater connection to the bigger picture and a willingness to take next steps on the site.

We often focus on how to connect to our audience through their pain, but why don’t we focus on connecting through happiness for a change? I think we could all use a little more of that these days.

Smashing Editorial (ra, yk, il)