New to Nutbox?

SLC21/WK4: Mockups in Design and Application

3 comments

8 hours agoSteemit8 min read

Hi friends, after reading around I am interested in participating in an amazing challenge this week. The challenge is titled: Mockups in Design and Application by Mr. @lhorgic following the contest link: SLC21/WK4: Mockups in Design and Application

Previously I also invited other friends such as Mr. @irawandedy, Mr @muzack1 , sir @sisol and my friend @cymolan.

List and discuss extensively other types of mockups not covered in this lesson.

There are many types of mockups, which in the lesson have been given material about Print Mockups, Device Mockups, and Branding Mockups. Then this time we will discuss other types such as Web Mockup, App Mockup, Packaging Mockup, Interior Mockup, Product Mockup, Environmental Mockup and Social Media Mockup.

^Source

Web Mockup. We will imagine that we are creating a concept for a new website. So here we will utilize Web Mockup which looks like a digital blueprint. Almost all details ranging from headers, buttons, to theme colors will be displayed so that they are clear.
The function of this mockup is to ensure that all elements of the website are as desired, of course, with it it will make the display not messy, and easy to see before starting the editing.

As for examples of use such as on a portfolio website to show a work, on a landing page for startup products and so on.

^Source

App Mockup. The previous Web Mockup was made for websites, while this App Mockup will be specialized for applications, be it applications on smartphones or on desktops. The display will show how someone can interact with an application. The benefit of this Mockup is to ensure that the application we use is easier to use, so it won't make us dizzy.

As for examples of its use, we often see the dashboard display in an e-wallet application and interactive design in mobile games and others.

^Source

Packaging Mockup. In this Packaging Mockup we can say that it is a simulation to see the packaging design before it is actually printed. The benefit is to see whether the design will make a consumer tempted or not at all.

The examples of its use are on herbal drink bottles that are usually designed with minimalist logos, on pizza boxes with bright colors including cool taglines and so on.

^Source

Interior Mockup. This Interior Mockup will make everything conceptualized and look more elegant. Usually this Mockup is used to tell what it feels like to sit in a space that suits someone and before spending money to make real decorations.

As for examples of its use such as in industrial cafe layouts for hanging out, gaming rooms with cool RGB lighting and so on.

^Source

Product Mockup. This type of mockup is like finding out which of our product designs are suitable for sale or need to be revised again. While the advantage of this Mockup is to show our product to people who will become investors or will become consumers without the need for physical production first.

The examples of its use are such as on a custom shoe with an artistic and attractive design, on a premium tumbler for influencers and the like.

^Source

Environmental Mockup. With this Mockup, we imagine our design appearing in a big way on a billboard on the highway or as a backdrop at a music event. So, that's what is called Environmental Mockup. Then what is its function, yes it is clear to show whether our design is attractive when applied on a large scale or not attractive.

Examples of its use are on a band's concert banner, on a large event promotion billboard in the city center or region and the like.

^Source

Social Media Mockup. This mockup will allow us to see how our content or ads will be published on a platform, for example on Instagram, FB or TikTok. Then what makes this Mockup important is that the Post looks more attractive so that it will go viral.

Examples of its use are in the feed design on Instagram with a brand's clothing, on TikTok's ad reels that make eye-catching, and the like.

Name and explain well the importance of mockups in promoting a brand/product.

It should be noted that the existence of a Mockup is certainly the key to success in creating a brand / product and making it feel more alive and attractive. Because of the mockup, which is where the idea that was previously abstract then turns into a real display and is easily understood by clients or prospective clients. In addition, Mockups also help display a brand or product more professionally and will certainly give an impression on products that have been designed seriously and deeply. Not only that, the existence of a mockup will also be a more effective solution in order to save expenses, be it cost or time, because we know that designs can be tested and can be made without the need to produce physically first.

Not stopping there, the mockup has a power to be able to tantalize many people because by displaying a picture that makes people tempted. Not a few people are convinced and believe that mockups are able to help explain the concept well, thus winning the hearts of clients to investors to believe more in the product/brand vision. In other words, we can consider that mockups are not just a design tool, but also an important element to make promotions more effective and memorable.

Using last week's assignment logo (or a new logo if you didn't participate last week) and the new brochure for that week, demonstrate how to use mock features to promote your brand using the following information below.

a. Find a good sample t-shirt, then promote your brand by including your logo.

To put a logo on a t-shirt with the intention of promoting our brand, the first step I have to do is open the editor application. Here I made it with the web version of Canva, so after entering Canva, just choose to create a design in the left corner.

Next, I choose the size that I will make the design, here I use the size of the 1080 px Instagram content: 1080 px.

Next I selected elements to find a cool t-shirt mockup template to add the WT logo (the logo I designed last week).

In the elements menu, we simply scroll down to find the designs, then select view all to find the T-shirt mockups we like.

Then select clothing to find a large selection of attractive t-shirts there.

After finding a suitable t-shirt, the next step is to drag the t-shirt templet into our worksheet.

Then we just need to adjust the size according to what we want.

To add a logo, first select upload at number one, then select the second select the logo that you have uploaded, and when just pull the logo towards the T-shirt Mockup on the worksheet.

If the logo is not suitable, it could be too big or too small, then the next step is to select the logo that has entered the shirt and double-click on logo number 1, then menu number 2 will come out so we just have to adjust it.

If you feel it is appropriate, then just scroll down and select “apply changes”.

Next, we save the t-shirt image that has used our logo. And here's the result:

Desain tanpa judul.png

b. Look for outdoor advertising media such as “billboard mockups” that you can use to put up flyer or banner designs for promotion.

To create outdoor advertising media such as “billboard mockup” that you can use to put up the pamphlet or banner design that we designed last week. I went back to editing using Canva Web and selected the same size as before and then selected the number 1 element and on number 2 select the design and number 3 select the “Outdoor” design.

After finding an outdoor design that suits what we want, then adjust the size.

Next, we will upload the brochure that we have designed last week, then we pull the brochure into the outdoor mockup that we have added earlier.

Then we adjust the size and finally if we feel it is appropriate, we just apply the changes.

Then save with size and jpg/png file, done.

Desain tanpa judul (1).png

c. Finally, choose any example of your choice to promote steemit as a brand using the steemit logo.

The last one is to promote steemit as a brand by using the steemit logo, I again utilize canva, here I also use the same size and choose elements> Design> Packaging. Then just choose the Mockup that suits my wishes, just pull it into the worksheet and adjust the size.