The Secret to Fast, High-Fidelity Mockups
User Interface (UI) mockups are essential in the process of designing any web or mobile application. They help visualize the structure, layout, and functionality of the user interface before the actual coding process begins. Traditionally, designers would use specialized software like Adobe XD or Figma to create UI mockups. However, there is a faster and easier way to create simple UI mockups by editing the page using your browser inspector.
A browser inspector is a tool built into modern web browsers that allows you to inspect, edit, and debug the code of a web page. By using the browser inspector, you can quickly make changes to the layout, structure, and content of a web page without the need for specialized design software. This makes it an ideal tool for creating simple UI mockups.
In this article, we will walk you through the process of creating UI mockups using the browser inspector.
Step 1: Open the Browser Inspector
To access the browser inspector, open your web browser and navigate to the page you want to create a mockup of. Then, right-click on the page and select “Inspect” or press the F12 key on your keyboard. This will open the browser inspector.
Pro Tip: Right-clicking on the element which you plan to edit will open the browser inspector to the area where that element resides making it easier to discover.
Example
Let’s say you are a product manager for Medium. You may have conducted research that indicates your users would like to display their Job Title as part of their profile. To meet this need, you want to create a story that adds a Job Title field to the Profile Information form, allowing users to enter this information. You may also want to add a mockup to this story to assist in development. To do this, you should navigate to the form and open the browser inspector.
Step 2: Inspect the Page Elements
Once the inspector is open, you can use it to inspect the various elements of the page. To do this, make sure you’re in the “Elements” tab. This will display a tree-like structure of all the HTML elements on the page.
Using the inspector, you can hover over each element to highlight it on the page. This will make it easier to identify which element you want to modify. You can also use the search bar to find a specific element by name or ID.
Example
After opening the browser inspector, you can either scroll through the HTML, expanding and collapsing elements until you locate the element you are looking for, or you can right-click on the element on the page and select “Inspect.” Once you find the element, it’s important to navigate back up the HTML to select the parent element, if there is one. In this case, you want to find the “Name” field so that you can copy it to create a new “Job Title” field.
Step 3: Modify the Page
To modify the page, you can simply click on any element in the inspector and make changes to its attributes. For example, you can change the text of a button, the color of a background, or the size of an image.
To change an attribute, simply double-click on the value in the inspector and enter a new value. You can also add new attributes by clicking the “plus” icon next to the element.
Example
To create a duplicate element, you can right-click on the element and select “Duplicate element.” This action creates a copy of the element you have selected, just below it in the HTML.
Example
Finally, you can rename the newly created element by finding the label within it and updating its text. The change will immediately be applied to the page and you will be ready to take a screen capture to use as a mockup.
Step 4: Preview the Changes
Once you have made your changes, you can preview them in real time by switching to the browser window. If you are not satisfied with your changes, you can simply undo them by pressing Ctrl+Z or Cmd+Z on your keyboard.
Step 5: Save the Changes
If you are happy with your changes and want to save them, you can either take a screenshot or copy the modified HTML code. To copy the HTML code, simply right-click on the element in the inspector and select “Copy Element.”
Conclusion
Creating UI mockups using the browser inspector is a fast and easy way to make simple changes to your platform. By using the inspector, you can quickly modify the layout, structure, and content of a web page without the need for specialized design software. While it may not be suitable for more complex designs, it is an excellent tool for creating simple mockups and experimenting with different design ideas. So next time you need to make quick changes to your UI, give the browser inspector a try!
