Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

What exactly is product design

Dane Wesolko
Bootcamp
Published in
7 min readJan 20, 2022

--

When most people think of product design, they might imagine someone like Steve Jobs or Elon Musk. Creative geniuses who invented groundbreaking products and changed the world as we know it. But the truth is, product design is a lot more than that.

“Product designer” is a title that can mean many things depending on who you ask.

Quick primer on product design.

If you ask an industrial designer, they will describe to you the process of understanding markets and products to build aesthetically pleasing products designed with the user’s needs in mind. Think of Apple’s new iPad or Beats by Dre.

If you ask someone at Google about “product design,” their description would be about building software interfaces based on insights garnered from analytics and research data.

So, what exactly is product design? This article explores this question?

Product design is a broad field encompassing everything from the initial idea to the finished product. It’s a process of ideation and iteration, where designers work tirelessly to develop new solutions and improve on old ones. And while it may not be as glamorous as inventing the next iPhone, product design is still a critical part of the innovation process.

Product design is a field that involves coming up with new ideas, iterating on them to improve them, and ensuring that they are manufacturable. It’s an integral part of innovation and can be a gratifying career.

A product designer, also known as a digital product designer, is a person whose focus lies in designing products — from hardware to software — for the consumer market. As technology grows and new opportunities arise, this job field will keep gaining attention. An increasing need for skilled people arises. If you want to become a digital product designer, there are a few things you need to know.

Firstly, it’s crucial to have a good understanding of design principles and how to apply them. You should also be familiar with different software platforms and have a solid working knowledge of at least one programming language. Most importantly, you need to think outside the box and come up with innovative solutions.

Design principles

A design principle is a foundation guideline or rule that helps shape the design of an object. Design principles are not a rigid set of rules but a collection of guidelines to help designers make conscious and subconscious decisions during a design process. Some design principles have been around for years, while others have been prevalent over the last century or so.

Adobe has an entire course on basics.

Design principles can be applied to any design form, from architecture to interior designs, from product designs to graphic designs, and many more. Design principles that can be used as a guide when designing user interfaces for websites and software applications. Before going over the various UI design principles, let’s first understand what principles apply to web and app designs.

There are primarily two types: form-related and content-related. Form-related elements include user interface components such as buttons, grids, navigations, menus, etc. Content-related elements include text blocks, images, videos, icons used on the website or app.

Here are seven popular design principles that you can use as a guide to creating visually appealing and functional user interfaces for your projects:

Simplicity — get rid of the clutter

Simplicity is among the most essential principles in design. One way to judge whether a specific element should be included in your design or not is by asking if it contributes meaningfully towards achieving your project’s objective. Does it distract from your main content? If so, consider removing it altogether or placing it somewhere else on the screen where its presence isn’t as bothersome for users on the site/app.

Clarity — create user interfaces that are easy to understand

Clarity allows you to achieve simplicity by ensuring that all elements are understandable and useful within your UI. You can gain clarity by including labels on components such as buttons and menus to clarify what they do. In addition, you can create a visual hierarchy in your design to help users understand which elements are more critical than others.

Visibility — focus on content and typography.

Visibility is about making sure that the elements in a webpage/app are readable and viewable at all times. Follow best practices when structuring your designs to avoid hiding or minimizing critical parts of your layouts. Use appropriate typography for text-based content such as articles, recipes, etc., so that they’re easily readable from afar.

Affordance — interactive components should look clickable.

Affordance allows you to create user interfaces where interactive or responsive components have a clear visual relationship with the surrounding elements. For example, input fields look like text inputs, and buttons appear touchable or tappable.

Convention — use established user interface design patterns.

Conventions are widely used features within web designs that users expect to find on any given website. They’re basically standard UI elements that you should include in every project unless there’s a valid reason for not doing so. Examples of conventions include social media icons, navigation bar/breadcrumbs, search bars, etc…

Affordance & Signifiers — make interactive components active.

Each interactive UI element has both affordances (i.., what it looks like) and signifiers (i.., what it does) that indicate what users can do. For example, a button with the word “Delete” has an affordance of being clickable and a signifier of deleting something.

Feedback — use animation and transitions to provide pleasant feedback.

