.png)
If you are starting a career in UX design then it’s important you know how to make great mockups. A website mockup is an important step in the website design and development process that helps to ensure that the final product is both visually pleasing and functional. Just as businessmen have their proposals and architects have their blueprints, a UX designer is expected to have mockups as well.
You should infer from what I'm saying that a mockup is a precise reproduction of the appearance of a website. Website mockups incorporate the photos, graphics, and UI components that will be present in the finished product along with the structure and logic of a wireframe. So, it is a visual representation of what a website will look like and how it will function. It is a way to plan out the design and layout of a website before it is built. There are several reasons why creating a mockup can be beneficial:
It allows for easy communication of design ideas between the client and the designer.
It helps to identify and resolve any potential design issues before development begins, which can save time and money in the long run.
It allows for testing of the user experience and usability before the website is built, which can help to ensure that the final product is user-friendly.
It serves as a reference during the development process, which can help to keep the project on track.
To analyze how the final web design framework will appear, you can apply different combinations of designs, development parts, and constraints. Components of a Mockup based on a developer’s recommendation includes:
Layout recommendations - It enables you to use a variety of layouts and lets you visualize how the information you've included will look in the final design framework.
Contrast Suggestions - It can give you a tool to help you compare backgrounds so you can figure out which one works best with your text.
Suggestions for color use: It gives you contrast tools so you can determine which background will go well with your text.
Advice on typography: This aids in your decision-making regarding the application's text's size, font, style, and spacing.
Spacing requirements: To create visual symmetry, you can use this to determine how much space you need between each word, each sentence, and each paragraph.
Visuals for navigation: These mockups can also be used to decide how a web application should be navigated. These include the navigation and architectural suggestions, as well as the pull-down and drop-down menus.
User flow: how the user will interact with your website and the navigation UX
Images: Use SVGs and high-quality images that mirror exactly the ones you’ll include in your final product.
In short, website mockups help you to define all the important factors of your product to ensure the best UX possible before expensive coding begins. Because at that stage, any changes you make will be paid for in arms and legs!
If you have some basic knowledge of UI/UX design, other terms that seem to serve a similar purpose come to mind like; sketches, wireframes, and prototypes. And that's not surprising given how frequently designers, stakeholders, and even website design agencies use these terms as synonyms. But each of them has a minor distinction, so let's start with definitions.
A sketch is a hand-drawn representation of the design idea. It is a component of the first stage of design visualization and can be created using pen and paper or a computer tool.
A wireframe is a low-fidelity design deliverable that just shows the essential components of a user interface (UI) and acts as the conceptual framework for the design.
A prototype is a dynamic, high-fidelity representation of a website. Its objectives include simulating user-interface interaction, assessing user flow, and testing the usability and operation of websites.
In other words, they all have quite distinct functions. Mockups showcase a product's design from a high-fidelity point of view, while prototypes concentrate on a product's functionality in addition to its design. Wireframe's express structure from a low-quality point of view. They all represent alternative approaches to drafting your finished project, displaying various pages and screens.
Comparison Between Wireframe, Mockup & Prototype
By including design components like color schemes, typefaces, icons, and navigation, mockups take wireframes to the next level. Usually, many mockups are made so that decision-makers have a variety of options to consider. To make the renderings more accurate representations of the finished product, the actual content is frequently included. Mockups' static nature makes it easy to incorporate any updates or demands, unlike a Prototype.
How To Create a Website Mockup
There are a couple of web mockup tools available on the internet that allow you to create high-Fidelity mockups like Sketch, Framer, Balsamiq, Figma, and InVision. But photoshop provides a variety of stylistic options for your mockup, including various fonts, colors, and layouts. By clicking the "Background" button in the toolbar and choosing an image or pattern from the available selections, you can easily add background pictures or patterns to your mockup.
Requirements
Although a Photoshop Creative Cloud would be used in this instance, previous versions should also function well enough. Just keep in mind that there can be minor variations in the desktop arrangement when you follow the steps.
Background picture: This is the image you want to browse through on your website. You'll use an image of a laptop for this example. Avoid tilting or angling the screenshot in this image as it will not function properly.
A Full Screenshot of Your Website: This isn't your ordinary screenshot because it ought to include the entire length of a website that scrolls. This is how to quickly and easily capture your website using tools like the GoFullPage Chrome plugin!
You do need to be using the Google Chrome browser for this, so download the extension. You should be able to find something similar by searching for "full page screenshot XYZ browser addon" if you're using a different browser.
Visit the website you wish to capture after that.
The screenshot extension can then be used by selecting the icon from your extension menu in the top-right corner of your browser window.
The plugin will automatically scroll the page down and take a screenshot of it. The plugin will share your full-page screenshot in a pop-up window once it reaches the bottom.
You may download this as a PNG or JPG by clicking the download button.
The First Step: Resizing Your Backdrop Image
Photoshop can handle some large files, but you can scale it down or up a little to make it more appropriate.
In Photoshop, navigate to your background image and choose Image > Image Size from the menu (Option + Command + I).
Here, you can modify the size of the photograph. It is advised to do some research to determine the best size for your use case, but listed below are a few typical sizes for your convenience.
1080 x 1080 pixels for Instagram
Websites: 1500 to 2500 pixels wide
The Second Step: Putting the Website Screenshot into the Background Image
Now, you'll include the website image in the background picture.
Using the Command + A keyboard shortcut, open Photoshop and choose the screenshot of the scrolling website. The selection should be copied and pasted into the backdrop picture.
Change the scrolling website image you pasted in so that it better fits the background image since it is probably too huge for the scene. To scale a picture up or down, click and drag one of its corners while holding down the SHIFT key.
To paste it, drag it over and resize it to fit the computer screen in your backdrop image. Then press ENTER on your keyboard.
You can temporarily conceal the website screenshot layer as well. Click the Eye icon next to the webpage scrolling the screenshot layer in the Layers menu to make it temporarily disappear.
The Step Three: Making the Frame
Next, you'll build the frame that the scrolling image will be contained in.
Choose the Polygonal Lasso Tool first.
You'll draw a circle around the area of the device screen where you want your scrolling website to appear on the backdrop image. Click directly above the top left corner of the device screen and drag the Polygonal Lasso Tool (or any other selection tool you are comfortable using) along the top of the screen until you reach the top right corner. Once you have traced the device screen, repeat the process. Click on the tiny circle on the path when you spot it to close the path.
A Quick Tip: trace a small portion of the screen off to prevent the white glow from appearing behind your scrolling website.
You should reveal your website image so it can be seen once more. Click on the empty spot where the eye icon was in the Layers window. Both the eye and your image ought to reappear.
Click the Layer Mask button located at the panel's bottom after selecting the webpage picture in the Layers panel.
Your scrolling screenshot ought to now be contained within the frame that you marked with the Polygonal Lasso Tool.
The hardest thing was that. It was also relatively painless, right? Let's get to the animation portion now. You're nearly finished!
The Step Four: Adding Animation
Up on the menu, select Timeline. When the Animation tab appears at the bottom of your screen, click on it once to enter the frame view and choose Create Frame Animation from the drop-down menu that appears.
You should now be able to see your frames at the bottom! Change the frame rate by selecting the drop-down option with a timestamp under your initial frame. Do 0.1 seconds for this.
Return to the Layers panel and select the layer containing the screenshot of the website and its mask. To delink the two from one another, click the link icon that appears between them.
You're going to want to add another frame utilizing the + button back in the Animation panel.
You should have the top of the website displayed in the first frame, precisely as it is in the current image.
Toggle the second frame on. You'll want it to display at the bottom of your website in this frame. You can change this up. Verify that you are using the Move tool and that the Website Screenshot layer is chosen.
Click and drag upward until you reach the top of your image while maintaining the SHIFT key down on your keyboard to keep everything in place. Now, you should see the top and bottom of your website when you switch between frames 1 and 2 in the Animation panel.
By clicking both in the Animation panel while holding down SHIFT, you can choose both frames.
On the bottom menu, select the Tween icon. This is the one that resembles a comet somewhat. This will insert frames between our existing frames to provide the illusion of scrolling.
You ought to see a Tween pop-up window appear, allowing us to manage the animation's frames. The scroll will move more smoothly as we add more frames.
We'll start by entering 20 frames. With that 0.1 speed, all of the frames would now appear in the Animation panel.
Press the Play button at the bottom to see a preview of your animation.
You can alter time by changing the frame rate starting at 0.1 seconds if something feels too quick or slow.
You may wish to return to the Tween menu and add more frames if your animation feels a little jerky to create a smoother transition.
You can also select whether you want it to loop once, three times, or indefinitely at the very bottom. Every time someone looks at it, it plays because I selected forever!
A Quick Tip: Click Reverse Frames on the little button in the Timeline panel's upper right corner if it is moving backwards
The Fifth Step: Exporting Your New Animation.
Your animation can be exported in one of two formats:
GIF (for web use) (for web use)
Video (Instagram) (for Instagram)
Creating a GIF from your animation
In the pop-up window, select File > Save for Web and then click Save. It must be preserved and prepared for website upload!
Creating a video version of your animation
the File > Export menu. Make a video
Verify that the video size is appropriate for the platform you're using. For instance, make sure the video is close to 1080 x 1080 pixels if it is intended for Instagram. To start exporting the video, click Render.
Once your file has been saved, all that's left to do is share it with your clients or audience.