Digital Product Designer Workshops

This is the presentation of second workshops for digital product designer. You can also check the first and the third or read the full story.

Download presentation

During our last meeting we talked about the product design, user interface and the importance of context in our workflow. We've also defined design process and completed definition of our product along with a roadmap and userflow.

We will talk about the good practices during sketch / wireframe phase, then we'll try to prepare one. Afterwards, we'll do the same with mockups.

It is best to start with all the possible scenarios and try to think critically about each and every one of them, eliminating everything, but one.

During the wireframing we have to remember that a page is not static. It is going to evolve and adapt to the content. Therefore, page's state could be: ideal, empty, error, partial and loading.

Have I mentioned different resolutions? Singular page consists of many different states and we have to remember about all of them. We also have to remember that the process of this particular website is within a process of the flow and it's within the process of a company and the product itself. It's the processception!

We already know how the process of creating a good wireframe should look like and how to get a value out of it. Let's focus on the user interface patterns themselves for a moment then.

The F-Layout relies upon various eyetracking studies for it's foundational concept.Let us move on to details.

Cards are not really layout per se, rather a component, but they are really useful in terms of responsive design.

One of the most popular grid system is the one introduced by Bootstrap. At this point, it may be also nice to look through the documentation of it and its components.

Magazine - style layout is good, when displaying regularly-updated content in different categories that we want to be structured.

We can use it for sites with two main pieces of content that are either equally important or / and in the structure of input -> output.

When we want a site to work as an app within a browser, we may want to skip multi - page layout and stay with singular page, like Gmail or Spotify.

That's a tricky one. It strictly corelates with data structure and our product roadmap as well. There is no good solution, we have to think critically and try to do our best. There are some guidelines, though.

During the wireframing / sketch phase there is absolutely no need to prepare really detailed, pretty wireframes. We can use some kit or go with UXPin or Balsamiq, Axure or anything else you find nice to use. It's just for communicating your idea in a fast and clear way.

Let's move on and try to practice and sketch a dog's profile, as it's most important part of our website.

Once we are ready with a sketch and we got the structure figured out, let's try to boost the experience by adding a visual layer.

As we've discussed before, during the talk about drunk users, usage of contrast and color is a really important factor in communicating the idea. It helps to highlight particular parts of the website.

Thanks to a great use of vibrant color, we can still clearly see the call to action and main purpose of the website.

Typography plays a great role in a design itself, and the topic is really broad. There are several links that may help us.
For the purpose of our project, we'll use Google Fonts.

We have to remember that graphical user interface is mostly a boost for our website's structure and our goal. It just helps. If that button is big and in contrast to the rest of the page, it should be our primary action. It's secondary to general flow and website's layout. If a car is pretty, it does not mean it runs.

Once we are ready to proceed to actually creating a mockup, let's discuss what tool to use. I think standards are Photoshop / Sketch (Mac only) / HTML & CSS. Of course, there are plenty other tools.
There are many, many, many, many articles and discussions that cover differences between Photoshop and Sketch.
In terms of jumping straight to the code, it's more complicated. In short: it depends.


Don't ask these questions, always be guided by usability and communicating your idea.

Freeeebies! Let's boost our working process by using available resources and ready-made UI Kits. It's not a shame, especially whenever you are just starting. Don't need to reinvent the wheel.
There are so many useful resources.

Also, here is the mother of all links.

In terms of picking right software, a short answer is: it depends.
The rule of instrument really applies here.

Let's create the mockup!