Is it just us, or do all web mockups look the same? Poke around online and you’ll find the same cell phone vectors and the same boring desktop computer screens. Now designer Sofia Pusa has created these original web mockups in a quirky constructivism-style, to help you show off your web work and stand out from the crowd. Dropping in your design is easy. You can also follow the steps below to customize the colors to complement your look.
Follow along to learn how to customize the templates.
STEP 1/3
Insert your work.
Double-click the Smart Object thumbnail in the layer called “YOUR DESIGN HERE.” A new file will open, showing the gradient image. Drag and drop your web page design onto the file, use the Move tool to resize it if needed, and hit Return to Place the image. Save it, and head back to the main file to see your work in place. To make any adjustments, make sure to use the Smart Layer file and save it every time to update the mockup.
STEP 2/3
Change the background.
Find the layer called “Background color.” Double-click the Layer thumbnail. When the Color Picker pops up, choose your new background color. For best results, use the Eyedropper tool to select a color from your own web page design.
STEP 3/3
Change the object colors.
Each cylinder, cube, and rectangle is fully customizable. Open the Design Elements folder, then toggle the eye next to each object in the Layers panel to identify the shape you want to change. Then click the drop down menu and double-click the color. Use the Color Picker tool to find the right hue.
TIP: Use Adobe Color to create a color scheme that complements your design.
Check out the rest of the collection.
ABOUT THE ARTIST
Sofia Pusa is an independent, multi-disciplinary creative director and illustrator based in London. Her award-winning illustrations blend vivid colors with painterly patterns, and are a regular fixture in the music, advertising, art and fashion industries. See more on Instagram.
