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.
Processes of junior and senior designer varies a lot. We want to be seniors instantly, so let's act like ones.
It captures a trap that’s easy to fall into: Running with the first idea that comes to mind. If I could just make it look better maybe it’ll work.
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.
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.
Approximate symmetry retains most of the benefits of symmetry, with a little vitality added. It is created by adding slight asymmetrical aspects to an otherwise symmetrical image. The result is a more stimulating visual, though it loses a small amount of structure.
The slight visual disruption, however, can work to your benefit.
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.
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.
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.
In terms of picking right software, a short answer is: it depends.
The rule of instrument really applies here.
Let's create the mockup!