Browsing Tag: Create

    web design

    Create Responsive Image Effects With CSS Gradients And aspect-ratio — Smashing Magazine

    02/23/2021

    About The Author

    Stephanie Eckles is a front-end focused SWE at Microsoft. She’s also the author of ModernCSS.dev which provides modern solutions to old CSS problems as in-depth …
    More about
    Stephanie

    A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.

    To prepare for our future image effects, we’re going to set up a card component that has a large image at the top followed by a headline and description. The common problem with this setup is that we may not always have perfect control over what the image is, and more importantly to our layout, what its dimensions are. And while this can be resolved by cropping ahead of time, we can still encounter issues due to responsively sized containers. A consequence is uneven positions of the card content which really stands out when you present a row of cards.

    Another previous solution besides cropping may have been to swap from an inline img to a blank div that only existed to present the image via background-image. I’ve implemented this solution many times myself in the past. One advantage this has is using an older trick for aspect ratio which uses a zero-height element and sets a padding-bottom value. Setting a padding value as a percent results in a final computed value that is relative to the element’s width. You may have also used this idea to maintain a 16:9 ratio for video embeds, in which case the padding value is found with the formula: 9/16 = 0.5625 * 100% = 56.26%. But we’re going to explore two modern CSS properties that don’t involve extra math, give us more flexibility, and also allow keeping the semantics provided by using a real img instead of an empty div.

    First, let’s define the HTML semantics, including use of an unordered list as the cards’ container:

    <ul class="card-wrapper">
      <li class="card">
        <img src="http://www.smashingmagazine.com/" alt="http://www.smashingmagazine.com/">
        <h3>A Super Wonderful Headline</h3>
        <p>Lorem ipsum sit dolor amit</p>
      </li>
      <!-- additional cards -->
    </ul>
    

    Next, we’ll create a minimal set of baseline styles for the .card component. We’ll set some basic visual styles for the card itself, a quick update to the expected h3 headline, then essential styles to begin to style the card image.

    .card {
      background-color: #fff;
      border-radius: 0.5rem;
      box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
      padding-bottom: 1rem;
    }
    
    .card > :last-child {
      margin-bottom: 0;
    }
    
    .card h3 {
      margin-top: 1rem;
      font-size: 1.25rem;
    }
    
    img {
      border-radius: 0.5rem 0.5rem 0 0;
      width: 100%;
    }
    
    img ~ * {
      margin-left: 1rem;
      margin-right: 1rem;
    }
    

    The last rule uses the general sibling combinator to add a horizontal margin to any element that follows the img since we want the image itself to be flush with the sides of the card.

    And our progress so far leads us to the following card appearance:

    One card with the baseline styles previously described applied and including an image from Unsplash of a dessert on a small plate next to a hot beverage in a mug
    One card with the baseline styles previously described applied and including an image from Unsplash of a dessert on a small plate next to a hot beverage in a mug. (Large preview)

    Finally, we’ll create the .card-wrapper styles for a quick responsive layout using CSS grid. This will also remove the default list styles.

    .card-wrapper {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
      grid-gap: 1.5rem;
    }
    

    Note: If this grid technique is unfamiliar to you, review the explanation in my tutorial about modern solutions for the 12-column grid.

    With this applied and with all cards containing an image with a valid source path, our .card-wrapper styles give us the following layout:

    Three cards are shown in a row due to the card wrapper layout styles applied. Each card has a unique image that has different natural aspect ratios, with the last card having a vertically oriented image that is more than twice the height of the other card images
    Three cards are shown in a row due to the card wrapper layout styles applied. Each card has a unique image that has different natural aspect ratios, with the last card having a vertically oriented image that is more than twice the height of the other card images. (Large preview)

    As demonstrated in the preview image, these baseline styles aren’t enough to properly contain the images given their varying natural dimensions. We’re in need of a method to constrain these images uniformly and consistently.

    Enable Uniform Image Sizes with object-fit

    As noted earlier, you may previously have made an update in this scenario to change the images to be added via background-image instead and used background-size: cover to handle nicely resizing the image. Or you may have tried to enforce cropping ahead of time (still a worthy goal since any image size reduction will improve performance!).

    Now, we have the property object-fit available which enables an img tag to act as the container for the image. And, it comes with a cover value as well that results in a similar effect as the background image solution, but with the bonus of retaining the semantics of an inline image. Let’s apply it and see how it works.

    We do need to pair it with a height dimension for extra guidance on how we want the image container to behave (recall we had already added width: 100%). And we’re going to use the max() function to select either 10rem or 30vh depending on which is larger in a given context, which prevents the image height from shrinking too much on smaller viewports or when the user has set a large zoom.

    img {
      /* ...existing styles */
      object-fit: cover;
      height: max(10rem, 30vh);
    }
    

    Bonus Accessibility Tip: You should always test your layouts with 200% and 400% zoom on desktop. While there isn’t currently a zoom media query, functions like max() can help resolve layout issues. Another context this technique is useful is spacing between elements.

    With this update, we’ve definitely improved things, and the visual result is as if we’d use the older background image technique:

    The three-card images now appear to have a uniform height and the image contents are centered within the image as if it was a container
    The three-card images now appear to have a uniform height and the image contents are centered within the image as if it was a container. (Large preview)

    Responsively Consistent Image Sizing With aspect-ratio

    When using object-fit by itself, one downside is that we still need to set some dimension hints.

    An upcoming property (currently available in Chromium browsers) called aspect-ratio will enhance our ability to consistently size images.

    Using this property, we can define a ratio to resize the image instead of setting explicit dimensions. We’ll continue to use it in combination with object-fit to ensure these dimensions only affect the image as a container, otherwise, the image could appear distorted.

    Here is our full updated image rule:

    img {
      border-radius: 0.5rem 0.5rem 0 0;
      width: 100%;
      object-fit: cover;
      aspect-ratio: 4/3;
    }
    

    We’re going to start with an image ratio of 43 for our card context, but you could choose any ratio. For example, 11 for a square, or 169 for standard video embeds.

    Here are the updated cards, although it will probably be difficult to notice the visual difference in this particular instance since the aspect ratio happens to closely match the appearance we achieved by setting the height for object-fit alone.

    The three-card images have identical width and height dimensions, which are slightly different than the previous object-fit solution
    The three-card images have identical width and height dimensions, which are slightly different than the previous object-fit solution. (Large preview)

    Setting an aspect-ratio results in the ratio being maintained as the elements grow or shrink, whereas when only setting object-fit and height the image ratio will constantly be in flux as the container dimensions change.

    Adding Responsive Effects With CSS Gradients And Functions

    OK, now that we know how to setup consistently sized images, let’s have some fun with them by adding a gradient effect!

    Our goal with this effect is to make it appear as though the image is fading into the card content. You may be tempted to wrap the image in its own container to add the gradient, but thanks to the work we’ve already done on the image sizing, we can work out how to safely do it on the main .card.

    The first step is to define a gradient. We’re going to use a CSS custom property to add in the gradient colors to enable easily swapping the gradient effect, starting with a blue to pink. The last color in the gradient will always be white to maintain the transition into the card content background and create the “feathered” edge.

    .card {
      --card-gradient: #5E9AD9, #E271AD;
    
      background-image: linear-gradient(
        var(--card-gradient),
        white max(9.5rem, 27vh)
      );
      /* ...existing styles */
    }
    

    But wait — is that a CSS max() function? In a gradient? Yes, it’s possible, and it’s the magic that makes this gradient effective responsively!

    However, if I were to add a screenshot, we wouldn’t actually see the gradient having any effect on the image yet. For that, we need to bring in the mix-blend-mode property, and in this scenario we’ll use the overlay value:

    img {
      /* ...existing styles */
      mix-blend-mode: overlay;
    }
    

    The mix-blend-mode property is similar to applying the layer blending styles available in photo manipulation software like Photoshop. And the overlay value will have the effect of allowing the medium tones in the image to blend with the gradient behind it, leading to the following result:

    Each card image has a gradient blending effect that starts with a light blue at the top, that blends to a reddish pink, and then ends by feathering into a white prior to the rest of the card text content
    Each card image has a gradient blending effect that starts with a light blue at the top, that blends to a reddish pink, and then ends by feathering into a white prior to the rest of the card text content. (Large preview)

    Now, at this point, we are relying on the aspect-ratio value alone to resize the image. And if we resize the container and cause the card layout to reflow, the changing image height causes inconsistencies in where the gradient fades to white.

    So we’ll add a max-height property as well that also uses the max() function and contains values slightly greater than the ones in the gradient. The resulting behavior is that the gradient will (almost always) correctly line up with the bottom of the image.

    img {
      /* ...existing styles */
      max-height: max(10rem, 30vh);
    }
    

    It’s important to note that adding a max-height alters the aspect-ratio behavior. Instead of always using the exact ratio, it will be used only when there’s enough allotted space given the new extra constraint of the max-height.

    However, aspect-ratio will still continue to ensure the images resize consistently as was the benefit over only object-fit. Try commenting out aspect-ratio in the final CodePen demo to see the difference it’s making across container sizes.

    Since our original goal was to enable consistently responsive image dimensions, we’ve still hit the mark. For your own use case, you may need to fiddle with the ratio and height values to achieve your desired effect.

    Alternate: mix-blend-mode And Adding A Filter

    Using overlay as the mix-blend-mode value was the best choice for the fade-to-white effect we were looking for, but let’s try an alternate option for a more dramatic effect.

    We’re going to update our solution to add a CSS custom property for the mix-blend-mode value and also update the color values for the gradient:

    .card {
      --card-gradient: tomato, orange;
      --card-blend-mode: multiply;
    }
    
    img {
      /* ...existing styles */
      mix-blend-mode: var(--card-blend-mode);
    }
    

    The multiply value has a darkening effect on mid-tones, but keeps white and black as is, resulting in the following appearance:

    Each card image has a strong orange tint from the new gradient that starts goes from a red-orange to pure orange. White areas are still white and black areas are still black
    Each card image has a strong orange tint from the new gradient that starts goes from a red-orange to pure orange. White areas are still white and black areas are still black. (Large preview)

    While we’ve lost the fade and now have a hard edge on the bottom of the image, the white part of our gradient is still important to ensure that the gradient ends prior to the card content.

    One additional modification we can add is the use of filter and, in particular, use the grayscale() function to remove the image colors and therefore have the gradient be the only source of image coloring.

    img {
      /* ...existing styles */
      filter: grayscale(100);
    }
    

    Using the value of grayscale(100) results in complete removal of the image’s natural colors and transforming it into black and white. Here’s the update for comparison with the previous screenshot of its effect when using our orange gradient with multiply:

    Now each card image still has the orange gradient but all other color is removed and replaced by shades of gray
    Now each card image still has the orange gradient but all other color is removed and replaced by shades of gray. (Large preview)

    Use aspect-ratio As A Progressive Enhancement

    As previously mentioned, currently aspect-ratio is only supported in the latest version of Chromium browsers (Chrome and Edge). However, all browsers support object-fit and that along with our height constraints results in a less-ideal but still acceptable result, seen here for Safari:

    The card image height is capped, but each card has a slightly different realized height
    The card image height is capped, but each card has a slightly different realized height. (Large preview)

    Without aspect-ratio functioning, the result here is that ultimately the image height is capped but the natural dimensions of each image still lead to some variance between card image heights. You may want to instead change to adding a max-height or make use of the max() function again to help make a max-height more responsive across varying card sizes.

    Extending The Gradient Effects

    Since we defined the gradient color stops as a CSS custom property, we have ready access to change them under different contexts. For example, we might change the gradient to more strongly feature one of the colors if the card is hovered or has one of its children in focus.

    First, we’ll update each card h3 to contain a link, such as:

    <h3><a href="http://www.smashingmagazine.com/">A Super Wonderful Headline</a></h3>
    

    Then, we can use one of our newest available selectors — :focus-within — to alter the card gradient when the link is in focus. For extra coverage of possible interactions, we’ll couple this with :hover. And, we’ll reuse our max() idea to assign a single color to take over coverage of the image portion of the card. The downside to this particular effect is that gradient stops and color changes aren’t reliably animateable — but they will be soon thanks to CSS Houdini.

    To update the color and add the new color stop, we just need to re-assign the value of --card-gradient within this new rule:

    .card:focus-within,
    .card:hover {
      --card-gradient: #24a9d5 max(8.5rem, 20vh);
    }
    

    Our max() values are less than the original in use for white to maintain the feathered edge. If we used the same values, it would meet the white and create a clearly straightedge separation.

    In creating this demo, I originally tried an effect that used transform with scale for a zoom-in effect. But I discovered that due to mix-blend-mode being applied, the browser would not consistently repaint the image which caused an unpleasant flickering. There will always be trade-offs in requesting the browser perform CSS-only effects and animations, and while it’s very cool what we can do, it’s always best to check the performance impact of your effects.

    Have Fun Experimenting!

    Modern CSS has given us some awesome tools for updating our web design toolkits, with aspect-ratio being the latest addition. So go forth, and experiment with object-fit, aspect-ratio, and adding functions like max() into your gradients for some fun responsive effects! Just be sure to double-check things cross-browser (for now!) and across varying viewports and container sizes.

    Here is the CodePen including the features and effects we reviewed today:

    See the Pen [Responsive Image Effects with CSS Gradients and aspect-ratio](https://codepen.io/smashingmag/pen/WNoERXo) by Stephanie Eckles.

    See the Pen Responsive Image Effects with CSS Gradients and aspect-ratio by Stephanie Eckles.

    Looking for more? Make sure you check out our CSS Guide here on Smashing →

    Smashing Editorial
    (vf, il)

    Source link

    web design

    How To Create An Engaging And Useful Chatbot — Smashing Magazine

    01/28/2021

    About The Author

    Marli Mesibov is a Lead Content Strategist at Verily Life Sciences. She has been helping people understand doctors, hospitals, and health insurers for over a …
    More about
    Marli

    What makes a good chatbot experience? Most people think of witty responses and machine learning, but the basis of a chatbot UX is actually rooted in content strategy. Learn how to develop a chatbot that sounds human and engages people.

    Capital One. Adobe. Even Dominos has one. They’re chatbots, and they’re quickly becoming ubiquitous. A poor chatbot simply says “I’m sorry, I don’t understand” on repeat (or worse “error”.) A good chatbot feels almost-human, and helps answer questions so you don’t need to make a phone call or search the FAQ page.

    But what makes a good chatbot experience? What are the table stakes that people expect from a chatbot, and what ruins that experience? In this article we’ll answer those questions and identify what you as a content designer can do to make your chatbot successful.

    What Makes A Chatbot Unique?

    A chatbot is a program that replicates human conversation. Most chatbots use decision trees to create a conversation. They either recognize key wuords and respond accordingly, or they allow the end-user to select from options to direct the conversation.

    Equally important to defining what a chatbot is, is identifying what it isn’t. Let’s dig into what a chatbot is — and clear up what it isn’t.

    A Chatbot Is A Form Of Conversational Design

    Chatbots replicate human conversations, and most chatbots use decision trees to do so. They either recognize key words and respond accordingly, or they allow the end-user to select from options to direct the conversation.

    Conversational design broadly refers to any conversation-like content, whether that comes through headers and text on a webpage, voice UI such as Google Home and Alexa, or chatbots. As such, chatbot content is one type of conversational design, but the two are not one-and-the-same. A chatbot is also not a human interacting through a chat interface (that is sometimes called “live chat”). It is specifically a computerized system.

    Why does this matter? When design and engineering teams are determining the best way to communicate with their audiences, they are likely to use shorthand. I frequently hear designers say “then we [the company] will tell them [the audience] to confirm their password.” In this case, the designer may be referring to “telling” the audience via text on a page, or they may be implying a chatbot will appear to inform the audience. Early on in the concepting phase it may not matter what form of conversational design the team has in mind, but ultimately the content team will be responsible for significantly more work if the end result is a chatbot. With that in mind, it’s useful to clarify what form of conversational design the team has in mind.

    One example of non-chatbot conversational design is a conversational UI. Oscar Insurance has a conversational UI, which they develop with a few best practices:

    • The headers are complete sentences.
    • Forms have help text with specific instructions (instead of examples).
    • Copy is written in the 2nd person, referring to the audience as “you”.
    HiOscar’s Personalized Plan form. Header: Health insurance made for you. One field title is “Household annual income” and the help text is “Enter your income pre-tax.” Another field title is “Tax household size” and the help text is “Enter your tax household size.
    Oscar Insurance uses a conversational UI, though it is not a chatbot. (Large preview)

    Voice UI can also “speak” to the audience, and if the team is considering that then they are either building a competitor to Alexa, Google Home, and Siri, or they are (more likely) building an app that these systems can download. Again, these may sound the same from a concepting perspective, but the requirements are vastly different. Voice UI has no visual design, and no ability to trigger or prompt the end-user into action. This is in stark contrast to a phone app, which may launch notifications without the end-user first opening the app.

    A Chatbot Can Answer (Many) Questions

    It may sound from this description as though chatbots are the perfect answer — they can launch notifications, they incorporate a visual UI, and they are conversational! Certainly, the popularity of chatbots is in part due to these benefits. But this can create an assumption that human conversation is the best way to connect with end-users. Sometimes that’s true — but not always!

    In Michael J Metts’ Button talk “Sorry, I Can’t Help WIth That” he said a company must know what its goal is, and then determine if a chatbot will help fulfill that goal. This is a fantastic approach: a chatbot is a solution, and should be employed when it is the solution to a problem.

    Customer service and sales are typically good goals for chatbots to fulfill. In both cases the problem may be “how might our customer service team respond quickly to common questions” or “how might our sales team help customers learn about a product or service in a quick and easy manner, without using significant employee time?” In these cases a chatbot can help people get the answers they want without needing to call and wait on hold.

    However, if the problem is “how might our hospital more accurately diagnose health issues” or “how might our bank more quickly help employees find lost paychecks from their employers” a chatbot may not be appropriate. A human physician is much more accurate than a chatbot, and the end-users will pick up on that. Equally, a bank’s chatbot is unlikely to be able to connect to the numerous employers’ payroll systems required to track down paychecks. While the end-user might think they want answers from a chatbot, they’ll quickly lose trust when the chatbot can’t answer their questions.

    In short, a chatbot is not a good way to handle nuances or extremely complicated situations, because of the numerous opportunities for human error. There are simply too many variables for “quick” and “accurate” to be accomplished in these situations.

    A Chatbot Is Not An Algorithm

    Never forget that a chatbot is only as good as its content. Yes, a chatbot is controlled by an algorithm, and can be bolstered by machine learning. But before machine learning can begin, the chatbot needs a set of rules, and needs content to speak. That’s the role of the content designer, UX writer, or content strategist to define.

    We see this frequently in conversations around AI ethics. Voice assistants and chatbots are frequently identified as sexist and racially biased. They are not biased because the design and engineering team made a conscious choice to make them so. They are biased because they “reflect the biases in the viewpoints of the teams that built it,” to quote AI ethicist Josie Young in her TED talk.

    For those of us building chatbots, this means we need to be consciously anti-sexist and anti-racist. We need to build chatbots thoughtfully, and not connect machine learning until after we have content designed that we want the AI to learn from. As with so many things, what a chatbot does is only half the story. It may “answer questions” — but what questions, and how? It may “direct people to their next steps” — but what are the appropriate next steps, and how does the chatbot respond when something goes wrong? In other words, what will make a true impact is how the chatbot accomplishes the things it does.

    Best Practices For Engaging Chatbots

    If your team is building a chatbot, hopefully you’ve already done a lot of the upfront work.

    • You’ve decided that a chatbot is the right solution.
    • You’ve identified the technological constraints, such as what system you’ll be using.
    • You’re looking into what capabilities will be available in that system, such as autocorrect or a built-in thesaurus of synonyms.

    Now is when some executives say “plug it in and make it work!” and you must say “plug what in?!” As noted, your chatbot is not just an algorithm, and you have some content to design. It’s time to build the content for your chatbot. Let’s explore five best practices to make your chatbot humanesque:

    1. Define your actions.
    2. Separate your response types.
    3. Embrace your robot-self.
    4. Create a tone for each scenario.
    5. Design for errors.

    1. Define Your Actions

    Since a chatbot is not a magical solution to all things, you need to focus your work on specific user flows that people can accomplish with your chatbot. For example, let’s say you are building a chatbot for a company like FedEx or USPS, you may list out sample user flows like “track a package” and “update mailing address.” That means if an end-user asks the chatbot for help tracking a package, it may respond “what is the tracking number.” But the chabot should know its limitations. Perhaps one of the goals is “build trust.” Therefore if an end-user says “someone committed mail fraud in my name” the chatbot might express condolences and quickly transfer the end-user to a live customer service agent. Because the goal was to “build trust,” the team building the chatbot should recognize that anything involving sensitive information should be handled by a human — even if there is no technical or legal limitation.

    There’s no one right way to go about this. Most organizations have some form of value propositions or design principles, which will help to identify the goal of the chatbot. There are also likely some requirements already defined. Therefore the goal can come from a cursory look at the requirements, and the requirements will become more specific after the goal is defined.

    In an interview with Mike Bunner, VP, Director of Digital Marketing at Franklin Mint Federal Credit Union, Bunner said that without the chatbot, “our call center would be getting 3x the normal amount of calls.” Their goal could be assumed to be “decrease customer service hours.” This connects nicely to their chatbot’s initial prompt, which suggests “popular topics” that it can help with — likely these popular topics are the most common reasons people call the customer service team. In the same interview Bunner said the bot pulls its content directly from the member support content. Like many organizations, Franklin Mint had lots of helpful content, but had trouble getting people to view it.

    The Franklin Mint chatbot asking “Hello, how can I help you? Here are our most popular topics: STIMULUS PAYMENTS INFO; Checking and Savings; Mobile Banking App Guide; Home Equity & Mortgages; Auto, Personal, & Student Loans; Digital Wallets - Try it Today!”
    Franklin Mint’s chatbot helps answer common questions. (Large preview)

    2. Separate Your Response Types

    When you think of a chatbot you likely think of one of two things:

    1. A chatbot that responds to anything an end-user types, picking up on what they want through key words and phrases.
    2. A chatbot that follows a series of decision trees, asking the end-user to select from a few options and then bringing them through a user flow.

    Chatbots can do one or both of these, and it’s important to know what you’re aiming for. In fact, even if you intend to focus on decision trees, there’s the possibility of a user going off-script. With that in mind, consider how you want the chatbot to respond. If someone says “Help” or “Talk to a human” how will you route them?

    As you think through the chatbot’s word associations, remember that words have context. When an end-user is editing their profile and they type in “phone number” they likely want to see where to edit their phone number. But if they’ve typed in something the chatbot doesn’t recognize, the chatbot said “I don’t understand” and then the end-user types in “phone number” they may be looking for a customer service line. This is an opportunity for engineering and content strategy to collaborate to create a well-designed and well-built bot.

    This sort of thoughtful planning will come across in the end product. Adobe’s chatbot, for example, fails here. It begins by asking the end-user to freetype, but after getting a response the bot asks the end-user to select one of three options. As a user, I’m left wondering why I was asked to type if the bot couldn’t understand a simple keyword like “Adobe products”.

    User free-typing “What are the adobe products” and the Adobe chatbot responding “I want to make sure I understand clearly. Which of these categories best describes your issue? Troubleshoot a product issue; Explore plans and pricing; Something else.”
    Adobe’s chatbot asks how they can help, but doesn’t recognize keywords. (Large preview)

    3. Embrace Your Robot-Self

    Once you know what your chatbot can do, it’s time to think about how it will do it. First and foremost: don’t pretend that your chatbot is a human. In research with a former client, the client found that over 80% of people were comfortable interacting with a chatbot, and they liked when a chatbot had a name and personality. But those same people quickly lost faith in the bot and the organization when the chatbot pretended to be human.

    One conversation with a client revolved around whether people would speak with a chatbot if they knew speaking to a human was an option. Testing found that yes, they would! In fact, reassuring end-users that a human being is available (as needed) actually increased the comfort they had in speaking to the chatbot.

    The team at Hopelab had similar results when they built Vivibot, a chatbot for teens with cancer. Teens and young adults would often avoid confiding in their parents or health professionals. But Hopelab found that a chatbot removed some barriers. In their peer-reviewed randomized controlled study they were able to show that Vivibot not only provided valuable emotional support, but also improved anxiety.

    “Vivibot (that’s me) is a chatbot created for young people dealing with life beyond cancer. If that doesn’t sound like you, that’s okay - we can still chat! Although I’ve been designed by real people, I’m not a real person or a substitute for getting help from a therapist or other health care professional. I’m not an emergency or crisis service. If you’re hurt or involved in a potentially life-threatening situation, please call 911. Last thing: while I won’t understand what you type, I will do my best to help you learn some new skills (and meet some of my friends along the way). That’s enough from me. Let’s start chatting!”
    Vivibot first explains that she is a chatbot, but still uses emojis and exclamation points as part of her personality. (Large preview)

    Vivibot is an interesting chatbot example for several reasons. First, the bot is not intended for one-off solutions, but rather as an ongoing emotional support tool. This means the bot needed to have a variety of responses, so as to avoid sounding repetitive. Second, as a health-related bot, Vivibot needed to address sensitive subjects. She needed to be as transparent as possible, never defaulting to a generic “sounds good” for fear of alienating the people who rely on her when they don’t feel comfortable confiding in humans.

    Imagine if Vivibot came across as insensitive? Emily Cummins, a writer with a piece on The Worst Chatbot Fails, shows an example where UX Magazine’s “UX Bear” asks “how would you describe the term bot to your grandma?” Emily responded “my grandma is dead,” and got back a thumbs up. This is a slightly confusing response from UX Bear, but would be potentially devastating from Vivibot.

    In the near future we may see more states pass laws about bots pretending to be human, as California has. While it may seem unnecessary for the Chat Bears of the world, it’s clearly important for influential or sensitive topics, be they politics or healthcare.

    4. Create A Tone For Each Scenario

    When content strategists create a “voice and tone”, the two are different things. A voice is like a brand personality. It identifies how a company sounds, no matter what. The tone, however, will differ depending on the situation. The voice may be “friendly” but friendly sounds different in an error message than in a success message.

    A chatbot should have a different voice from a company. It can say things like “oh no!” or “I’m happy for you.” when your company can’t. To that end, the first step of creating a chatbot voice is to develop a list of words your chatbot says. It’s important that a chatbot respond to the end-user, to let them know they’ve been heard. That means chatbots spend a lot of time saying things like “Got it” or “I understand” and you need to know what those agreement tokens sound like. Does your chatbot say “yes” or “yeah” or both? “Ok” or “okay”? “Great” or “I understand”? Parameters will help your chatbot sound consistent, such that the chatbot doesn’t respond “okie smokie” and then later “I appreciate your time,” but you’ll also need enough agreement tokens that your chatbot doesn’t sound overly robotic.

    In Domino’s chatbot, the bot alternates agreement tokens like “great” and “got it”, but when it can’t understand the response it has no error token. The redundancy of the question “What city is that address in” (with no reference to the fact that it hadn’t understood my response) initially made me think the bot was broken.

    Chatbot [Dom]: Got it! Is this being delivered to a house, or to an apartment? Me: House. Dom:Great. What’s your street address? Me: 123 sesame street. Dom: What’s the zip code there? Me: 10010. Dom: What city is that address in? Me: New York. Dom: What city is that address in? Me: NY. Dom: What city is that address in?
    Dominos repeats the same question over and over if it doesn’t understand the answer. (Large preview)

    5. Design For Errors

    Chatbots, like other UIs, only have one chance to make a first impression. If the experience isn’t smooth and simple, people won’t return. With that in mind, a chatbot needs to have well written error messages. An error message from a chatbot may be as simple as saying “I don’t understand. Can you tell me again what you want?”, but it can also do far more.

    For example, if your chatbot is an MVP, your error message may say something like “I can’t help you with that [feature] today, but ask me again in a few weeks.” Alternatively, if the end-user is asking for something the chatbot will never offer, suggest an alternative like “you can call customer service for help with that.”

    Assuming you allow for free typing, there will also be the risk of someone typing a word or phrase your chatbot doesn’t understand. In that case, your chatbot may ask for clarification, or even say “I don’t understand”. But make sure you don’t leave your end-user in a loop! If the chatbot can’t understand after two or three tries, offer to put the end-user in touch with a human.

    That said, error planning goes far beyond a simple “I don’t understand” or “I can’t help with that”. A well-built chatbot considers how end-users view the tasks they want to complete. Take for example a payroll system, which might use a chatbot to help employees check on their upcoming paychecks, tax deductions, and other requested pre-tax deductions. In a system like this, the chatbot is likely able to answer questions such as:

    • When is my next paycheck scheduled to be sent to me?
    • I want to set up direct deposit.
    • When can I change my 401k deductions?

    It’s possible the payroll system is connected to some of the employee’s benefits — for example, it may have a flow built to allow the employee to change deductions. But the payroll chatbot team should be aware that employees may come to them with related questions and issues, such as:

    • What benefits do I have available if I go on sick leave?
    • I need to change my 401k allocations.
    • I didn’t receive my last paycheck.

    It’s unlikely that the payroll system is also the benefits system. But the chatbot team needs to know that employees don’t think in terms of capabilities. They think in terms of needs. “I need to take care of my 401k” may mean going to one system to set up the deductions, and another system to change the allocations. If the chatbot says nothing but “I can’t help with that” in response, then the chatbot has failed. Our hypothetical payroll system could instead build goodwill by explaining the system to a member and recommending they speak to their HR representative.

    Webflow’s Customer Support chatbot does an excellent job of not only defining what it can do, but telling the user upfront: “[I]f I’m unable to solve a problem for you, a member of our Support team will get back to you by email. Note: We don’t provide support by phone or live chat at the moment, as we’ve found it most impactful to help you via email.” You may not think of this as an error message, because it’s really about solving the problem before it ever becomes an error.

    Hello! I'm the Webflow Support Assistant — if I'm unable to solve a problem for you, a member of our Support team will get back to you by email. Note: We don't provide support by phone or live chat at the moment, as we've found it most impactful to help you via email.
    Webflow’s chatbot clarifies immediately that if the bot gets stuck, the support team will respond via email. (Large preview)

    Internally, this means the team should define user flows from the end-user’s perspective, not just from the technical standpoint of what is possible. If Webflow had only considered things from their own perspective, they wouldn’t have thought to clarify what they don’t do. They would merely have solved the problems they could, and potentially left users wondering why (for example) they couldn’t find a phone number to call.

    Bringing Humanity To Your Chatbot

    Of course a chatbot is not a person. But it’s also not a second-choice option to a person. A chatbot can help people easily get answers to their questions, it can help them connect when they’re feeling vulnerable, and it can simplify complex processes. It is, like so many tools, a perfect solution to many potential problems.

    As the creators of these chatbots, that means we have an important mission! We must create appropriate responses, humanesque tones, and helpful user flows. We must write content to respond to people in different moods, and with diverse needs — anticipating their next steps and guiding them appropriately. Most of all, we must create transparent and trustworthy bots, so that the people interacting with them can trust the information they provide.

    Just remember: Define your actions, so that your chatbot accomplishes a business goal and a user need. Build out a script for your chatbot and decide if your chatbot will respond to off-script requests. Embrace your robot self and never pretend to be a human. Create a tone for each scenario. And lastly, make sure your chatbot can handle errors smoothly.

    Your chatbot is a program, not a human. Still, a well-designed program can bring happiness and ease to your audience! With these five steps,your chatbot will be capable of a near-human connection with your end-user. Now it’s your turn: follow these best practices and let us know how your audience responds to your bot.

    Smashing Editorial
    (cc, vf, yk, il)

    Source link

    web design

    How To Create Customer-Centric Landing Pages — Smashing Magazine

    08/25/2020

    Customer needs should be one of the primary considerations when designing a website or landing page. In this article, Travis Jamison explains why customer-centricity is so important and how you can apply it to almost every business decision that you make.

    Establishing whether there’s a market for a specific product takes a lot of time and effort. Through years of exposure to the nuances of a particular industry, experienced entrepreneurs develop a keen sense for noticing “gaps in the market,” be it for entirely new services or ways to improve on existing products.

    Vision typically precedes plenty of legwork. Before securing financing — or pouring their own savings into developing a new product — smart businesses apply serious diligence into establishing product-market fit. They build a value proposition that resonates with their prospective customers. They find out how their competitors managed to build a customer base. They may even go so far as building prototypes and conducting focus groups to get some real data on product feasibility.

    Essentially, companies understand the importance of knowing whether their new product has a good chance of being successful before going on the market. The relationship between customer needs and product offering is simply too obvious to ignore.

    This begs the question:

    “Why are customer needs overlooked in so many other aspects of running a successful business?”

    Sure, some of an organization’s moving parts don’t relate directly to the product itself. Nor the customer, for that matter. One could argue that a company’s website doesn’t exist to directly serve the customer. It’s there to provide and obtain information that would contribute to an increase in awareness and revenue.

    Why should we consider a customer’s needs when designing a website or landing pages? Does a customer even have needs in this context?

    You bet they do!

    And as the world of web design matures, the focus has started shifting to understanding what these needs are when it comes to designing the content that drives a sale.

    Gone are self-indulgent product stories. Gone are irrelevant, questionable claims. Gone are interfaces that take more than three seconds to load. The era of customer-centric landing pages has dawned. And if your job involves being concerned with metrics like conversion, engagement, and bounce-rates, this is a post that you may want to sit straight up for.

    Maintaining Consistency With Ad Copy And Landing Page Content

    The needs that landing pages serve aren’t the same as the needs our products serve.

    When thinking about creating any kind of customer-centric marketing material, we need to think about their needs outside of the context of the pain points our services will offer.

    What we’re talking about here are meta-needs. Those that make their interaction with our landing pages engaging and convenient to the extent that it puts them in a mental and emotional state that’s more receptive to being sold something.

    How do we do this? How do we subtly illustrate consideration for our landing page visitors’ needs?

    A great way to start is to create consistency between the core message of the advert and the landing page content. If your ad guys are doing their jobs properly, an advert linked to a specific keyword search will hook a potential customer with content that is relevant to their search.

    If this results in a click-through, your potential customer has already given you some pretty vital information: your ad copy speaks to their pain point. They believe the promise that your ad copy is making. They’re willing to start a journey with you.

    This concept is called “Ad Scent,” and if you are not leveraging this information on your landing page, you’re shooting yourself in the foot.

    MarketingSherpa reports that just under 50% of digital marketers understand the importance of a thread between ad copy and landing page, and create a landing page unique to each ad campaign.

    Sure, the overhead sounds like a headache, but it’s not rocket science. If you promise something in your ad copy, expand on that promise on your landing page. And not by simply repeating the ad copy using different terms. You’ve already conveyed a core message that speaks to a visitor’s needs. They get it. You sell something they want.

    Now is the time to provide them with information and prompts that link their needs to the action you want them to take.

    A great example of this is online retailer BangGood. After Googling “Cheap retro reading glasses,” you’re shown a sponsored ad reading: “Buy Cheap reading glasses retro round” and “$100 All Categories Coupon For New Users, Coupon Deals & Unbeatable Deals Every Day.”

    Clicking through to this page takes you directly to a product catalog that’s been filtered by our search term. There’s no need to click through multiple categories and subcategories to find the style you want. Plus, highly visible “discount” labels clearly show you how much you’d be saving on each of the products if you make a purchase right away.

    displaying discount amount on landing pages
    Image source: banggod.com. (Large preview)

    This brings us to another interesting concept behind creating engaging landing pages that optimize conversion: urgency.

    Leveraging Urgency

    Unlike shoppers going through the effort of strolling through a busy street looking for a deal, online shoppers have the option to view other retailers’ discounted wares within seconds of each other.

    Few things grab the attention of a semi-motivated customer better than a highly visible countdown timer showing how much time a visitor has to take advantage of a particular “hot deal.” There’s real psychology behind this notion.

    Zoma does this exceptionally well on their sales page. A clearly visible, but critically, non-intrusive visual element makes visitors aware of the fact that they have (gasp!) a short period of time left to capitalize on a massive discount.

    using countdown timer on landing pages to create sense of urgency
    Image source: zomasleep.com. (Large preview)

    Sure, shoppers may choose to click around for another hour to find a better deal, but there’s no way this offer is NOT sticking in the backs of their heads.

    This is customer-centric design at its best. What’s one thing that will hurry along any customer in their decision making? The feeling that they are one of the few people lucky enough to take advantage of a terrific deal.

    Providing Social Proof

    Another great thing Zoma does on this landing page is giving visitors something they don’t always know they want: proof that other shoppers were extremely satisfied with the given product.

    By now, the importance of social proof is ingrained in the thought processes of every marketer worth their salt, but what many fail to realize is the importance of its visibility and credibility on the landing page.

    In Zoma’s example, if you go to their sports mattress page a 4.7 star-rating is clearly visible along with a very attractive sample size. Seeing almost 300 reviews is certainly reassuring for a potential customer.

    Zoma goes the extra mile by making the review element clickable — an action that, critically, doesn’t take the user away from the landing page, but rather to an anchor on the page.

    What are they shown in this space? Simple copy that asks and answers the exact question they were having:

    “See why active people love Zoma.”

    And directly below this is a beautifully laid-out, uncluttered list of credible reviews by happy customers, all displayed above a floating CTA that prompts the visitor to add the product to their cart.

    putting reviews on landing pages for social proof
    Image source: zomasleep.com. (Large preview)

    How many customer needs are being addressed in the space of one click? Let’s see:

    • The need to have their consideration validated by their peers;
    • Reassurance that the reviews are legit;
    • The convenience of instantly taking action without needing to scroll back to a “purchase” area.

    None of these needs speak directly of the product itself, but rather leverage customer needs that are intrinsic to their online shopping experience.

    Addressing Pain Points

    Another aspect of customer-centric design in landing pages involves giving visitors the product information they need rather than the information the company feels is relevant.

    This concept speaks to the customer’s desire to instantly understand the value that a product will bring to their lives rather than a convoluted wall of text describing the company’s history, corporate values, and integrity of its staff.

    Customers who have followed a link to a landing page want to know what’s in it for them. And they want to know this within seconds of reading the copy.

    Marketers need to anticipate the pain points a customer wants addressed. This information should always be readily available, if they’ve done their customer profiling correctly and have a great understanding of their value proposition.

    But the kicker is that conveying this value — illustrating clearly how the product will fulfill the customer’s needs — needs to be done in an engaging and easily understandable way.

    Engaging Potential Customers

    In this context, what does “engaging” mean? While there aren’t any paint-by-numbers answers to this question, there are some general guidelines.

    Keep the visual clutter to a minimum. Show only imagery and text that relate directly to the reasons a person may be interested in the product. At first glance, do they care about the years you spent developing the service with the help of industry experts? Do they care about your company’s strategic roadmap?

    Nope. They care about one thing:

    “How is spending their money on your product going to solve a problem they have?”

    A terrific example of this super-simplified, though highly engaging approach to communicating true customer value can be seen on the landing page for Elemental Labs.

    communicating customer value propositions on landing pages
    Image source: drinklmnt.com. (Large preview)

    Aside from navigation and other peripheral content elements, just over twenty words are visible to the visitor. And in those two sentences, what is communicated to the visitor? How many of their pain points are addressed? How many reasons are they given to be drawn to the CTA?

    What the product is and the value it represents to the potential customer is spelled out within seconds of the user landing on this page. Customer-centricity is at the forefront of every aspect of this page’s design.

    Using simple, high-quality product visuals aligned with graphic design principles that promote maximum engagement is another way to capitalize on customers-centricity.

    This is something that LMNT also does exceptionally well, showing simple, tasteful visuals that show the product in its packaging as well as in use.

    This tells an extremely simple visual story that can’t help but connect the customer to a mental impression of actually using the product. There’s no need for a complex sequence of images showing how the sachet is opened, poured, mixed, and then drank.

    Wrapping It All Up

    Customer-centricity is something that can and should be applied to almost every decision that a business makes. The temptation is always there to only think about customer needs as they interact with the product or service itself, but smart marketers and entrepreneurs understand that customer needs extend beyond their use of the product.

    Customers require their time to be respected. They need businesses to understand that their attention span is limited.

    They need marketers to grasp that product value isn’t something abstract. It’s something that must be communicated intelligently, without the informational and visual clutter that so often drags attention away from what’s really important:

    “In what ways can the product or service make customer lives easier?”

    If this question is one of the first that every marketing professional asks themselves ahead of a campaign, they’re starting out on the right path.

    Smashing Editorial
    (ah, ra, yk, il)

    Source link

    web design

    How To Create Customer-Centric Landing Pages — Smashing Magazine

    08/25/2020

    Customer needs should be one of the primary considerations when designing a website or landing page. In this article, Travis Jamison explains why customer-centricity is so important and how you can apply it to almost every business decision that you make.

    Establishing whether there’s a market for a specific product takes a lot of time and effort. Through years of exposure to the nuances of a particular industry, experienced entrepreneurs develop a keen sense for noticing “gaps in the market,” be it for entirely new services or ways to improve on existing products.

    Vision typically precedes plenty of legwork. Before securing financing — or pouring their own savings into developing a new product — smart businesses apply serious diligence into establishing product-market fit. They build a value proposition that resonates with their prospective customers. They find out how their competitors managed to build a customer base. They may even go so far as building prototypes and conducting focus groups to get some real data on product feasibility.

    Essentially, companies understand the importance of knowing whether their new product has a good chance of being successful before going on the market. The relationship between customer needs and product offering is simply too obvious to ignore.

    This begs the question:

    “Why are customer needs overlooked in so many other aspects of running a successful business?”

    Sure, some of an organization’s moving parts don’t relate directly to the product itself. Nor the customer, for that matter. One could argue that a company’s website doesn’t exist to directly serve the customer. It’s there to provide and obtain information that would contribute to an increase in awareness and revenue.

    Why should we consider a customer’s needs when designing a website or landing pages? Does a customer even have needs in this context?

    You bet they do!

    And as the world of web design matures, the focus has started shifting to understanding what these needs are when it comes to designing the content that drives a sale.

    Gone are self-indulgent product stories. Gone are irrelevant, questionable claims. Gone are interfaces that take more than three seconds to load. The era of customer-centric landing pages has dawned. And if your job involves being concerned with metrics like conversion, engagement, and bounce-rates, this is a post that you may want to sit straight up for.

    Maintaining Consistency With Ad Copy And Landing Page Content

    The needs that landing pages serve aren’t the same as the needs our products serve.

    When thinking about creating any kind of customer-centric marketing material, we need to think about their needs outside of the context of the pain points our services will offer.

    What we’re talking about here are meta-needs. Those that make their interaction with our landing pages engaging and convenient to the extent that it puts them in a mental and emotional state that’s more receptive to being sold something.

    How do we do this? How do we subtly illustrate consideration for our landing page visitors’ needs?

    A great way to start is to create consistency between the core message of the advert and the landing page content. If your ad guys are doing their jobs properly, an advert linked to a specific keyword search will hook a potential customer with content that is relevant to their search.

    If this results in a click-through, your potential customer has already given you some pretty vital information: your ad copy speaks to their pain point. They believe the promise that your ad copy is making. They’re willing to start a journey with you.

    This concept is called “Ad Scent,” and if you are not leveraging this information on your landing page, you’re shooting yourself in the foot.

    MarketingSherpa reports that just under 50% of digital marketers understand the importance of a thread between ad copy and landing page, and create a landing page unique to each ad campaign.

    Sure, the overhead sounds like a headache, but it’s not rocket science. If you promise something in your ad copy, expand on that promise on your landing page. And not by simply repeating the ad copy using different terms. You’ve already conveyed a core message that speaks to a visitor’s needs. They get it. You sell something they want.

    Now is the time to provide them with information and prompts that link their needs to the action you want them to take.

    A great example of this is online retailer BangGood. After Googling “Cheap retro reading glasses,” you’re shown a sponsored ad reading: “Buy Cheap reading glasses retro round” and “$100 All Categories Coupon For New Users, Coupon Deals & Unbeatable Deals Every Day.”

    Clicking through to this page takes you directly to a product catalog that’s been filtered by our search term. There’s no need to click through multiple categories and subcategories to find the style you want. Plus, highly visible “discount” labels clearly show you how much you’d be saving on each of the products if you make a purchase right away.

    displaying discount amount on landing pages
    Image source: banggod.com. (Large preview)

    This brings us to another interesting concept behind creating engaging landing pages that optimize conversion: urgency.

    Leveraging Urgency

    Unlike shoppers going through the effort of strolling through a busy street looking for a deal, online shoppers have the option to view other retailers’ discounted wares within seconds of each other.

    Few things grab the attention of a semi-motivated customer better than a highly visible countdown timer showing how much time a visitor has to take advantage of a particular “hot deal.” There’s real psychology behind this notion.

    Zoma does this exceptionally well on their sales page. A clearly visible, but critically, non-intrusive visual element makes visitors aware of the fact that they have (gasp!) a short period of time left to capitalize on a massive discount.

    using countdown timer on landing pages to create sense of urgency
    Image source: zomasleep.com. (Large preview)

    Sure, shoppers may choose to click around for another hour to find a better deal, but there’s no way this offer is NOT sticking in the backs of their heads.

    This is customer-centric design at its best. What’s one thing that will hurry along any customer in their decision making? The feeling that they are one of the few people lucky enough to take advantage of a terrific deal.

    Providing Social Proof

    Another great thing Zoma does on this landing page is giving visitors something they don’t always know they want: proof that other shoppers were extremely satisfied with the given product.

    By now, the importance of social proof is ingrained in the thought processes of every marketer worth their salt, but what many fail to realize is the importance of its visibility and credibility on the landing page.

    In Zoma’s example, if you go to their sports mattress page a 4.7 star-rating is clearly visible along with a very attractive sample size. Seeing almost 300 reviews is certainly reassuring for a potential customer.

    Zoma goes the extra mile by making the review element clickable — an action that, critically, doesn’t take the user away from the landing page, but rather to an anchor on the page.

    What are they shown in this space? Simple copy that asks and answers the exact question they were having:

    “See why active people love Zoma.”

    And directly below this is a beautifully laid-out, uncluttered list of credible reviews by happy customers, all displayed above a floating CTA that prompts the visitor to add the product to their cart.

    putting reviews on landing pages for social proof
    Image source: zomasleep.com. (Large preview)

    How many customer needs are being addressed in the space of one click? Let’s see:

    • The need to have their consideration validated by their peers;
    • Reassurance that the reviews are legit;
    • The convenience of instantly taking action without needing to scroll back to a “purchase” area.

    None of these needs speak directly of the product itself, but rather leverage customer needs that are intrinsic to their online shopping experience.

    Addressing Pain Points

    Another aspect of customer-centric design in landing pages involves giving visitors the product information they need rather than the information the company feels is relevant.

    This concept speaks to the customer’s desire to instantly understand the value that a product will bring to their lives rather than a convoluted wall of text describing the company’s history, corporate values, and integrity of its staff.

    Customers who have followed a link to a landing page want to know what’s in it for them. And they want to know this within seconds of reading the copy.

    Marketers need to anticipate the pain points a customer wants addressed. This information should always be readily available, if they’ve done their customer profiling correctly and have a great understanding of their value proposition.

    But the kicker is that conveying this value — illustrating clearly how the product will fulfill the customer’s needs — needs to be done in an engaging and easily understandable way.

    Engaging Potential Customers

    In this context, what does “engaging” mean? While there aren’t any paint-by-numbers answers to this question, there are some general guidelines.

    Keep the visual clutter to a minimum. Show only imagery and text that relate directly to the reasons a person may be interested in the product. At first glance, do they care about the years you spent developing the service with the help of industry experts? Do they care about your company’s strategic roadmap?

    Nope. They care about one thing:

    “How is spending their money on your product going to solve a problem they have?”

    A terrific example of this super-simplified, though highly engaging approach to communicating true customer value can be seen on the landing page for Elemental Labs.

    communicating customer value propositions on landing pages
    Image source: drinklmnt.com. (Large preview)

    Aside from navigation and other peripheral content elements, just over twenty words are visible to the visitor. And in those two sentences, what is communicated to the visitor? How many of their pain points are addressed? How many reasons are they given to be drawn to the CTA?

    What the product is and the value it represents to the potential customer is spelled out within seconds of the user landing on this page. Customer-centricity is at the forefront of every aspect of this page’s design.

    Using simple, high-quality product visuals aligned with graphic design principles that promote maximum engagement is another way to capitalize on customers-centricity.

    This is something that LMNT also does exceptionally well, showing simple, tasteful visuals that show the product in its packaging as well as in use.

    This tells an extremely simple visual story that can’t help but connect the customer to a mental impression of actually using the product. There’s no need for a complex sequence of images showing how the sachet is opened, poured, mixed, and then drank.

    Wrapping It All Up

    Customer-centricity is something that can and should be applied to almost every decision that a business makes. The temptation is always there to only think about customer needs as they interact with the product or service itself, but smart marketers and entrepreneurs understand that customer needs extend beyond their use of the product.

    Customers require their time to be respected. They need businesses to understand that their attention span is limited.

    They need marketers to grasp that product value isn’t something abstract. It’s something that must be communicated intelligently, without the informational and visual clutter that so often drags attention away from what’s really important:

    “In what ways can the product or service make customer lives easier?”

    If this question is one of the first that every marketing professional asks themselves ahead of a campaign, they’re starting out on the right path.

    Smashing Editorial
    (ah, ra, yk, il)

    Source link

    web design

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

    08/07/2020

    About The Author

    Visual and UI/UX Designer, the author of dozens Adobe Photoshop and Sketch tutorials. Espresso addict. Watch enthusiast.
    More about
    Nikola
    Lazarević

    This is the third and final part of the tutorial in which we’ll create the wheels (rims and tires), and add all the final touches (including the racing decals on the car’s body). This tutorial is geared more towards experienced illustrators, but if you’re new to Sketch, you should be able to profit from it, too. As you’ll see, all of the steps are explained in great detail. Still, you may want to read Part 1 and Part 2 first before we dive into the final details of the illustration.

    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)

    Source link

    web design

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

    08/07/2020

    About The Author

    Visual and UI/UX Designer, the author of dozens Adobe Photoshop and Sketch tutorials. Espresso addict. Watch enthusiast.
    More about
    Nikola
    Lazarević

    This is the third and final part of the tutorial in which we’ll create the wheels (rims and tires), and add all the final touches (including the racing decals on the car’s body). This tutorial is geared more towards experienced illustrators, but if you’re new to Sketch, you should be able to profit from it, too. As you’ll see, all of the steps are explained in great detail. Still, you may want to read Part 1 and Part 2 first before we dive into the final details of the illustration.

    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)

    Source link

    web design

    How To Create A Porsche 911 With Sketch (Part 2) — Smashing Magazine

    07/31/2020

    About The Author

    Visual and UI/UX Designer, the author of dozens Adobe Photoshop and Sketch tutorials. Espresso addict. Watch enthusiast.
    More about
    Nikola
    Lazarević

    In Part 1 of this tutorial, Nikola Lazarević explained how you can create and tweak the body of a car in Sketch including the front signal lights and the tail lights. In this part, he continues with the design of the car windows, bumpers, headlights, the interior, and a few other elements.

    Are you ready to push Sketch to its limits once again? As noted in the previous part, this tutorial is geared more towards experienced illustrators, but if you’re new to Sketch then you should also be able to profit from it since all of the steps are explained in great detail.

    After finished off the tail lights, let’s continue with the design of the car windows.

    7. Rubber Seals Around The Windows

    In this step, we will add rubber seals around the windows. Start first with the side window. Switch to the Vector tool (V) and draw a shape around the the side window, like on the image below.

    Note: Before you continue, remember that we’re still drawing inside the bodywork group!

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw a rubber seal shape around the side window. (Large preview)

    Turn off Borders and set Fills to #000000, and add a Shadows effect:

    • Color: #FFFFFF
    • Alpha: 90%
    • X: 0; Y: 0; Blur: 3; Spread: 1
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rubber seal around the side window is now complete. (Large preview)

    Next, let’s add a rubber seal around the front windshield. Draw a shape around the front window, turn off Borders, set Color to #000000 and apply Shadows:

    • Color: #FFFFFF
    • Alpha: 90%
    • X: 0; Y: 0; Blur: 3; Spread: 1
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front windshield’s rubber seal. (Large preview)

    Now, let’s add a trim on top of the rubber seal. To do that, duplicate the seal shape, turn off Fills and Shadows, turn on Borders, set Color to #E0E0E0, border position to Inside and Width to 1.5px. Double-click on the shape to enter vector editing mode and then select and move the points until you have something like on the image below. Be patient, it may require some time!

    Note: While usually I’d suggest avoiding half-pixels in your vector illustrations as much as possible, in some cases these might actually work well. After quite some trial and error while working on the trim on top of the windshield’s rubber seal, I’ve discovered that 1.5px gives the best visual results.

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

    Tip: Change point types as needed while working on this shape.

    At the end of this step, we need also to add a seal around the rear windshield. Draw a shape around it, turn off Border, set Fills to #000000 and apply Shadows with the same parameters like we did for the previous seals.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rear windshield’s rubber seal. (Large preview)

    8. Door Handle

    Pick up the Oval tool (O) and draw an ellipse. Set Border color to #949494, position to Center with a Width of 1px. For the Fills use a Linear Gradient:

    1. #787878
    2. #C9C9C9
    3. #A5A5A5

    And add Inner Shadows:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: 2; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw an ellipse for the door handle. (Large preview)

    Create a rectangle on the left and on the right side of the ellipse by using the Rectangle tool (R). Make the outer corners rounded by using the Radius property in the Inspector panel. Turn off Borders and set Fills to #333333.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the rectangles on the left and on the right side of the door ellipse. (Large preview)

    We will now use Inner Shadows and Shadows to make it look slightly raised.

    Select left side rectangle and add a light Inner Shadows effect with the following properties:

    • Color: #FFFFFF
    • Alpha: 20%
    • X: 2; Y: -2; Blur: 1; Spread: 0

    Then, apply a Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: 0; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Apply the effects to the left side rectangle. (Large preview)

    Next, select right side rectangle and apply Inner Shadows effect:

    • Color: #FFFFFF
    • Alpha: 20%
    • X:2; Y: -2; Blur: 1; Spread: 0

    Apply a Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: 0; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Apply the effects to the right side rectangle. Still not there but we’re getting closer! (Large preview)

    Let’s move on to handle. We will build our handle out of three shapes.

    First, create two rectangles by using the Rectangle tool (R) and make the sides rounded with a help of the Radius property set from the Inspector panel.

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

    Then, use the Vector tool (V) to draw a shape between the rectangles.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    With the Vector tool, draw a shape between these two rectangles. (Large preview)

    Now select the rectangles and the shape we have just created and perform a Union operation (from the top Sketch toolbar) to create one object. Name this object handleshape. Change the Color to #E3E3E3 and add an Inner Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: -2; Blur: 5; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the object and apply the styles. (Large preview)

    Let’s add a subtle shadow to the handle. Zoom in and draw a shape like on the image below. Don’t worry if the bottom part goes out of handle area, we will fix this later with a masking operation. Turn off Borders and set Fills to #3D3D3D.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add a shadow to the door handle. (Large preview)

    Let’s fit the shadow inside the handle. Select the handle and the shadow shape, and click on Mask in the top toolbar. The result of this masking operation will automatically be placed in a new group in the Layers panel list. Change the name of this group to handle.

    Tip: *Don’t forget to check if Sketch turned off Inner Shadows for the masking layer. If that’s the case, just turn them back on.*

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘handle’ group is complete. (Large preview)

    Now, let’s add a key lock to the door handle.

    Draw a small circle. Add a Center Border with a Width of 1px and the Color set to #000000. Change Fills to Linear Gradient, and adjust the gradient with the following parameters:

    1. #888888
    2. #DFDFDF
    3. #CACACA

    Apply a Shadow effect with the Color set to #000000 at 90% alpha, Blur to 3, the X and Y positions and Spread set to 0.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create a key lock. (Large preview)

    Create a keyhole by drawing a tiny black rectangle without Borders in the middle of the circle. Group both shapes (circle and rectangle) into a key-lock group.

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

    The only thing left to do is to create the handle’s shadow which should be placed inside the ellipse (see the next screenshot). Find the handleshape object in the Layers panel list, click on the caret in front of the layer name to reveal its content (the shapes), select the bridge between the rectangles and press Cmd + C to copy this shape.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Select the bridge between the rectangles then copy it. (Large preview)

    Select the ellipse that is below the handle, paste (Cmd + V) over the shape that we’ve just copied, set the Color to #505050, push it down 2px and apply a Gaussian Blur with an Amount of 2. Then select this shape along with the ellipse and group them together (Cmd + G).

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Paste, move, apply the styles, then group. (Large preview)

    Inside this group, select the ellipse, right-click on it and choose Mask from the menu, to make sure that the shadow will stay inside the ellipse.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The handle shadow is now complete. (Large preview)

    Select all the elements that we created in this step and place them into a group named door handle.

    9. Bumpers

    Let’s create the front bumper first. Switch to the Vector tool (V) and draw the shape. Change the Fills Opacity to 0%, make sure that Borders are turned off and apply light and dark Inner Shadows effect.

    First add a light Inner Shadows effect with the following properties:

    • Color: #FFFFFF
    • Alpha: 50%
    • X: 0; Y: 5; Blur: 6; Spread: 0

    Then, add a dark Inner Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: -2; Y: -5; Blur: 6; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper. (Large preview)

    Do the same for the rear bumper, but instead use these parameters for the dark Inner Shadow effect:

    • Color: #000000
    • Alpha: 50%
    • X: 3; Y: -5; Blur: 6; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rear bumper. (Large preview)

    Name these shapes front bumper and rear bumper.

    Let’s move on to the next element on the case. Now we will create the decoration on the front bumper. Grab the Rounded Rectangle tool (U) and draw a rounded rectangle (174px by 14px). Make sure it is outside of the bodywork group and give it the name bumper deco base.

    Turn off Borders and then click on Fills, choose Linear Gradient, and add a gradient. Use #E4E4E4 with 100% alpha for the first color stop and #858585 with alpha 100% for the last color stop. Now, add another point with a click on the gradient axis in the color dialog, and move it to the exact middle by pressing 5 on the keyboard. Give it 100% alpha, and make sure its color is #E4E4E4. Add another one to the right, and also move it to the center. Change the color of this stop to #858585 with 100% alpha.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper deco element. (Large preview)

    Duplicate the shape (Cmd + D), change the name to front bumper deco shadow and using the Layers panel list, drag it inside the bodywork group just above the front bumper shape, and add two Shadows effects.

    Add the first Shadows effect with the following properties:

    • Color: #000000
    • Alpha: 80%
    • X: 0; Y: 2; Blur: 2; Spread: 2

    Then, add the second Shadows effect:

    • Color: #000000
    • Alpha: 80%
    • X: 0; Y: -2; Blur: 2; Spread: 1
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘front bumper deco’ shadow. (Large preview)

    Let’s add a rubber element in the middle of the bumper deco. Select the bumper deco base, duplicate it and give this shape the name of rubber. Change the Fills to #303030 Solid Color, and change the Height to the half size, then align it to the middle with bumper deco base, using the Inspector panel.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper ‘rubber’ shape. (Large preview)

    Add the following effects to the rubber shape.

    First, a light Inner Shadow:

    • Color: #FFFFFF
    • Alpha: 30%
    • X: 0; Y: 2; Blur: 2; Spread: 0

    Then, a dark Inner Shadow:

    • Color: #000000
    • Alpha: 100%
    • X: 0; Y: -4; Blur: 1; Spread: 0

    After that, a dark Shadow:

    • Color: #000000
    • Alpha: 100%
    • X: 0; Y: -1; Blur: 2; Spread: 0

    And lastly, a light Shadow:

    • Color: #FFFFFF
    • Alpha: 50%
    • X: 0; Y: 2; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Apply all the styles to the front bumper ‘rubber’ element. (Large preview)

    Finally, select the bumper deco base and the rubber shapes and perform a Mask operation so that none of the rubber shadows go outside of the bumper deco base. Name the resulting group front bumper deco.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper ‘rubber’ shape is now complete. (Large preview)

    Now, using the same method as explained above, create the rear bumper deco element.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    When it’s ready, the rear bumper deco should look like this. (Large preview)

    Switch to the Vector tool (V) and draw a basic shape for the rear bumper guard. Add a Linear Gradient with the following properties:

    1. #EEEEEE
    2. #C9C9C9
    3. #939393
    4. #6C6C6C
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the rear bumper guard. (Large preview)

    Duplicate this shape, place it behind (right-click on the shape and choose Move Backward from the context menu), apply #2D2D2D Solid Color, push it a couple of pixels to the right and resize the height down a bit using the resize handles. Name this shape rubber buffer. Add an Inner Shadows effect with the Color set to #FFFFFF at 30% alpha. Set Y and Blur to 2, and X and Spread to 0.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘rubber buffer’. (Large preview)

    Select again the shape on top, duplicate it one more time, and use the key to move it a few pixels to the left. Modify the Linear Gradient (delete the two middle points, change the colors of the top and bottom points to #8E8E8E and #DEDEDE then move the top point down a bit). Finally, apply a Gaussian Blur effect with the Amount of 0.6.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue working on the rear bumper guard. (Large preview)

    Select this shape and the shape below this one and perform a Mask operation. Name the resulting group bumper guard base, then select the resulting group and the rubber buffer shape and group them into a group rear bumper guard. Place this group just below the bodywork group in the Layers panel list.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rear bumper guard — now finished. (Large preview)

    Using the Rectangle tool, create two rectangles like on the image below (use Radius in the Inspector panel to control the roundness of the points). Select both shapes and to create one object, from the top toolbar in Sketch perform a Union operation. Move this new object inside the rear bumper guard group, directly into the bumper guard base group on top. Change Color to #000000, turn off Borders and add Gaussian Blur with the Amount of 1.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the shadow from the bumper inside the bumper guard. (Large preview)

    Here’s a preview of what we’ve done so far.

    The Porsche 911 illustration &mdash; getting there bit by bit...
    The Porsche 911 — getting there bit by bit… (Large preview)

    10. Windshields

    Side Windows

    Remember those side window 1 and side window 2 copies that we have created at the beginning of the tutorial, in Part 1?

    Well it’s time to use them! Locate these copies in the Layers panel list and un-hide them. Make sure that Fills is turned off and add 5px Width Borders with a #72BD20 color, positioned Inside.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Time to un-hide the ‘side window 1’ and ‘side window 2’ copies! (Large preview)

    At the beginning, we will create the window frames using these shapes.

    So first, we will need to convert a shape border to a shape itself. We need to apply Inner Shadows to the window frames because there’s no option to apply Inner Shadows to Borders.

    To outline the borders, select both shapes and go to LayerConvert to Outlines (or press Alt + Cmd + O on the keyboard).

    Note: Converting the shapes to outlines has turned each shape into two separate combined shape layers. That’s because an outline stroke is a combined path that exists of two shapes:

    • one that determines the outer boundaries, and
    • the other determines the inner boundaries, creating the appearance of a stroke.
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The outline borders. (Large preview)

    Select and copy (Cmd + C) the inner shapes, then deselect the shapes by pressing Esc on the keyboard and finally paste (Cmd + V) them (please note that Sketch will place the copies on top), because we will use these shapes as windshields. Give them the names of side windshield 1 and side windshield 2 and hide them for now.

    Let’s continue with the window frames. Draw two shapes using the Vector tool (V), select those newly created shapes and the side window 1 shape and perform a Union operation to create one shape. Change Fills to #DCDCDC and add Inner Shadows with the Color set to #000000 with 50% Alpha and Blur set to 2.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘side window 1’. (Large preview)

    Apply the same styles — Fills and Inner Shadows — to the side window 2.

    Un-hide the side windshields and place them below the bodywork group in the Layers panel list.

    Tip: Since the windshields are basically transparent I suggest you to temporary add some background color to the artboard, so you can actually see what we are going to do. To do that, select the artboard and then turn on ‘Background color’ in the Inspector panel then set ‘Color’ to something like #434343.

    Now back to the side windshields: select the first one (the one on the left), turn off Borders and set Fills to Linear Gradient:

    1. Color: #FFFFFF, Alpha: 0%
    2. Color: #FFFFFF, Alpha: 22%
    3. Color: #FFFFFF, Alpha: 50%
    4. Color: #FFFFFF, Alpha: 27%
    5. Color: #FFFFFF, Alpha: 30%
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘side windshield 1’. (Large preview)

    Do the same for the other windshield.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘side windshield 2’. (Large preview)

    Tip: You can use the Sketch’s feature Copy Style from the first windshield (right-click and choose ‘Copy Style’) then paste the style to the second windshield (right-click then choose ‘Paste Style’). After that, you may only need to slightly move the points to adjust the gradient to match with previous one, since the shapes are not the same height.

    Front Windshield

    Switch to the Vector tool and draw a shape for the front windshield. Apply a Linear Gradient with the following parameters:

    1. Color: #F3F2F0, Alpha: 40%
    2. Color: #FFFFFF, Alpha: 50%
    3. Color: #F3F2F0, Alpha: 20%
    4. Color: #F3F2F0, Alpha: 10%

    Then add Inner Shadows with the Color set to #000000 with 10% Alpha. Set Y position to 2 and Blur to 8. Name it front windshield.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘front windshield’ element. (Large preview)

    Rear Windshield

    Draw a rear windshield with the Vector tool, and apply the same style (Linear Gradient and Inner Shadows) like for the front windshield.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘rear windshield’ element. (Large preview)

    Name this shape rear windshield, then select all the windshield shapes, group them into a windshields group and make sure that this group is below the bodywork group in the Layers panel list.

    Note: You can now turn off the Artboard’s background color in the Inspector panel.

    11. Headlight

    For the headlight, switch to the Vector tool and draw the shape that will be headlight glass. Use Solid Color #E4E4E4, turn off Borders and add Inner Shadows effect:

    • Color: #000000
    • Alpha: 10%
    • X: 5; Y: -2; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Let’s create the headlight glass. (Large preview)

    Next, draw a black (#000000) shape over the headlight glass. Duplicate this shape (Cmd + D), push it 1px the the left and apply a Linear Gradient with the following parameters, from top to bottom:

    1. #EEEEEE
    2. #F5F5F5
    3. #828282
    4. #484848
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the next part of the headlight. (Large preview)

    Select all the shapes and group them (Cmd + G) into s headlight group. Then we need to rotate it a bit (by 25 degrees) and place it above the bodywork group.

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

    12. Rear Engine Grille

    In this step we will create a grille over the rear engine lid. Once again, pick up the Vector tool (V) and draw a shape. Change Fills to #000000 and add Inner Shadows — for the Color use #FFFFFF with 80% Alpha, and set X position to -2.

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

    Duplicate this shape, move it to the left and down a bit, zoom in close enough, switch to vector editing mode and move the points so they touch the edge of the rear engine lid. Use the image below as a reference.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Start building the engine grille using the grille element. (Large preview)

    Repeat this eight more times to form a grille over the engine lid. Then draw a line using the Line tool (L). For the Color use #CCCCCC, set Width to 1px and choose Round cap for the Border ends. Apply black (#000000) Shadows effect with 100% Alpha and Blur of 2.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The engine grille is now complete. (Large preview)

    Select all of the grille layers, and place them inside the group rear engine grille.

    13. Side Mirror

    Let’s move on to the other details on the car. The side mirrors!

    Using the Vector tool, create a shape which will be the base for the side mirror, turn off Borders and use Linear Gradient for the Fills:

    1. #E5E5E5
    2. #D5D5D5
    3. #878787
    4. #6A6463

    Then add Inner Shadows:

    • Color: #000000
    • Alpha: 50%
    • X: 2; Y: -2; Blur: 6; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Shaping the ‘side mirror base’ shape. (Large preview)

    Name this shape side mirror base.

    Draw another shape, which will be mirror cover, once again turn off Borders and change Fills to Linear Gradient:

    1. #CCCACB
    2. #FEFEFE
    3. #A1A5A4
    4. #4A413F
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘mirror cover base’. (Large preview)

    Give this shape the name of mirror cover base. Duplicate the shape and push it 4px to the left using the key on the keyboard. Change Color to #C4C4C4 and add two Inner Shadows.

    For the first Inner Shadow use:

    • Color: #000000
    • Alpha: 60%
    • X: 5; Y: 0; Blur: 1; Spread: 0

    For the second Inner Shadow use following properties:

    • Color: #000000
    • Alpha: 50%
    • X: -4; Y: 5; Blur: 6; Spread: 0

    Then select both shapes and perform a Mask operation, so the top shape does not extend past the mirror cover (the bottom shape). Name the resulting group mirror cover.

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

    Select side mirror base and add one more Inner Shadows effect, to add shadow from the mirror cover. For the Color use #000000 with 50% Alpha, set X position to -1 and Blur to 1.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add a shadow from the mirror cover. (Large preview)

    We will finish this step by creating a shadow from the side mirror.

    Grab the Vector tool and draw a shape like on the image below. Place it below the side mirror base, push it a bit up so it is really behind it, and add a Linear Gradient for the Fills. For the top stop use #000000 with 40% Alpha and for the bottom stop also use #000000 but with 0% Alpha. Don’t forget to turn off Borders.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create a shadow from the side mirror. (Large preview)

    Name this shape side mirror shadow, then select all shapes created in this step and group them into a side mirror group.

    14. Exhaust Pipe

    It’s time to create the exhaust pipe. First, find in the Layers panel list the floor layer, remember — the one that we’ve created at the beginning of the tutorial in Step 2 — and un-hide it. Switch to the Rectangle tool (R) and draw a rectangle with the Radius set to 2. This rectangle shape will represent the exhaust pipe.

    Turn off Borders and set Fills to a Linear Gradient:

    1. #E2E2E2
    2. #E3E3E3
    3. #A0A0A0
    4. #2C2C2C
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the exhaust pipe shape. (Large preview)

    Duplicate the rectangle, make it smaller in width, switch to the vector editing mode, select the points on the right side and set their Radius to 0, then modify the existing Linear Gradient to:

    1. #1E1E1E
    2. #3A3A3A
    3. #2A2A2A
    4. #111111
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw another part of the exhaust pipe. (Large preview)

    Select both rectangles, group them into an exhaust pipe group and place the group just above the rear bumper guard in the Layers panel list.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The exhaust pipe, now finished. (Large preview)

    15. Car Interior

    Select side window 1 and side window 2, duplicate them (Cmd + D), change Color to #000000 and turn off the Inner Shadows.

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

    Place these duplicates below the rear bumper guard in the Layers panel list, and then, using the arrow keys on the keyboard, shift them 5px down and 2px to the right.

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

    Draw a shape, which will represent the visible part of the car’s dashboard, turn off Borders and set the Fills to #2A2A2A.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the visible part of the dashboard. (Large preview)

    Next, let’s create the steering wheel.

    Create a rectangle using the Rounded Rectangle tool (U), turn off Borders and change Fills to horizontal Linear Gradient with the following parameters:

    1. #000000
    2. #676767
    3. #292929
    4. #090909

    Then we need to rotate the rectangle -24 degrees and move it to the left a bit.

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

    Now let’s continue with other details of the car interior. Select the Vector tool and create a shape like on the image below. Turn off Borders, set Color to #000000, and apply Inner Shadows effect:

    • Color: #FFFFFF
    • Alpha: 30%
    • X: -12; Y: -6; Blur: 8; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue adding elements to the car interior. (Large preview)

    Use the Oval tool (O) to draw a small ellipse. For the Color use #717171 and turn the Borders off.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add another element to the car interior. (Large preview)

    Now let’s create the visible part of the driver’s seat. Create a shape with the Vector tool. Turn off Borders and use a Linear Gradient; for the top color stop use color #6D6D6D and for the bottom #171717. And add an Inner Shadows effect — Color is #000000 with 50% Alpha, X position is 2 and Blur is 7.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the driver’s seat. (Large preview)

    Duplicate this shape, push it 5px to the right and 1px up by using the arrow keys. Then modify the existing Linear Gradient — change the bottom color stop to #000000. And modify the Inner Shadows effect — change the Color to #FFFFFF with 10% Alpha; set X and Y positions to 5, and Blur also to 5.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue working on refining the seat’s details. (Large preview)

    Now let’s add stitches to the seat.

    Duplicate this shape, push it 5px to the right and 3px down. Then, turn off Fills and Inner Shadows, bring back Borders and for the Color choose Linear Gradient — for the top color stop use #696969 and for the bottom #000000. Add Shadow effect — for the Color use #000000 with 50% Alpha and set Blur to 2. Then select this shape and the layer below it and perform a Mask operation, so the stitches do not go outside the seat’s boundaries.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add stitches to the driver’s seat. (Large preview)

    Almost ready with the car interior!

    Next, select all layers and groups that we’ve created in this step and that are above the car body and position them just above side window 1 copy and side window 2 copy in the Layers panel list. Add to the selection those two shapes as well (side window 1 copy and side window 2 copy) and create a group (Cmd + G) named interior.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The car interior is now complete. (Large preview)

    Let’s take a look at the big picture again.

    Final image 2/3: Let’s take a look at our Porsche 911 car &mdash; we’re more than half-way there!
    Final image 2/3: Let’s take a look at our Porsche 911 car — we’re more than half-way there! (Large preview)

    It’s not bad, right?

    But, before we conclude this part of the tutorial, let’s add one more small detail to the car body, so pick up the Line tool (L) and draw a line. For the Color use #E5E5E5, set Width to 2px and choose Round cap for the Border ends. Then apply Shadows — set Color to #000000 at 80% Alpha, Y position to 2 and Blur to 3. Finally, place this line inside the bodywork group.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The car’s body is now finished — one more final detail added. (Large preview)

    Conclusion

    The body of the car is now ready, as well as the windows, bumpers, headlights and taillights, and the interior — dashboard, the steering wheel, and the seat. In the next (and final) part of the tutorial, we’ll create the wheels (rims and tires), and we’ll add all the final touches, including the racing decals on the car’s body.

    Smashing Editorial
    (mb, ra, yk, il)

    Source link

    web design

    How To Create A Porsche 911 With Sketch (Part 2) — Smashing Magazine

    07/31/2020

    About The Author

    Visual and UI/UX Designer, the author of dozens Adobe Photoshop and Sketch tutorials. Espresso addict. Watch enthusiast.
    More about
    Nikola
    Lazarević

    In Part 1 of this tutorial, Nikola Lazarević explained how you can create and tweak the body of a car in Sketch including the front signal lights and the tail lights. In this part, he continues with the design of the car windows, bumpers, headlights, the interior, and a few other elements.

    Are you ready to push Sketch to its limits once again? As noted in the previous part, this tutorial is geared more towards experienced illustrators, but if you’re new to Sketch then you should also be able to profit from it since all of the steps are explained in great detail.

    After finishing off the tail lights, let’s continue with the design of the car windows.

    7. Rubber Seals Around The Windows

    In this step, we will add rubber seals around the windows. Start first with the side window. Switch to the Vector tool (V) and draw a shape around the the side window, like on the image below.

    Note: Before you continue, remember that we’re still drawing inside the bodywork group!

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw a rubber seal shape around the side window. (Large preview)

    Turn off Borders and set Fills to #000000, and add a Shadows effect:

    • Color: #FFFFFF
    • Alpha: 90%
    • X: 0; Y: 0; Blur: 3; Spread: 1
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rubber seal around the side window is now complete. (Large preview)

    Next, let’s add a rubber seal around the front windshield. Draw a shape around the front window, turn off Borders, set Color to #000000 and apply Shadows:

    • Color: #FFFFFF
    • Alpha: 90%
    • X: 0; Y: 0; Blur: 3; Spread: 1
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front windshield’s rubber seal. (Large preview)

    Now, let’s add a trim on top of the rubber seal. To do that, duplicate the seal shape, turn off Fills and Shadows, turn on Borders, set Color to #E0E0E0, border position to Inside and Width to 1.5px. Double-click on the shape to enter vector editing mode and then select and move the points until you have something like on the image below. Be patient, it may require some time!

    Note: While usually I’d suggest avoiding half-pixels in your vector illustrations as much as possible, in some cases these might actually work well. After quite some trial and error while working on the trim on top of the windshield’s rubber seal, I’ve discovered that 1.5px gives the best visual results.

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

    Tip: Change point types as needed while working on this shape.

    At the end of this step, we need also to add a seal around the rear windshield. Draw a shape around it, turn off Border, set Fills to #000000 and apply Shadows with the same parameters like we did for the previous seals.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rear windshield’s rubber seal. (Large preview)

    8. Door Handle

    Pick up the Oval tool (O) and draw an ellipse. Set Border color to #949494, position to Center with a Width of 1px. For the Fills use a Linear Gradient:

    1. #787878
    2. #C9C9C9
    3. #A5A5A5

    And add Inner Shadows:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: 2; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw an ellipse for the door handle. (Large preview)

    Create a rectangle on the left and on the right side of the ellipse by using the Rectangle tool (R). Make the outer corners rounded by using the Radius property in the Inspector panel. Turn off Borders and set Fills to #333333.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the rectangles on the left and on the right side of the door ellipse. (Large preview)

    We will now use Inner Shadows and Shadows to make it look slightly raised.

    Select left side rectangle and add a light Inner Shadows effect with the following properties:

    • Color: #FFFFFF
    • Alpha: 20%
    • X: 2; Y: -2; Blur: 1; Spread: 0

    Then, apply a Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: 0; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Apply the effects to the left side rectangle. (Large preview)

    Next, select right side rectangle and apply Inner Shadows effect:

    • Color: #FFFFFF
    • Alpha: 20%
    • X:2; Y: -2; Blur: 1; Spread: 0

    Apply a Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: 0; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Apply the effects to the right side rectangle. Still not there but we’re getting closer! (Large preview)

    Let’s move on to handle. We will build our handle out of three shapes.

    First, create two rectangles by using the Rectangle tool (R) and make the sides rounded with a help of the Radius property set from the Inspector panel.

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

    Then, use the Vector tool (V) to draw a shape between the rectangles.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    With the Vector tool, draw a shape between these two rectangles. (Large preview)

    Now select the rectangles and the shape we have just created and perform a Union operation (from the top Sketch toolbar) to create one object. Name this object handleshape. Change the Color to #E3E3E3 and add an Inner Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: 0; Y: -2; Blur: 5; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the object and apply the styles. (Large preview)

    Let’s add a subtle shadow to the handle. Zoom in and draw a shape like on the image below. Don’t worry if the bottom part goes out of handle area, we will fix this later with a masking operation. Turn off Borders and set Fills to #3D3D3D.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add a shadow to the door handle. (Large preview)

    Let’s fit the shadow inside the handle. Select the handle and the shadow shape, and click on Mask in the top toolbar. The result of this masking operation will automatically be placed in a new group in the Layers panel list. Change the name of this group to handle.

    Tip: *Don’t forget to check if Sketch turned off Inner Shadows for the masking layer. If that’s the case, just turn them back on.*

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘handle’ group is complete. (Large preview)

    Now, let’s add a key lock to the door handle.

    Draw a small circle. Add a Center Border with a Width of 1px and the Color set to #000000. Change Fills to Linear Gradient, and adjust the gradient with the following parameters:

    1. #888888
    2. #DFDFDF
    3. #CACACA

    Apply a Shadow effect with the Color set to #000000 at 90% alpha, Blur to 3, the X and Y positions and Spread set to 0.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create a key lock. (Large preview)

    Create a keyhole by drawing a tiny black rectangle without Borders in the middle of the circle. Group both shapes (circle and rectangle) into a key-lock group.

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

    The only thing left to do is to create the handle’s shadow which should be placed inside the ellipse (see the next screenshot). Find the handleshape object in the Layers panel list, click on the caret in front of the layer name to reveal its content (the shapes), select the bridge between the rectangles and press Cmd + C to copy this shape.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Select the bridge between the rectangles then copy it. (Large preview)

    Select the ellipse that is below the handle, paste (Cmd + V) over the shape that we’ve just copied, set the Color to #505050, push it down 2px and apply a Gaussian Blur with an Amount of 2. Then select this shape along with the ellipse and group them together (Cmd + G).

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Paste, move, apply the styles, then group. (Large preview)

    Inside this group, select the ellipse, right-click on it and choose Mask from the menu, to make sure that the shadow will stay inside the ellipse.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The handle shadow is now complete. (Large preview)

    Select all the elements that we created in this step and place them into a group named door handle.

    9. Bumpers

    Let’s create the front bumper first. Switch to the Vector tool (V) and draw the shape. Change the Fills Opacity to 0%, make sure that Borders are turned off and apply light and dark Inner Shadows effect.

    First add a light Inner Shadows effect with the following properties:

    • Color: #FFFFFF
    • Alpha: 50%
    • X: 0; Y: 5; Blur: 6; Spread: 0

    Then, add a dark Inner Shadows effect:

    • Color: #000000
    • Alpha: 50%
    • X: -2; Y: -5; Blur: 6; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper. (Large preview)

    Do the same for the rear bumper, but instead use these parameters for the dark Inner Shadow effect:

    • Color: #000000
    • Alpha: 50%
    • X: 3; Y: -5; Blur: 6; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rear bumper. (Large preview)

    Name these shapes front bumper and rear bumper.

    Let’s move on to the next element on the case. Now we will create the decoration on the front bumper. Grab the Rounded Rectangle tool (U) and draw a rounded rectangle (174px by 14px). Make sure it is outside of the bodywork group and give it the name bumper deco base.

    Turn off Borders and then click on Fills, choose Linear Gradient, and add a gradient. Use #E4E4E4 with 100% alpha for the first color stop and #858585 with alpha 100% for the last color stop. Now, add another point with a click on the gradient axis in the color dialog, and move it to the exact middle by pressing 5 on the keyboard. Give it 100% alpha, and make sure its color is #E4E4E4. Add another one to the right, and also move it to the center. Change the color of this stop to #858585 with 100% alpha.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper deco element. (Large preview)

    Duplicate the shape (Cmd + D), change the name to front bumper deco shadow and using the Layers panel list, drag it inside the bodywork group just above the front bumper shape, and add two Shadows effects.

    Add the first Shadows effect with the following properties:

    • Color: #000000
    • Alpha: 80%
    • X: 0; Y: 2; Blur: 2; Spread: 2

    Then, add the second Shadows effect:

    • Color: #000000
    • Alpha: 80%
    • X: 0; Y: -2; Blur: 2; Spread: 1
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘front bumper deco’ shadow. (Large preview)

    Let’s add a rubber element in the middle of the bumper deco. Select the bumper deco base, duplicate it and give this shape the name of rubber. Change the Fills to #303030 Solid Color, and change the Height to the half size, then align it to the middle with bumper deco base, using the Inspector panel.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper ‘rubber’ shape. (Large preview)

    Add the following effects to the rubber shape.

    First, a light Inner Shadow:

    • Color: #FFFFFF
    • Alpha: 30%
    • X: 0; Y: 2; Blur: 2; Spread: 0

    Then, a dark Inner Shadow:

    • Color: #000000
    • Alpha: 100%
    • X: 0; Y: -4; Blur: 1; Spread: 0

    After that, a dark Shadow:

    • Color: #000000
    • Alpha: 100%
    • X: 0; Y: -1; Blur: 2; Spread: 0

    And lastly, a light Shadow:

    • Color: #FFFFFF
    • Alpha: 50%
    • X: 0; Y: 2; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Apply all the styles to the front bumper ‘rubber’ element. (Large preview)

    Finally, select the bumper deco base and the rubber shapes and perform a Mask operation so that none of the rubber shadows go outside of the bumper deco base. Name the resulting group front bumper deco.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The front bumper ‘rubber’ shape is now complete. (Large preview)

    Now, using the same method as explained above, create the rear bumper deco element.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    When it’s ready, the rear bumper deco should look like this. (Large preview)

    Switch to the Vector tool (V) and draw a basic shape for the rear bumper guard. Add a Linear Gradient with the following properties:

    1. #EEEEEE
    2. #C9C9C9
    3. #939393
    4. #6C6C6C
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the rear bumper guard. (Large preview)

    Duplicate this shape, place it behind (right-click on the shape and choose Move Backward from the context menu), apply #2D2D2D Solid Color, push it a couple of pixels to the right and resize the height down a bit using the resize handles. Name this shape rubber buffer. Add an Inner Shadows effect with the Color set to #FFFFFF at 30% alpha. Set Y and Blur to 2, and X and Spread to 0.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘rubber buffer’. (Large preview)

    Select again the shape on top, duplicate it one more time, and use the key to move it a few pixels to the left. Modify the Linear Gradient (delete the two middle points, change the colors of the top and bottom points to #8E8E8E and #DEDEDE then move the top point down a bit). Finally, apply a Gaussian Blur effect with the Amount of 0.6.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue working on the rear bumper guard. (Large preview)

    Select this shape and the shape below this one and perform a Mask operation. Name the resulting group bumper guard base, then select the resulting group and the rubber buffer shape and group them into a group rear bumper guard. Place this group just below the bodywork group in the Layers panel list.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The rear bumper guard — now finished. (Large preview)

    Using the Rectangle tool, create two rectangles like on the image below (use Radius in the Inspector panel to control the roundness of the points). Select both shapes and to create one object, from the top toolbar in Sketch perform a Union operation. Move this new object inside the rear bumper guard group, directly into the bumper guard base group on top. Change Color to #000000, turn off Borders and add Gaussian Blur with the Amount of 1.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the shadow from the bumper inside the bumper guard. (Large preview)

    Here’s a preview of what we’ve done so far.

    The Porsche 911 illustration &mdash; getting there bit by bit...
    The Porsche 911 — getting there bit by bit… (Large preview)

    10. Windshields

    Side Windows

    Remember those side window 1 and side window 2 copies that we have created at the beginning of the tutorial, in Part 1?

    Well it’s time to use them! Locate these copies in the Layers panel list and un-hide them. Make sure that Fills is turned off and add 5px Width Borders with a #72BD20 color, positioned Inside.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Time to un-hide the ‘side window 1’ and ‘side window 2’ copies! (Large preview)

    At the beginning, we will create the window frames using these shapes.

    So first, we will need to convert a shape border to a shape itself. We need to apply Inner Shadows to the window frames because there’s no option to apply Inner Shadows to Borders.

    To outline the borders, select both shapes and go to LayerConvert to Outlines (or press Alt + Cmd + O on the keyboard).

    Note: Converting the shapes to outlines has turned each shape into two separate combined shape layers. That’s because an outline stroke is a combined path that exists of two shapes:

    • one that determines the outer boundaries, and
    • the other determines the inner boundaries, creating the appearance of a stroke.
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The outline borders. (Large preview)

    Select and copy (Cmd + C) the inner shapes, then deselect the shapes by pressing Esc on the keyboard and finally paste (Cmd + V) them (please note that Sketch will place the copies on top), because we will use these shapes as windshields. Give them the names of side windshield 1 and side windshield 2 and hide them for now.

    Let’s continue with the window frames. Draw two shapes using the Vector tool (V), select those newly created shapes and the side window 1 shape and perform a Union operation to create one shape. Change Fills to #DCDCDC and add Inner Shadows with the Color set to #000000 with 50% Alpha and Blur set to 2.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘side window 1’. (Large preview)

    Apply the same styles — Fills and Inner Shadows — to the side window 2.

    Un-hide the side windshields and place them below the bodywork group in the Layers panel list.

    Tip: Since the windshields are basically transparent I suggest you to temporary add some background color to the artboard, so you can actually see what we are going to do. To do that, select the artboard and then turn on ‘Background color’ in the Inspector panel then set ‘Color’ to something like #434343.

    Now back to the side windshields: select the first one (the one on the left), turn off Borders and set Fills to Linear Gradient:

    1. Color: #FFFFFF, Alpha: 0%
    2. Color: #FFFFFF, Alpha: 22%
    3. Color: #FFFFFF, Alpha: 50%
    4. Color: #FFFFFF, Alpha: 27%
    5. Color: #FFFFFF, Alpha: 30%
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘side windshield 1’. (Large preview)

    Do the same for the other windshield.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘side windshield 2’. (Large preview)

    Tip: You can use the Sketch’s feature Copy Style from the first windshield (right-click and choose ‘Copy Style’) then paste the style to the second windshield (right-click then choose ‘Paste Style’). After that, you may only need to slightly move the points to adjust the gradient to match with previous one, since the shapes are not the same height.

    Front Windshield

    Switch to the Vector tool and draw a shape for the front windshield. Apply a Linear Gradient with the following parameters:

    1. Color: #F3F2F0, Alpha: 40%
    2. Color: #FFFFFF, Alpha: 50%
    3. Color: #F3F2F0, Alpha: 20%
    4. Color: #F3F2F0, Alpha: 10%

    Then add Inner Shadows with the Color set to #000000 with 10% Alpha. Set Y position to 2 and Blur to 8. Name it front windshield.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘front windshield’ element. (Large preview)

    Rear Windshield

    Draw a rear windshield with the Vector tool, and apply the same style (Linear Gradient and Inner Shadows) like for the front windshield.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘rear windshield’ element. (Large preview)

    Name this shape rear windshield, then select all the windshield shapes, group them into a windshields group and make sure that this group is below the bodywork group in the Layers panel list.

    Note: You can now turn off the Artboard’s background color in the Inspector panel.

    11. Headlight

    For the headlight, switch to the Vector tool and draw the shape that will be headlight glass. Use Solid Color #E4E4E4, turn off Borders and add Inner Shadows effect:

    • Color: #000000
    • Alpha: 10%
    • X: 5; Y: -2; Blur: 2; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Let’s create the headlight glass. (Large preview)

    Next, draw a black (#000000) shape over the headlight glass. Duplicate this shape (Cmd + D), push it 1px the the left and apply a Linear Gradient with the following parameters, from top to bottom:

    1. #EEEEEE
    2. #F5F5F5
    3. #828282
    4. #484848
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create the next part of the headlight. (Large preview)

    Select all the shapes and group them (Cmd + G) into s headlight group. Then we need to rotate it a bit (by 25 degrees) and place it above the bodywork group.

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

    12. Rear Engine Grille

    In this step we will create a grille over the rear engine lid. Once again, pick up the Vector tool (V) and draw a shape. Change Fills to #000000 and add Inner Shadows — for the Color use #FFFFFF with 80% Alpha, and set X position to -2.

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

    Duplicate this shape, move it to the left and down a bit, zoom in close enough, switch to vector editing mode and move the points so they touch the edge of the rear engine lid. Use the image below as a reference.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Start building the engine grille using the grille element. (Large preview)

    Repeat this eight more times to form a grille over the engine lid. Then draw a line using the Line tool (L). For the Color use #CCCCCC, set Width to 1px and choose Round cap for the Border ends. Apply black (#000000) Shadows effect with 100% Alpha and Blur of 2.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The engine grille is now complete. (Large preview)

    Select all of the grille layers, and place them inside the group rear engine grille.

    13. Side Mirror

    Let’s move on to the other details on the car. The side mirrors!

    Using the Vector tool, create a shape which will be the base for the side mirror, turn off Borders and use Linear Gradient for the Fills:

    1. #E5E5E5
    2. #D5D5D5
    3. #878787
    4. #6A6463

    Then add Inner Shadows:

    • Color: #000000
    • Alpha: 50%
    • X: 2; Y: -2; Blur: 6; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Shaping the ‘side mirror base’ shape. (Large preview)

    Name this shape side mirror base.

    Draw another shape, which will be mirror cover, once again turn off Borders and change Fills to Linear Gradient:

    1. #CCCACB
    2. #FEFEFE
    3. #A1A5A4
    4. #4A413F
    Screenshot of the steps described in the previous paragraph of the tutorial.
    The ‘mirror cover base’. (Large preview)

    Give this shape the name of mirror cover base. Duplicate the shape and push it 4px to the left using the key on the keyboard. Change Color to #C4C4C4 and add two Inner Shadows.

    For the first Inner Shadow use:

    • Color: #000000
    • Alpha: 60%
    • X: 5; Y: 0; Blur: 1; Spread: 0

    For the second Inner Shadow use following properties:

    • Color: #000000
    • Alpha: 50%
    • X: -4; Y: 5; Blur: 6; Spread: 0

    Then select both shapes and perform a Mask operation, so the top shape does not extend past the mirror cover (the bottom shape). Name the resulting group mirror cover.

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

    Select side mirror base and add one more Inner Shadows effect, to add shadow from the mirror cover. For the Color use #000000 with 50% Alpha, set X position to -1 and Blur to 1.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add a shadow from the mirror cover. (Large preview)

    We will finish this step by creating a shadow from the side mirror.

    Grab the Vector tool and draw a shape like on the image below. Place it below the side mirror base, push it a bit up so it is really behind it, and add a Linear Gradient for the Fills. For the top stop use #000000 with 40% Alpha and for the bottom stop also use #000000 but with 0% Alpha. Don’t forget to turn off Borders.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Create a shadow from the side mirror. (Large preview)

    Name this shape side mirror shadow, then select all shapes created in this step and group them into a side mirror group.

    14. Exhaust Pipe

    It’s time to create the exhaust pipe. First, find in the Layers panel list the floor layer, remember — the one that we’ve created at the beginning of the tutorial in Step 2 — and un-hide it. Switch to the Rectangle tool (R) and draw a rectangle with the Radius set to 2. This rectangle shape will represent the exhaust pipe.

    Turn off Borders and set Fills to a Linear Gradient:

    1. #E2E2E2
    2. #E3E3E3
    3. #A0A0A0
    4. #2C2C2C
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the exhaust pipe shape. (Large preview)

    Duplicate the rectangle, make it smaller in width, switch to the vector editing mode, select the points on the right side and set their Radius to 0, then modify the existing Linear Gradient to:

    1. #1E1E1E
    2. #3A3A3A
    3. #2A2A2A
    4. #111111
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw another part of the exhaust pipe. (Large preview)

    Select both rectangles, group them into an exhaust pipe group and place the group just above the rear bumper guard in the Layers panel list.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The exhaust pipe, now finished. (Large preview)

    15. Car Interior

    Select side window 1 and side window 2, duplicate them (Cmd + D), change Color to #000000 and turn off the Inner Shadows.

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

    Place these duplicates below the rear bumper guard in the Layers panel list, and then, using the arrow keys on the keyboard, shift them 5px down and 2px to the right.

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

    Draw a shape, which will represent the visible part of the car’s dashboard, turn off Borders and set the Fills to #2A2A2A.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the visible part of the dashboard. (Large preview)

    Next, let’s create the steering wheel.

    Create a rectangle using the Rounded Rectangle tool (U), turn off Borders and change Fills to horizontal Linear Gradient with the following parameters:

    1. #000000
    2. #676767
    3. #292929
    4. #090909

    Then we need to rotate the rectangle -24 degrees and move it to the left a bit.

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

    Now let’s continue with other details of the car interior. Select the Vector tool and create a shape like on the image below. Turn off Borders, set Color to #000000, and apply Inner Shadows effect:

    • Color: #FFFFFF
    • Alpha: 30%
    • X: -12; Y: -6; Blur: 8; Spread: 0
    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue adding elements to the car interior. (Large preview)

    Use the Oval tool (O) to draw a small ellipse. For the Color use #717171 and turn the Borders off.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add another element to the car interior. (Large preview)

    Now let’s create the visible part of the driver’s seat. Create a shape with the Vector tool. Turn off Borders and use a Linear Gradient; for the top color stop use color #6D6D6D and for the bottom #171717. And add an Inner Shadows effect — Color is #000000 with 50% Alpha, X position is 2 and Blur is 7.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Draw the driver’s seat. (Large preview)

    Duplicate this shape, push it 5px to the right and 1px up by using the arrow keys. Then modify the existing Linear Gradient — change the bottom color stop to #000000. And modify the Inner Shadows effect — change the Color to #FFFFFF with 10% Alpha; set X and Y positions to 5, and Blur also to 5.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Continue working on refining the seat’s details. (Large preview)

    Now let’s add stitches to the seat.

    Duplicate this shape, push it 5px to the right and 3px down. Then, turn off Fills and Inner Shadows, bring back Borders and for the Color choose Linear Gradient — for the top color stop use #696969 and for the bottom #000000. Add Shadow effect — for the Color use #000000 with 50% Alpha and set Blur to 2. Then select this shape and the layer below it and perform a Mask operation, so the stitches do not go outside the seat’s boundaries.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    Add stitches to the driver’s seat. (Large preview)

    Almost ready with the car interior!

    Next, select all layers and groups that we’ve created in this step and that are above the car body and position them just above side window 1 copy and side window 2 copy in the Layers panel list. Add to the selection those two shapes as well (side window 1 copy and side window 2 copy) and create a group (Cmd + G) named interior.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The car interior is now complete. (Large preview)

    Let’s take a look at the big picture again.

    Final image 2/3: Let’s take a look at our Porsche 911 car &mdash; we’re more than half-way there!
    Final image 2/3: Let’s take a look at our Porsche 911 car — we’re more than half-way there! (Large preview)

    It’s not bad, right?

    But, before we conclude this part of the tutorial, let’s add one more small detail to the car body, so pick up the Line tool (L) and draw a line. For the Color use #E5E5E5, set Width to 2px and choose Round cap for the Border ends. Then apply Shadows — set Color to #000000 at 80% Alpha, Y position to 2 and Blur to 3. Finally, place this line inside the bodywork group.

    Screenshot of the steps described in the previous paragraph of the tutorial.
    The car’s body is now finished — one more final detail added. (Large preview)

    Conclusion

    The body of the car is now ready, as well as the windows, bumpers, headlights and taillights, and the interior — dashboard, the steering wheel, and the seat. In the next (and final) part of the tutorial, we’ll create the wheels (rims and tires), and we’ll add all the final touches, including the racing decals on the car’s body.

    Smashing Editorial
    (mb, ra, yk, il)

    Source link

    web design

    Create A Responsive Dashboard With Angular Material And ng2-Charts — Smashing Magazine

    07/27/2020

    About The Author

    Zara Cooper is a software developer and technical writer who enjoys sharing what she learns as a developer with others. When she’s got time to spare, she enjoys …
    More about
    Zara

    Schematics in Angular 9 are code generators that can create components and patterns in projects using predetermined templates and layouts. In this article, Zara Cooper explains how to take advantage of schematics in Angular Material and ng2-charts to substantially reduce the time and work that goes into building a dashboard.

    Creating a dashboard from scratch is often pretty complicated. You have to create tools to collect data on items of interest. Once collected this data has to be presented in an easy to understand and meaningful way to your users. It involves intricate planning of what data to include and how to display it effectively. Once you have a plan, implementing the design is a massive task especially since it involves building multiple components.

    With Angular Material and ng2-charts, you can take advantage of schematics to cut down the effort and time you may spend building a dashboard. Angular Material ships with a number of schematics that you could use to generate a dashboard. Similarly, ng2-charts provides schematics for generating multiple chart components. In this article, I’ll illustrate how to use both ng2-charts and Angular Material to set up a dashboard fairly quickly.

    An Example

    To illustrate how to build a dashboard, we’ll take the example of an online store selling leather goods like bags, wallets, key holders, and so on. The store owner would like to track information such as where customers come from to their online store, how their products sell, how traffic sources relate to sales, among other things.

    We’ll build a dashboard to display this information and help the store owner analyze it. The dashboard will contain four small summary cards, four different kinds of charts, and a table listing most recent orders made. The four summary cards will display information such as total revenue from sales, average order value, the total number of orders, and number of returning customers. The charts will display the number of units sold for each product, sales by traffic source, online store sessions over time, and sales for the week.

    Prerequisites

    To follow along, you’ll need to have Angular CLI installed. If you do not have it installed, you can find out how to get it at cli.angular.io. If you’re not starting from a pre-existing Angular project, you need to generate one by running ng new <your project name>. For instance, to create an admin panel for the aforementioned store, we’ll run:

    ng new store-admin-panel

    Your project also needs to have routes configured for it. If you’re starting from a new app, select yes when prompted on whether to add an Angular Routing module during your project setup above.

    Add Angular Material And Ng2-Charts To Your Project

    Angular Material ships with various schematics for generating a variety of useful components like address books, trees, tables, navigation, and so on. To add Angular Material to your project, run:

    ng add @angular/material

    Pick a theme from the options provided in subsequent prompts. Next, you’ll be prompted to choose whether to add Angular Material typography styles and browser animations. You do not need these and could just respond no.

    Next, you’ll need to install ng2-charts. ng2-charts requires charts.js as a dependency. To install ng2-charts run:

    npm install ng2-charts --save

    Then install charts.js:

    npm install chart.js --save

    To access the charts, add the ChartsModule to the AppModule’s imports.

    import { ChartsModule } from 'ng2-charts';
    
    @NgModule({
      imports: [
       …
       ChartsModule,
       …
    ]
    })

    Lastly, install ng2-charts schematics as a dev dependency because they do not ship with ng2-charts by default.

    npm install --save-dev ng2-charts-schematics

    Generating A Navigation Component

    First off, we’ll need to add a navigation component to help users maneuver through the app comfortably. The navigation should contain links to the dashboard and other pages that will be part of the admin panel. Angular material provides a schematic that generates a navigation component. We’ll name this component nav. Adding a side nav to the application is accomplished by running:

    ng generate @angular/material:navigation nav

    To link other routes in the navigation, use the routerLink directive and change the page name in the toolbar depending on what route a user is on.

    // nav.component.ts
    ...
    menuItems = ['dashboard', ’sales', 'orders', 'customers', 'products'];
    <!--nav.component.html-->
    ...
    <mat-nav-list>
         <a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a>
    ...

    To see this component, add it to app.component.html.

    <!--app.component.html-->
    <app-nav></app-nav>

    This is what the NavComponent looks like.

    Navigation component
    Navigation component (Large preview)

    Since the nav will be displayed alongside other components, adding a router-outlet to it would help switch between the other different components. In the nav.component.html template, just after the closing </mat-toolbar>, replace the <!-- Add Content Here --> comment with <router-outlet></router-outlet>.

    <!--nav.component.html-->
    <mat-sidenav-container>
       ...
       <mat-sidenav-content>
         <mat-toolbar>
           ...
         </mat-toolbar>
         <router-outlet></router-outlet>
       </mat-sidenav-content>
     </mat-sidenav-container>

    In the screenshots that follow in this article, this nav component will be omitted to better highlight the dashboard we’ll be generating for the sake of the tutorial. If you’re following along while building this dashboard, the nav will still appear as pictured above in your browser with the dashboard within it.

    Generate The Dashboard

    The most important part of the dashboard is its layout. It needs to hold all the components mentioned earlier and be responsive when displayed on different devices. To generate the dashboard layout, you’ll need to run the @angular/material:dashboard schematic. It will generate a responsive dashboard component. Pass the preferred name for your dashboard to the schematic. In this instance, let’s name it dash.

    ng generate @angular/material:dashboard dash

    To view the newly generated dashboard within the nav component, add a route for it to the router.

    // app-routing.module.ts
    import { DashComponent } from './dash/dash.component';
    
    const routes: Routes = [{ path: 'dashboard', component: DashComponent }];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })

    Once done, to see the results, run npm start and head on over to localhost:4200/dashboard. You should see this:

    generated dashboard component
    Generated dashboard component (Large preview)

    The schematic generates four cards in the template and displays them in a responsive grid. The Angular Material CDK uses the Layout package to style this responsive card grid. The BreakpointObserver utility of the Layout package assesses media queries and makes UI changes based on them. There are various breakpoints available but within the generated component, only two categories are catered for. The Breakpoints.Handset and other queries that do not match it. The Layout package specifies 14 breakpoint states that you can use to customize the responsiveness of your dashboard.

    // dashboard.component.js
    ...
    cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
        map(({ matches }) => {
          if (matches) {
            ...
          }
          ...
        })
      );

    Going back to the dashboard, since four summary cards, four charts, and a table will be on the dashboard, we need nine cards in total. Breakpoints.Handset and Breakpoints.Tablet matches will display in a one-column grid where:

    • The four summary cards will span one row.
    • The charts will span two rows.
    • The table will span four rows.

    Non-Breakpoints.Handset and non-Breakpoints.Tablet matches will display in four columns where:

    • The four summary cards will span one row and one column.
    • The charts will span two rows and two columns.
    • The table will span four rows and four columns.

    It should look something like the screenshot below in non-Breakpoints.Handset and non-Breakpoints.Tablet matches. On Breakpoints.Handset and Breakpoints.Tablet matches, everything will just display in one column.

    dashboard component with additional cards
    Dashboard component with additional cards (Large preview)

    Create A Card Component

    In the dashboard component, all the cards are generated through iteration. To prevent repetition, when adding all the new components, we’ll create a reusable card component. The card component will accept a title as input and use ng-content to dynamically add the rest of the content. To create the card component, run:

    ng g c card -m app --style css

    From the dashboard component template, we’ll just take the markup enclosed within the <mat-card> tag and place it In the card template:

    <!--card.component.html-->
    <mat-card class="dashboard-card">
       <mat-card-header>
           <mat-card-title>
               {{title}}
               <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
                   <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #menu="matMenu" xPosition="before">
                   <button mat-menu-item>Expand</button>
                   <button mat-menu-item>Remove</button>
               </mat-menu>
           </mat-card-title>
       </mat-card-header>
       <mat-card-content class="dashboard-card-content">
           <ng-content></ng-content>
       </mat-card-content>
    </mat-card>

    To add the title as input to the card:

    // card.component.ts
    import { Component, Input } from '@angular/core';
    
    ...
    
    export class CardComponent{
     @Input() title: string;
    
    
    ...
    }

    To style the card:

    /*card.component.css*/
    .more-button {
       position: absolute;
       top: 5px;
       right: 10px;
    }
    
    .dashboard-card {
       position: absolute;
       top: 15px;
       left: 15px;
       right: 15px;
       bottom: 15px;
    }
    
    
    .dashboard-card-content {
       text-align: center;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       max-height: 100%;
       justify-content: center;
       align-items: stretch;
    }
    
    mat-card {
       display: flex;
       flex-direction: column;
    }

    Adding Cards To The Dashboard

    Since the dashboard elements will be added individually and not through iteration, the dashboard component needs to be modified to account for this. In dashboard.component.ts, remove the cards property and replace it with a cardLayout property instead. The cardLayout variable will define the number of columns for the material grid list and how many rows and columns each of the dashboard cards will span. Breakpoints.Handset and Breakpoints.Tablet query matches will display in 1 column and those that do not match will display in 4 columns.

    // dashboard.component.js
    ...
    
    
    cardLayout = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
       map(({ matches }) => {
         if (matches) {
           return {
             columns: 1,
             miniCard: { cols: 1, rows: 1 },
             chart: { cols: 1, rows: 2 },
             table: { cols: 1, rows: 4 },
           };
         }
    
        return {
           columns: 4,
           miniCard: { cols: 1, rows: 1 },
           chart: { cols: 2, rows: 2 },
           table: { cols: 4, rows: 4 },
         };
       })
     );
    
    ...

    In the dash.component.html template, replace the colspan and rowspan values of mat-grid-tile elements and the cols property of the mat-grid-list element.

    <!--dash.component.html-->
    <div class="grid-container">
     <h1 class="mat-h1">Dashboard</h1>
     <mat-grid-list cols="{{ ( cardLayout | async )?.columns }}" rowHeight="200px">
       <!--Mini Cards-->
       <mat-grid-tile *ngFor="let i of [1, 2, 3, 4]" [colspan]="( cardLayout | async )?.miniCard.cols"
         [rowspan]="( cardLayout | async )?.miniCard.rows">
         <app-card title="Card {{i}}"><div>Mini Card Content Here</div></app-card>
       </mat-grid-tile>
       <!--Charts-->
       <mat-grid-tile *ngFor="let i of [5, 6, 7, 8]" [colspan]="( cardLayout | async )?.chart.cols"
         [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Card {{i}}"><div>Chart Content Here</div></app-card>
       </mat-grid-tile>
       <!--Table-->
       <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows">
         <app-card title="Card 9"><div>Table Content Here</div></app-card>
       </mat-grid-tile>
     </mat-grid-list>
    </div>

    The dashboard will end up looking exactly like the most recent screenshot linked above.

    Generating The Charts

    The four charts that we need for the dashboard are:

    • A radar chart of products by unit sold.
    • A pie chart of sales by traffic source.
    • A bar chart of online store sessions.
    • A line chart of sales across the year.

    Similar to creating the dashboard, generating chart components involves running a schematic. Using the ng2-charts schematics, generate the four different charts. We’ll place them in a folder called charts. Run ng generate ng2-charts-schematics:<chart type> <chart name>.

    ng generate ng2-charts-schematics:radar charts/product-sales-chart
    ng generate ng2-charts-schematics:pie charts/sales-traffic-chart
    ng generate ng2-charts-schematics:line charts/annual-sales-chart 
    ng generate ng2-charts-schematics:bar charts/store-sessions-chart

    After running these commands, all four chart components are generated and are populated with sample data ready for display. Depending on what data you’d like to show, pick charts that most suit your data visualization needs. For each of the charts generated above, add the chartContainer class to the divs that enclose the canvas element in the chart templates.

    <div class="chartContainer">
      <canvas baseChart width="400" height="400">
        ...

    Next, add this styling to styles.css so that they could be accessible to all the chart components.

    /*styles.css*/
    ...
    
    .chartContainer canvas {
        max-height: 250px;
        width: auto;
    }
    
    .chartContainer{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    Adding Data To The Charts

    The generated chart components come with sample data already plugged in. If you have pre-existing services that provide your own data, you can add this data from them to the chart components. The charts take labels for the x-axis, data or data sets, a chart type, colors, a legend as well as other customization options. To provide the data and labels to the charts, create a service that will fetch data from a source of your choice and return it in a form that the charts accept. For instance, the AnnualSalesChartComponent receives its dataset and labels from the SalesService’s getSalesByMonth method which returns an array of sales for each month for the current year. You can find this service here and data it returns here. Inject the service as a private property to the AnnualSalesChartComponent constructor. Call the method that returns the required chart data from the service within the ngOnInit lifecycle hook.

    // annual-sales-chart.component.ts
    import { SalesService } from ’src/app/sales/sales.service';
    
    
    ...
    
    
    export class AnnualSalesChartComponent implements OnInit {
      public salesChartData: ChartDataSets[] = [
       { data: [], label: 'Total Sales' },
     ];
    
     public salesChartLabels: Label[] = [];
      ...
    
      constructor(private salesService: SalesService) { }
      ngOnInit() {
       this.salesService.getSalesByMonth().subscribe({
         next: salesItems => {
           salesItems.forEach(li => {
             this.salesChartData[0].data.push(li.revenue);
             this.salesChartLabels.push(li.month);
           });
         },
        ...
       });
     }
    }

    Adding Charts To The Dashboard

    The next step involves adding the charts to the dashboard, in dash.component.html. Here’s what that looks like:

    <!--dash.component.html-->
    ...
    
    <!--Charts-->
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Monthly Revenue">
           <app-annual-sale-chart></app-annual-sale-chart>
       </app-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Product Sales">
           <app-product-sales-chart></app-product-sales-chart>
       </app-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Sales by Traffic Source">
           <app-sales-traffic-chart></app-sales-traffic-chart>
       </app-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Online Store Sessions by Traffic Source">
           <app-store-sessions-chart></app-store-sessions-chart>
       </app-card>
    </mat-grid-tile>
    
    ...

    This is what the resultant responsive dashboard looks like.

    dashboard with charts
    Dashboard with charts (Large preview)

    Generating A Table

    We’ll add an orders table to give the shop owner an overview of the most recent orders placed and their status. To generate the orders table component, run the schematic:

    ng generate @angular/material:table orders-table

    This will generate a table component that will look like this.

    table generated by Angular Material schematic
    Table generated by Angular Material schematic (Large preview)

    Tables with many columns may be difficult to make responsive for handset and tablet views. When adding the table to a card, make it horizontally scrollable so that all the data can be viewed properly and is not obstructed. You can do this by adding the styling below to your table component:

    <!--table.component.html-->
    <div class="mat-elevation-z8 small-table">
     <table mat-table class="full-width-table" matSort aria-label="Elements">
       ...
    /*table.component.css*/
    
    ...
    
    .small-table{
      overflow-x: scroll !important;
    }

    To add the table to the dash component:

    <!-- dashboard.component.html>
    ...
      <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows">
         <app-card title="Latest Orders">
           <app-orders-table></app-orders-table>
         </app-card>
      </mat-grid-tile>
    ...

    Adding Data To The Table

    Like with charts, you can add data to the table in the ngOnInit method from a service. Additionally, you will need to modify your table’s generated data source to consume data from the service. To start off, inject the service in the table’s class constructor. Let’s take the example of a table listing the latest orders for this dashboard. To get data for the table, let’s inject the OrderService in the OrdersTableComponent constructor, change the MatTable type assertion of the table view child, and amend the list of displayed columns to reflect an order interface. If you’re interested in the data being added to the table, you can find it here. The last thing involves getting the total length of the data items available to be used to set the total in the table’s <mat-paginator>.

    // orders-table.component.ts
    import { OrderService } from '../orders.service';
    import { Order } from '../order';
    ...
    export class OrdersTableComponent implements AfterViewInit, OnInit {
    ...
     @ViewChild(MatTable) table: MatTable;
     dataLength: number;
     
     displayedColumns = [
       "id",
       "date",
       "name",
       "status",
       "orderTotal",
       "paymentMode",
     ];
    ...
    constructor(private orderService: OrderService){}
    
    ngOnInit() {
     this.datasource = new OrdersTableDataSource(this.orderService);
     this.orderService.getOrderCount().subscribe({
       next: orderCount => {
        this.dataLength = orderCount;
       },
       ...
     });
    }
    ...
    }

    Next, we’ll need to modify the OrdersTableDataSource class to accept the OrderService as a parameter in its constructor. We’ll have to modify its connect and destroy methods as well. The connect method connects the data source to the table and updates the table when new data items are emitted from the stream it returns, in this case, an orders array observable. The dataMutations constant combines the first data load, pagination, and sorting events into one stream for the table to consume. Pagination and sorting are handled by the OrderService server-side. So we need to pass the offset and page size from paginator and the active sort field and sort direction of the sort property to the getOrders method of the OrderService. The disconnect method should be used to close any connections made and release resources held up in the connect method.

    // orders-table.datasource.ts
    ...
    export class OrdersTableDataSource extends DataSource<Order> {
     paginator: MatPaginator;
     sort: MatSort;
    
     constructor(private orderService: OrderService) {
       super();
     }
    
     connect(): Observable<Order[]> {
       const dataMutations = [
         of('Initial load'),
         this.paginator.page,
         this.sort.sortChange
       ];
    
       return merge(...dataMutations).pipe(mergeMap(() => {
         return this.orderService.getOrders(
           this.paginator.pageIndex * this.paginator.pageSize,
           this.paginator.pageSize,
           this.sort.active,
           this.sort.direction
         );
       }));
     }
    
     disconnect() {} 
    }

    In the orders table template, insert the new columns and bind the length property of <mat-paginator> to the dataLength property. For the status column, use a <mat-chip> element for better visualization of the order status. To have access to <mat-chip>, add the MatChipsModule as an import to AppModule.

    <!-- orders-table.component.html -->
    <div class="mat-elevation-z8">
     <table mat-table class="full-width-table" matSort aria-label="Elements">
       <!-- Id Column -->
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
         <td mat-cell *matCellDef="let row">{{row.id}}</td>
       </ng-container>
    
       <!-- Date Column -->
       <ng-container matColumnDef="date">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
         <td mat-cell *matCellDef="let row">{{row.date | date }}</td>
       </ng-container>
    
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
         <td mat-cell *matCellDef="let row">{{row.name}}</td>
       </ng-container>
    
       <!-- Order Total Column -->
       <ng-container matColumnDef="orderTotal">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Order Total</th>
         <td mat-cell *matCellDef="let row">{{row.orderTotal | currency}}</td>
       </ng-container>
    
       <!-- Payment Mode Column -->
       <ng-container matColumnDef="paymentMode">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Mode</th>
         <td mat-cell *matCellDef="let row">{{row.paymentMode}}</td>
       </ng-container>
    
       <!-- Status Column -->
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
         <td mat-cell *matCellDef="let row">
           <mat-chip-list>
             <mat-chip color="{{ row.status == 'delivered' ? 'primary' : ( row.status == ’shipped' ? 'accent' : 'warn' ) }}" selected>
               {{row.status}}
             </mat-chip>
           </mat-chip-list>
         </td>
       </ng-container>
    
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
    
     <mat-paginator #paginator [length]="dataLength" [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10, 15, 20]">
     </mat-paginator>
    </div>

    Once data has been added to the table, this is what the dashboard will look like:

    dashboard with charts and table
    Dashboard with charts and table (Large preview)

    Creating A Mini Card Component

    All that’s left to complete the dashboard is to populate the four small cards that sit at the top. Having smaller summary cards as part of the dashboard makes it easy to highlight brief pieces of information that do not need whole charts or tables. In this example, the four mini cards will display total sales, average order value, the total number of orders, and the number of returning customers that visited the store for the day. This is just an example. These mini cards cannot be generated like with the navigation, dashboard layout, charts, and the table. They have no schematics. Below we’ll briefly go through how to create them. Although we’re going to add data specific to the example, you can add whatever you want to them or decide to do away with them altogether. To start off, generate the mini-card component, run:

    ng g c mini-card -m app --style css

    You can find the template for the component linked here and its styling here. This component has eight input properties that you can find out how to add here. To get data to the mini card components, inject the service that provides data to them in the DashComponent constructor. Assign data received from the service to a property of the DashComponent. In this instance, we’ll get data from the StoreSummaryService and assign it to the miniCardData property. Here’s how:

    // dash.component.ts
    export class DashComponent implements OnInit{
    ...
     miniCardData: StoreSummary[];
    
     constructor(private breakpointObserver: BreakpointObserver, private summaryService: StoreSummaryService) {}
    
     ngOnInit() {
       this.summaryService.getStoreSummary().subscribe({
         next: summaryData => {
           this.miniCardData = summaryData;
         }
       });
     } 
    }

    To add the mini-cards to the dash component and have them populated with data from the service:

    <!--dash.component.html-->
    ...
    
    <!--Mini Cards-->
       <mat-grid-tile *ngFor="let mc of miniCardData" [colspan]="( cardLayout | async )?.miniCard.cols"
         [rowspan]="( cardLayout | async )?.miniCard.rows">
         <app-mini-card Create A Responsive Dashboard With Angular Material And ng2-Charts — Smashing Magazine="mc.title" [textValue]="mc.textValue" [value]="mc.value" [color]="mc.color" [percentValue]="mc.percentValue"></app-mini-card>
       </mat-grid-tile>
    
    ...

    The screenshot below is what the dashboard will look like with the mini cards populated.

    dashboard with charts, tables, and mini-cards
    Dashboard with charts, tables, and mini-cards. (Large preview)

    Putting All Together

    In the end, the dashboard component template should contain:

    <!-- dashboard.component.html -->
    <div class="grid-container">
     <h1 class="mat-h1">Dashboard</h1>
     <mat-grid-list cols="{{ ( cardLayout | async )?.columns }}" rowHeight="200px">
       <!--Mini Cards-->
       <mat-grid-tile *ngFor="let mc of miniCardData" [colspan]="( cardLayout | async )?.miniCard.cols"
         [rowspan]="( cardLayout | async )?.miniCard.rows">
         <app-mini-card [icon]="mc.icon" Create A Responsive Dashboard With Angular Material And ng2-Charts — Smashing Magazine="mc.title" [value]="mc.value" [color]="mc.color" [isIncrease]="mc.isIncrease" duration="since last month" [percentValue]="mc.percentValue" [isCurrency]="mc. isCurrency"></app-mini-card>
       </mat-grid-tile>
       <!--Charts-->
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Monthly Revenue">
           <app-annual-sale-chart></app-annual-sale-chart>
         </app-card>
       </mat-grid-tile>
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Product Sales">
           <app-product-sales-chart></app-product-sales-chart>
         </app-card>
       </mat-grid-tile>
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Sales by Traffic Source">
           <app-sales-traffic-chart></app-sales-traffic-chart>
         </app-card>
       </mat-grid-tile>
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Online Store Sessions by Traffic Source">
           <app-store-sessions-chart></app-store-sessions-chart>
         </app-card>
       </mat-grid-tile>
       <!--Table-->
       <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows">
         <app-card title="Latest Orders">
           <app-orders-table></app-orders-table>
         </app-card>
       </mat-grid-tile>
     </mat-grid-list>
    </div>

    Here’s what the resultant dashboard contains.

    completed dashboard
    Completed dashboard (Large preview)

    Conclusion

    Creating dashboards involves a fair amount of work and planning. A way to make building them faster is to use the various schematics provided by Angular Material and ng2-charts. With these schematics, running a command will generate a wholly complete component and can result in having a dashboard up and running fairly quickly. This leaves you a lot more time to focus on creating data services and adding them to your dashboard components.

    If you want to learn more about some of the schematics provided by Angular Material, visit material.angular.io, and for those provided by ng2-charts, visit their site linked here.

    Smashing Editorial
    (ra, yk, il)

    Source link

    web design

    Create A Responsive Dashboard With Angular Material And ng2-Charts — Smashing Magazine

    07/27/2020

    About The Author

    Zara Cooper is a software developer and technical writer who enjoys sharing what she learns as a developer with others. When she’s got time to spare, she enjoys …
    More about
    Zara

    Schematics in Angular 9 are code generators that can create components and patterns in projects using predetermined templates and layouts. In this article, Zara Cooper explains how to take advantage of schematics in Angular Material and ng2-charts to substantially reduce the time and work that goes into building a dashboard.

    Creating a dashboard from scratch is often pretty complicated. You have to create tools to collect data on items of interest. Once collected this data has to be presented in an easy to understand and meaningful way to your users. It involves intricate planning of what data to include and how to display it effectively. Once you have a plan, implementing the design is a massive task especially since it involves building multiple components.

    With Angular Material and ng2-charts, you can take advantage of schematics to cut down the effort and time you may spend building a dashboard. Angular Material ships with a number of schematics that you could use to generate a dashboard. Similarly, ng2-charts provides schematics for generating multiple chart components. In this article, I’ll illustrate how to use both ng2-charts and Angular Material to set up a dashboard fairly quickly.

    An Example

    To illustrate how to build a dashboard, we’ll take the example of an online store selling leather goods like bags, wallets, key holders, and so on. The store owner would like to track information such as where customers come from to their online store, how their products sell, how traffic sources relate to sales, among other things.

    We’ll build a dashboard to display this information and help the store owner analyze it. The dashboard will contain four small summary cards, four different kinds of charts, and a table listing most recent orders made. The four summary cards will display information such as total revenue from sales, average order value, the total number of orders, and number of returning customers. The charts will display the number of units sold for each product, sales by traffic source, online store sessions over time, and sales for the week.

    Prerequisites

    To follow along, you’ll need to have Angular CLI installed. If you do not have it installed, you can find out how to get it at cli.angular.io. If you’re not starting from a pre-existing Angular project, you need to generate one by running ng new <your project name>. For instance, to create an admin panel for the aforementioned store, we’ll run:

    ng new store-admin-panel

    Your project also needs to have routes configured for it. If you’re starting from a new app, select yes when prompted on whether to add an Angular Routing module during your project setup above.

    Add Angular Material And Ng2-Charts To Your Project

    Angular Material ships with various schematics for generating a variety of useful components like address books, trees, tables, navigation, and so on. To add Angular Material to your project, run:

    ng add @angular/material

    Pick a theme from the options provided in subsequent prompts. Next, you’ll be prompted to choose whether to add Angular Material typography styles and browser animations. You do not need these and could just respond no.

    Next, you’ll need to install ng2-charts. ng2-charts requires charts.js as a dependency. To install ng2-charts run:

    npm install ng2-charts --save

    Then install charts.js:

    npm install chart.js --save

    To access the charts, add the ChartsModule to the AppModule’s imports.

    import { ChartsModule } from 'ng2-charts';
    
    @NgModule({
      imports: [
       …
       ChartsModule,
       …
    ]
    })

    Lastly, install ng2-charts schematics as a dev dependency because they do not ship with ng2-charts by default.

    npm install --save-dev ng2-charts-schematics

    Generating A Navigation Component

    First off, we’ll need to add a navigation component to help users maneuver through the app comfortably. The navigation should contain links to the dashboard and other pages that will be part of the admin panel. Angular material provides a schematic that generates a navigation component. We’ll name this component nav. Adding a side nav to the application is accomplished by running:

    ng generate @angular/material:navigation nav

    To link other routes in the navigation, use the routerLink directive and change the page name in the toolbar depending on what route a user is on.

    // nav.component.ts
    ...
    menuItems = ['dashboard', ’sales', 'orders', 'customers', 'products'];
    <!--nav.component.html-->
    ...
    <mat-nav-list>
         <a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a>
    ...

    To see this component, add it to app.component.html.

    <!--app.component.html-->
    <app-nav></app-nav>

    This is what the NavComponent looks like.

    Navigation component
    Navigation component (Large preview)

    Since the nav will be displayed alongside other components, adding a router-outlet to it would help switch between the other different components. In the nav.component.html template, just after the closing </mat-toolbar>, replace the <!-- Add Content Here --> comment with <router-outlet></router-outlet>.

    <!--nav.component.html-->
    <mat-sidenav-container>
       ...
       <mat-sidenav-content>
         <mat-toolbar>
           ...
         </mat-toolbar>
         <router-outlet></router-outlet>
       </mat-sidenav-content>
     </mat-sidenav-container>

    In the screenshots that follow in this article, this nav component will be omitted to better highlight the dashboard we’ll be generating for the sake of the tutorial. If you’re following along while building this dashboard, the nav will still appear as pictured above in your browser with the dashboard within it.

    Generate The Dashboard

    The most important part of the dashboard is its layout. It needs to hold all the components mentioned earlier and be responsive when displayed on different devices. To generate the dashboard layout, you’ll need to run the @angular/material:dashboard schematic. It will generate a responsive dashboard component. Pass the preferred name for your dashboard to the schematic. In this instance, let’s name it dash.

    ng generate @angular/material:dashboard dash

    To view the newly generated dashboard within the nav component, add a route for it to the router.

    // app-routing.module.ts
    import { DashComponent } from './dash/dash.component';
    
    const routes: Routes = [{ path: 'dashboard', component: DashComponent }];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })

    Once done, to see the results, run npm start and head on over to localhost:4200/dashboard. You should see this:

    generated dashboard component
    Generated dashboard component (Large preview)

    The schematic generates four cards in the template and displays them in a responsive grid. The Angular Material CDK uses the Layout package to style this responsive card grid. The BreakpointObserver utility of the Layout package assesses media queries and makes UI changes based on them. There are various breakpoints available but within the generated component, only two categories are catered for. The Breakpoints.Handset and other queries that do not match it. The Layout package specifies 14 breakpoint states that you can use to customize the responsiveness of your dashboard.

    // dashboard.component.js
    ...
    cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
        map(({ matches }) => {
          if (matches) {
            ...
          }
          ...
        })
      );

    Going back to the dashboard, since four summary cards, four charts, and a table will be on the dashboard, we need nine cards in total. Breakpoints.Handset and Breakpoints.Tablet matches will display in a one-column grid where:

    • The four summary cards will span one row.
    • The charts will span two rows.
    • The table will span four rows.

    Non-Breakpoints.Handset and non-Breakpoints.Tablet matches will display in four columns where:

    • The four summary cards will span one row and one column.
    • The charts will span two rows and two columns.
    • The table will span four rows and four columns.

    It should look something like the screenshot below in non-Breakpoints.Handset and non-Breakpoints.Tablet matches. On Breakpoints.Handset and Breakpoints.Tablet matches, everything will just display in one column.

    dashboard component with additional cards
    Dashboard component with additional cards (Large preview)

    Create A Card Component

    In the dashboard component, all the cards are generated through iteration. To prevent repetition, when adding all the new components, we’ll create a reusable card component. The card component will accept a title as input and use ng-content to dynamically add the rest of the content. To create the card component, run:

    ng g c card -m app --style css

    From the dashboard component template, we’ll just take the markup enclosed within the <mat-card> tag and place it In the card template:

    <!--card.component.html-->
    <mat-card class="dashboard-card">
       <mat-card-header>
           <mat-card-title>
               {{title}}
               <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
                   <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #menu="matMenu" xPosition="before">
                   <button mat-menu-item>Expand</button>
                   <button mat-menu-item>Remove</button>
               </mat-menu>
           </mat-card-title>
       </mat-card-header>
       <mat-card-content class="dashboard-card-content">
           <ng-content></ng-content>
       </mat-card-content>
    </mat-card>

    To add the title as input to the card:

    // card.component.ts
    import { Component, Input } from '@angular/core';
    
    ...
    
    export class CardComponent{
     @Input() title: string;
    
    
    ...
    }

    To style the card:

    /*card.component.css*/
    .more-button {
       position: absolute;
       top: 5px;
       right: 10px;
    }
    
    .dashboard-card {
       position: absolute;
       top: 15px;
       left: 15px;
       right: 15px;
       bottom: 15px;
    }
    
    
    .dashboard-card-content {
       text-align: center;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       max-height: 100%;
       justify-content: center;
       align-items: stretch;
    }
    
    mat-card {
       display: flex;
       flex-direction: column;
    }

    Adding Cards To The Dashboard

    Since the dashboard elements will be added individually and not through iteration, the dashboard component needs to be modified to account for this. In dashboard.component.ts, remove the cards property and replace it with a cardLayout property instead. The cardLayout variable will define the number of columns for the material grid list and how many rows and columns each of the dashboard cards will span. Breakpoints.Handset and Breakpoints.Tablet query matches will display in 1 column and those that do not match will display in 4 columns.

    // dashboard.component.js
    ...
    
    
    cardLayout = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
       map(({ matches }) => {
         if (matches) {
           return {
             columns: 1,
             miniCard: { cols: 1, rows: 1 },
             chart: { cols: 1, rows: 2 },
             table: { cols: 1, rows: 4 },
           };
         }
    
        return {
           columns: 4,
           miniCard: { cols: 1, rows: 1 },
           chart: { cols: 2, rows: 2 },
           table: { cols: 4, rows: 4 },
         };
       })
     );
    
    ...

    In the dash.component.html template, replace the colspan and rowspan values of mat-grid-tile elements and the cols property of the mat-grid-list element.

    <!--dash.component.html-->
    <div class="grid-container">
     <h1 class="mat-h1">Dashboard</h1>
     <mat-grid-list cols="{{ ( cardLayout | async )?.columns }}" rowHeight="200px">
       <!--Mini Cards-->
       <mat-grid-tile *ngFor="let i of [1, 2, 3, 4]" [colspan]="( cardLayout | async )?.miniCard.cols"
         [rowspan]="( cardLayout | async )?.miniCard.rows">
         <app-card title="Card {{i}}"><div>Mini Card Content Here</div></app-card>
       </mat-grid-tile>
       <!--Charts-->
       <mat-grid-tile *ngFor="let i of [5, 6, 7, 8]" [colspan]="( cardLayout | async )?.chart.cols"
         [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Card {{i}}"><div>Chart Content Here</div></app-card>
       </mat-grid-tile>
       <!--Table-->
       <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows">
         <app-card title="Card 9"><div>Table Content Here</div></app-card>
       </mat-grid-tile>
     </mat-grid-list>
    </div>

    The dashboard will end up looking exactly like the most recent screenshot linked above.

    Generating The Charts

    The four charts that we need for the dashboard are:

    • A radar chart of products by unit sold.
    • A pie chart of sales by traffic source.
    • A bar chart of online store sessions.
    • A line chart of sales across the year.

    Similar to creating the dashboard, generating chart components involves running a schematic. Using the ng2-charts schematics, generate the four different charts. We’ll place them in a folder called charts. Run ng generate ng2-charts-schematics:<chart type> <chart name>.

    ng generate ng2-charts-schematics:radar charts/product-sales-chart
    ng generate ng2-charts-schematics:pie charts/sales-traffic-chart
    ng generate ng2-charts-schematics:line charts/annual-sales-chart 
    ng generate ng2-charts-schematics:bar charts/store-sessions-chart

    After running these commands, all four chart components are generated and are populated with sample data ready for display. Depending on what data you’d like to show, pick charts that most suit your data visualization needs. For each of the charts generated above, add the chartContainer class to the divs that enclose the canvas element in the chart templates.

    <div class="chartContainer">
      <canvas baseChart width="400" height="400">
        ...

    Next, add this styling to styles.css so that they could be accessible to all the chart components.

    /*styles.css*/
    ...
    
    .chartContainer canvas {
        max-height: 250px;
        width: auto;
    }
    
    .chartContainer{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    Adding Data To The Charts

    The generated chart components come with sample data already plugged in. If you have pre-existing services that provide your own data, you can add this data from them to the chart components. The charts take labels for the x-axis, data or data sets, a chart type, colors, a legend as well as other customization options. To provide the data and labels to the charts, create a service that will fetch data from a source of your choice and return it in a form that the charts accept. For instance, the AnnualSalesChartComponent receives its dataset and labels from the SalesService’s getSalesByMonth method which returns an array of sales for each month for the current year. You can find this service here and data it returns here. Inject the service as a private property to the AnnualSalesChartComponent constructor. Call the method that returns the required chart data from the service within the ngOnInit lifecycle hook.

    // annual-sales-chart.component.ts
    import { SalesService } from ’src/app/sales/sales.service';
    
    
    ...
    
    
    export class AnnualSalesChartComponent implements OnInit {
      public salesChartData: ChartDataSets[] = [
       { data: [], label: 'Total Sales' },
     ];
    
     public salesChartLabels: Label[] = [];
      ...
    
      constructor(private salesService: SalesService) { }
      ngOnInit() {
       this.salesService.getSalesByMonth().subscribe({
         next: salesItems => {
           salesItems.forEach(li => {
             this.salesChartData[0].data.push(li.revenue);
             this.salesChartLabels.push(li.month);
           });
         },
        ...
       });
     }
    }

    Adding Charts To The Dashboard

    The next step involves adding the charts to the dashboard, in dash.component.html. Here’s what that looks like:

    <!--dash.component.html-->
    ...
    
    <!--Charts-->
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Monthly Revenue">
           <app-annual-sale-chart></app-annual-sale-chart>
       </app-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Product Sales">
           <app-product-sales-chart></app-product-sales-chart>
       </app-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Sales by Traffic Source">
           <app-sales-traffic-chart></app-sales-traffic-chart>
       </app-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
       <app-card title="Online Store Sessions by Traffic Source">
           <app-store-sessions-chart></app-store-sessions-chart>
       </app-card>
    </mat-grid-tile>
    
    ...

    This is what the resultant responsive dashboard looks like.

    dashboard with charts
    Dashboard with charts (Large preview)

    Generating A Table

    We’ll add an orders table to give the shop owner an overview of the most recent orders placed and their status. To generate the orders table component, run the schematic:

    ng generate @angular/material:table orders-table

    This will generate a table component that will look like this.

    table generated by Angular Material schematic
    Table generated by Angular Material schematic (Large preview)

    Tables with many columns may be difficult to make responsive for handset and tablet views. When adding the table to a card, make it horizontally scrollable so that all the data can be viewed properly and is not obstructed. You can do this by adding the styling below to your table component:

    <!--table.component.html-->
    <div class="mat-elevation-z8 small-table">
     <table mat-table class="full-width-table" matSort aria-label="Elements">
       ...
    /*table.component.css*/
    
    ...
    
    .small-table{
      overflow-x: scroll !important;
    }

    To add the table to the dash component:

    <!-- dashboard.component.html>
    ...
      <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows">
         <app-card title="Latest Orders">
           <app-orders-table></app-orders-table>
         </app-card>
      </mat-grid-tile>
    ...

    Adding Data To The Table

    Like with charts, you can add data to the table in the ngOnInit method from a service. Additionally, you will need to modify your table’s generated data source to consume data from the service. To start off, inject the service in the table’s class constructor. Let’s take the example of a table listing the latest orders for this dashboard. To get data for the table, let’s inject the OrderService in the OrdersTableComponent constructor, change the MatTable type assertion of the table view child, and amend the list of displayed columns to reflect an order interface. If you’re interested in the data being added to the table, you can find it here. The last thing involves getting the total length of the data items available to be used to set the total in the table’s <mat-paginator>.

    // orders-table.component.ts
    import { OrderService } from '../orders.service';
    import { Order } from '../order';
    ...
    export class OrdersTableComponent implements AfterViewInit, OnInit {
    ...
     @ViewChild(MatTable) table: MatTable;
     dataLength: number;
     
     displayedColumns = [
       "id",
       "date",
       "name",
       "status",
       "orderTotal",
       "paymentMode",
     ];
    ...
    constructor(private orderService: OrderService){}
    
    ngOnInit() {
     this.datasource = new OrdersTableDataSource(this.orderService);
     this.orderService.getOrderCount().subscribe({
       next: orderCount => {
        this.dataLength = orderCount;
       },
       ...
     });
    }
    ...
    }

    Next, we’ll need to modify the OrdersTableDataSource class to accept the OrderService as a parameter in its constructor. We’ll have to modify its connect and destroy methods as well. The connect method connects the data source to the table and updates the table when new data items are emitted from the stream it returns, in this case, an orders array observable. The dataMutations constant combines the first data load, pagination, and sorting events into one stream for the table to consume. Pagination and sorting are handled by the OrderService server-side. So we need to pass the offset and page size from paginator and the active sort field and sort direction of the sort property to the getOrders method of the OrderService. The disconnect method should be used to close any connections made and release resources held up in the connect method.

    // orders-table.datasource.ts
    ...
    export class OrdersTableDataSource extends DataSource<Order> {
     paginator: MatPaginator;
     sort: MatSort;
    
     constructor(private orderService: OrderService) {
       super();
     }
    
     connect(): Observable<Order[]> {
       const dataMutations = [
         of('Initial load'),
         this.paginator.page,
         this.sort.sortChange
       ];
    
       return merge(...dataMutations).pipe(mergeMap(() => {
         return this.orderService.getOrders(
           this.paginator.pageIndex * this.paginator.pageSize,
           this.paginator.pageSize,
           this.sort.active,
           this.sort.direction
         );
       }));
     }
    
     disconnect() {} 
    }

    In the orders table template, insert the new columns and bind the length property of <mat-paginator> to the dataLength property. For the status column, use a <mat-chip> element for better visualization of the order status. To have access to <mat-chip>, add the MatChipsModule as an import to AppModule.

    <!-- orders-table.component.html -->
    <div class="mat-elevation-z8">
     <table mat-table class="full-width-table" matSort aria-label="Elements">
       <!-- Id Column -->
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
         <td mat-cell *matCellDef="let row">{{row.id}}</td>
       </ng-container>
    
       <!-- Date Column -->
       <ng-container matColumnDef="date">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
         <td mat-cell *matCellDef="let row">{{row.date | date }}</td>
       </ng-container>
    
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
         <td mat-cell *matCellDef="let row">{{row.name}}</td>
       </ng-container>
    
       <!-- Order Total Column -->
       <ng-container matColumnDef="orderTotal">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Order Total</th>
         <td mat-cell *matCellDef="let row">{{row.orderTotal | currency}}</td>
       </ng-container>
    
       <!-- Payment Mode Column -->
       <ng-container matColumnDef="paymentMode">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Mode</th>
         <td mat-cell *matCellDef="let row">{{row.paymentMode}}</td>
       </ng-container>
    
       <!-- Status Column -->
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
         <td mat-cell *matCellDef="let row">
           <mat-chip-list>
             <mat-chip color="{{ row.status == 'delivered' ? 'primary' : ( row.status == ’shipped' ? 'accent' : 'warn' ) }}" selected>
               {{row.status}}
             </mat-chip>
           </mat-chip-list>
         </td>
       </ng-container>
    
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
    
     <mat-paginator #paginator [length]="dataLength" [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10, 15, 20]">
     </mat-paginator>
    </div>

    Once data has been added to the table, this is what the dashboard will look like:

    dashboard with charts and table
    Dashboard with charts and table (Large preview)

    Creating A Mini Card Component

    All that’s left to complete the dashboard is to populate the four small cards that sit at the top. Having smaller summary cards as part of the dashboard makes it easy to highlight brief pieces of information that do not need whole charts or tables. In this example, the four mini cards will display total sales, average order value, the total number of orders, and the number of returning customers that visited the store for the day. This is just an example. These mini cards cannot be generated like with the navigation, dashboard layout, charts, and the table. They have no schematics. Below we’ll briefly go through how to create them. Although we’re going to add data specific to the example, you can add whatever you want to them or decide to do away with them altogether. To start off, generate the mini-card component, run:

    ng g c mini-card -m app --style css

    You can find the template for the component linked here and its styling here. This component has eight input properties that you can find out how to add here. To get data to the mini card components, inject the service that provides data to them in the DashComponent constructor. Assign data received from the service to a property of the DashComponent. In this instance, we’ll get data from the StoreSummaryService and assign it to the miniCardData property. Here’s how:

    // dash.component.ts
    export class DashComponent implements OnInit{
    ...
     miniCardData: StoreSummary[];
    
     constructor(private breakpointObserver: BreakpointObserver, private summaryService: StoreSummaryService) {}
    
     ngOnInit() {
       this.summaryService.getStoreSummary().subscribe({
         next: summaryData => {
           this.miniCardData = summaryData;
         }
       });
     } 
    }

    To add the mini-cards to the dash component and have them populated with data from the service:

    <!--dash.component.html-->
    ...
    
    <!--Mini Cards-->
       <mat-grid-tile *ngFor="let mc of miniCardData" [colspan]="( cardLayout | async )?.miniCard.cols"
         [rowspan]="( cardLayout | async )?.miniCard.rows">
         <app-mini-card Create A Responsive Dashboard With Angular Material And ng2-Charts — Smashing Magazine="mc.title" [textValue]="mc.textValue" [value]="mc.value" [color]="mc.color" [percentValue]="mc.percentValue"></app-mini-card>
       </mat-grid-tile>
    
    ...

    The screenshot below is what the dashboard will look like with the mini cards populated.

    dashboard with charts, tables, and mini-cards
    Dashboard with charts, tables, and mini-cards. (Large preview)

    Putting All Together

    In the end, the dashboard component template should contain:

    <!-- dashboard.component.html -->
    <div class="grid-container">
     <h1 class="mat-h1">Dashboard</h1>
     <mat-grid-list cols="{{ ( cardLayout | async )?.columns }}" rowHeight="200px">
       <!--Mini Cards-->
       <mat-grid-tile *ngFor="let mc of miniCardData" [colspan]="( cardLayout | async )?.miniCard.cols"
         [rowspan]="( cardLayout | async )?.miniCard.rows">
         <app-mini-card [icon]="mc.icon" Create A Responsive Dashboard With Angular Material And ng2-Charts — Smashing Magazine="mc.title" [value]="mc.value" [color]="mc.color" [isIncrease]="mc.isIncrease" duration="since last month" [percentValue]="mc.percentValue" [isCurrency]="mc. isCurrency"></app-mini-card>
       </mat-grid-tile>
       <!--Charts-->
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Monthly Revenue">
           <app-annual-sale-chart></app-annual-sale-chart>
         </app-card>
       </mat-grid-tile>
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Product Sales">
           <app-product-sales-chart></app-product-sales-chart>
         </app-card>
       </mat-grid-tile>
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Sales by Traffic Source">
           <app-sales-traffic-chart></app-sales-traffic-chart>
         </app-card>
       </mat-grid-tile>
       <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows">
         <app-card title="Online Store Sessions by Traffic Source">
           <app-store-sessions-chart></app-store-sessions-chart>
         </app-card>
       </mat-grid-tile>
       <!--Table-->
       <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows">
         <app-card title="Latest Orders">
           <app-orders-table></app-orders-table>
         </app-card>
       </mat-grid-tile>
     </mat-grid-list>
    </div>

    Here’s what the resultant dashboard contains.

    completed dashboard
    Completed dashboard (Large preview)

    Conclusion

    Creating dashboards involves a fair amount of work and planning. A way to make building them faster is to use the various schematics provided by Angular Material and ng2-charts. With these schematics, running a command will generate a wholly complete component and can result in having a dashboard up and running fairly quickly. This leaves you a lot more time to focus on creating data services and adding them to your dashboard components.

    If you want to learn more about some of the schematics provided by Angular Material, visit material.angular.io, and for those provided by ng2-charts, visit their site linked here.

    Smashing Editorial
    (ra, yk, il)

    Source link