Animation and transitions create functional and visually appealing user interfaces by providing subtle cues and signals, keeping users informed about actions taken on the website or using software applications. Well-managed animations help guide users through different stages of interaction, including error messages. If you’re designing for mobile devices, ensure that your designs look great both in landscape and portrait orientation.

The above principles are just some of the most common design principles used throughout web/app design. You can find more information on many of these topics online, as well as other guides that you may want to consider including in your future projects.

Design software

The most popular design tools are Adobe Illustrator, Adobe Photoshop, Adobe InDesign, Sketch App by Bohemian Coding, and Affinity Designer by Serif.

Adobe Illustrator is the industry standard for vector design. It’s used in print, web, and interface/app design because it allows for clean lines and scalable graphics that preserve quality when resized or manipulated. Adobe Photoshop is used for photo editing, compositing, digital painting, web design, and much more. Adobe InDesign is a page layout tool used by professionals in the publishing industry. If you’re designing for print, this is the tool you want to use.

Sketch App by Bohemian Coding is a tool focused on interface design and web design (the latest version also supports mobile design). Sketch has gained popularity among designers. It’s a relatively young tool, but there are still a lot of tutorials to learn from.

Affinity Designer by Serif is a powerful vector-based design tool used for everything. From branding, packaging, editorial art, UI/UX, and web graphics. It has the advantages of being both affordable and accessible.

The latest addition to this list is Balsamiq Wireframe, which allows you to quickly create mockups of websites or applications without learning complex software. You can drag and drop elements in Balsamiq Mockups to create a digital version of your sketch on paper. This application also works well when presenting multiple screen options during a project’s development phase.

There’s a lot of overlap between the tools. For example, Adobe Photoshop and Sketch App both allow for layered files so you can edit various elements within a single file. And since Adobe Illustrator is vector-based, it works well with apps like Affinity Designer and Balsamiq. Suppose you’re looking for an app that could replace several design programs. In that case, Affinity Designer might be your best bet as it allows you to work on everything from branding to digital painting (similar to Adobe Photoshop).

It’s also worth noting other popular design tools available, such as CorelDraw, Photo-Paint, Visio, Autodesk AutoCAD, and many others.

Which of these design tools are you using? Do you have a favorite that didn’t make our list? Let us know in the comments below!

Programming languages

Programming languages are a way for humans to communicate with computers. The computer does whatever it is we want it to do. Each language has its own unique set of grammar and syntax rules which define what those statements mean and how they should be used. Each statement represents a command or function call. The computer executes immediately upon reading them from the source file(s). What happens afterward is determined by what statements were executed, their written order, and external factors such as input data that might have been passed into a program. Variables can store information that can be modified later on within certain limits. At the same time, objects represent actual entities (e.g., a specific person) that have certain attributes associated with them. These can be integers, floating-point numbers, strings of text characters, or a more complex structure made up of several basic types put together.

Some basics on programming.

Programming languages are generally not limited to a single platform. They can produce software for many different computer architectures without any changes needed to the source code itself. Nothing stops us from writing some Python code on an old Windows XP laptop and then compiling it into an executable file that will run smoothly under Windows 7 x64. The interpreter is executed within the processor’s runtime environment, which handles various tasks such as managing memory allocation, file I/O, type checking, calling subroutine functions, etc.

This enables software to run on different operating systems with little or no change required to the source code itself. Suppose you’ve already written some C++ for Windows using Visual Studio. In that case, all you would need to do to make it work on Mac OS X too is build it using GCC then run them under Wine. You can even use GCC directly within Visual Studio for building console applications if you’re not satisfied with Microsoft’s command-line tools alternative.

Design is a broad field that encompasses everything from the initial idea to the finished product. It’s a process of ideation and iteration, where designers work tirelessly to develop new solutions and improve on old ones. It’s crucial to have a good understanding of design principles and how to apply them. You should also be familiar with different software platforms and have a solid working knowledge of at least one programming language.

Most importantly, you need to think outside the box and come up with innovative solutions — we can help!

What problem could you solve today?

We’re here for your every creative need. Find out more by visiting https://danewesolko.com/.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Dane Wesolko
Dane Wesolko

Written by Dane Wesolko

WΞ / designer, artist, writer, creator, noise maker, coffee addict

No responses yet