Our work methods are changing and so are we
Since the very beginning, the web has changed perpetually. And so have the ways that of planning digital merchandise, as well. Designers want to work better and more effectively. They had started to rethink their design process and adapted their work methods accordingly.
Thereupon, the choice of better work methods began to influence the outcome. This might be one of the many reasons we design “User First” nowadays, which basically means building products around the user’s needs.
Back within the previous days the fastened body of water method (plan, design, development, launch) stopped us from quickly shipping our products, which is quite important to learn if our design solutions work in the real world: “Build, Measure, Learn” is still one of the most important methods to create meaningful products, built for the user.
Creating a lot of iterations as part of a modern, dynamic and agile process leads to more flexibility and faster product development.
So however will the individual style method adapt to the User 1st style strategy? And how will {the style|the planning|the look} method support fast design iterations to live and find out about the product‘s success effectively?
Designing User First
The biggest change in nowadays web design is that we all focus on crafting our digital products according to the user‘s needs. As designers we always keep in mind how the user will interact with the product and we often try to prove our designs by collecting user data or running user tests, because we want to build the best possible experience for the users.
The User 1st style strategy is that the next step on the far side the fashionable net style techniques “Mobile First” and “Content First”. It shifts the focus from devices and content directly to the user‘s needs. You do not reduce complexity according to screen sizes and content, for instance; you reduce complexity according to the user‘s needs. Therefore it ends up in a multi-device expertise wherever the merchandise is constructed round the user and his desires outright.
The idea of building products with focus on your users affects the design process in several dimensions:
Start with sketches
There is less time than ever before for shipping iterations. The product needs to be tested in a very early state to learn if you are on the right track. This is why sketches are a very good start. Sketching is about developing ideas and to communicate them in order to explain what you have in mind.
Usually, you start with several sketches based on your user‘s needs or a design problem. These first sketches are essential to communicate your ideas to your team and stakeholders, but more importantly, to get feedback from your users.
Here, Photoshop is a great tool for doing digital sketches in an early state of work. It offers very fast visualisations and iterations.
You can also create moodboards in Photoshop for establishing a design atmosphere (have a look on Style Tiles) or even bigger — a web technique moodboard in which you collect interaction patterns and behaviours. It is conjointly potential to form sketches by cryptography directly within the browser.
Fast sketches on paper, in the browser or in Photoshop are great to start. Wireframes are not. They just deal with hierarchy of content. You will lose context and meaning. And you cannot communicate through them.
It is very difficult to get a common idea of the later outcome trough wireframes and so you cannot communicate on a common level with your teammates and users. The chance of everyone being disappointed in the end is very high. Furthermore, wireframes do not tell any story.
They are static and lifeless. Wireframes are a waste of time in your design process.
Base your decisions on user data
As mentioned before, your first sketches should be based on the user‘s needs.
These needs could be generated from either web analytics, surveys or user tests, for instance. It is important to understand the problems your user has and to create solutions that make sense. The user data should influence your work process, but not determine it: User data is to be used wisely, and not to be followed blindly! Having the data is one thing;
understanding them the other. It is not a decent plan to color all of your buttons in red, simply because red buttons have the next click rate measured in A/B tests.
Building prototypes
After the sketching phase it is time to transfer your tested ideas into a real prototype.
As ride Brewer told North American nation in his speak “Photoshop lies! And other sobering truths about Product Design“ at Beyond Tellerrand, a “prototype is worth a thousand meetings”.
And this is often true: Communication on a paradigm is simple. Everyone sees the same thing and has the same idea in mind. Prototypes area unit inbuilt the correct medium, are interactive, quickly changeable and are ready for user tests. Plus, they can be expanded into a shippable product.
Working with real content
One of the big benefits when working with a prototype is that you can easily integrate real content. It shows if the look works or not. Possible problems can be identified quickly and broken layouts can easily be fixed. Additionally, you can test minimum and maximum situations: How does a news feed look like with 1000 entries and with no entry at all? Working with real context provides for new ideas on how to improve the product.
And you can personalise the prototype for user tests, which makes it much easier for the user to empathise with the product and will lead to better test data very likely.
It is a good idea to use real content for your prototype and sketches.
You do not fool yourself by using placeholder text: “Lorem Ipsum is fucking evil” (Josh Brewer). Websites are mainly about their content. When you do not care about the content, you do not care about your users as well.
Sharing and collaboration
Sharing is one of the biggest issues in the design process. And on the other hand, it is one of the biggest chances to improve your work. When working on it, you need to share the prototype with your developers, product managers, stakeholders, designers, copywriters and the test users.
One paradigm will serve all of them once created as Associate in Nursing hypertext markup language web page that's accessible for all of them. Just think of the copywriters who can test different wordings, languages and texts directly in the prototype by using the browser‘s web inspector. It is easy, fast and efficient.
Forget Photoshop at once
The time of pixel-perfect Photoshop compositions that developers translate into operating internet products has as luck would have it concluded.
It costs a lot of time and money and does not fit into modern, flexible design processes anymore. Designing one expertise for all on the market devices is nothing you'll be able to incorporate Photoshop. It was not designed to build websites and therefore we should not use it in this way.
When it involves building the primary digital layout from your sketches, forget about using Photoshop. The look and feel of a webpage cannot be built in Photoshop properly. And it is not testable on different devices in different contexts.
Photoshop is lying to you because of the design of your design: reckoning on browser, operation-system, screen and device, browsers render the images, fonts, icons etc. in other ways than Photoshop does. And there's a great deal over simply the design to stay in mind: Performance, Responsive Design, Microinteractions, ergonomics and, of course, the general feeling. A website is not a static image hanging framed on the wall of an art gallery. Websites are dynamic and active and need to be treated as such.
A Photoshop document is static and not clickable. It is hard to think of complex interactions like Parallax Scrolling when you are working with a tool that cannot handle interactions.
Displaying and describing interactions in Photoshop is very painful. It needs a lot of Photoshop layers or documents, and it is very hard to create them statically. Plus, it will look odd in the end or at least different from what you had in mind when building it.
“Photoshop is a dying product design tool. Designers moving our craft forward area unit moving between sketches, whiteboards and prototyping tools. This is one reason individuals say designers ought to code” (Paul Adams, The Dribbblisation Of Design).
We are wasting a lot of time on simulating something that can quickly and easily be built in the real thing. Everything you build in HTML is developable.
“HTML/CSS is real in a very means Photoshop can ne'er be.” (Why we tend to skip Photoshop — mythical being Fried)
Pixel perfection is a lie
There is no such thing as pixel-perfection. Layouts are looking differently on different devices, browsers and screens. Pixel-perfect is a lie. It is impossible to predict all possible use cases and to consider all possible kinds of content in your product.
It is associate degree superannuated conception that may in all probability been replaced
by the Atomic Design Proposal by Brad Frost.
We need to create realise that we tend to don't seem to be planning print merchandise for a final business. We do not print books.
This is why it is a waste of time creating huge Photoshop compositions of what a website could look like in pixel-perfect details and printing them in order to present them.
It is a media discontinuity: We need to make decisions on the right medium. Font-faces, colors and interactive parts don't seem to be displayable properly on paper. You get the look and feel of a book or a poster but not of a digital product. You are building a web product, not a book. Don’t fool yourself.
Working with code
It is no surprise that big companies like Google, Facebook and Pinterest are looking for designers with coding-experience in their job offers: Designers need to understand the medium they are working in. Realising, and not simply simulating, the own designs is one of the most important skills besides your design skills to develop great products.
You need to produce something that is shippable.
It is an indisputable fact that hypertext markup language and CSS square measure horribly straightforward description languages, easy to learn.
They are very well documented: You can find millions of helpful tutorials and instructions in the internet. And you can also copy a lot of existing code from others. There is no need to be a front-end professional. Quick and dirty prototypes are sufficient.
When it comes to special web techniques prototyping-tools will reach their limits. Think of Fluid Layouts, Responsive Design, Multi-Device Experiences, Fixed elements, CSS-Animations, Parallax-Scrolling, Scrolling-Position, TouchEvents, Retina Display support, Webfonts or Animations. You do not want another product like Photoshop that simulates websites. You cannot feel or build real web-experience with a prototyping tool that simulates the reality; you will lose the experience. Hand-coded prototypes are the real experience.
You can do prototyping on different devices with the look and feel of a real website.
Think of the fast iterations and changes you are able to do with code within seconds: You can change a link-colour, font-size and mouse-hover-effect in no time. You can add, duplicate and delete content with a few clicks. And it is easy to convert an HTML prototype into a style guide (Best practice: Starbucks) or to expand it with fancy web-technologies.
Leave your comfort zone
Designing digital merchandise User initial needs a totally completely different read on the look processes. Hand-coded prototypes based on the user‘s needs is one of the new work methods a designer must know. Classic web-design with a water style method is usually noncurrent. Iterative design based on the user’s needs is the new way of building meaningful digital products.
Designers will code
No doubt, there is a reason for Google & Co to hire code-experienced skilled designers. It does not matter if you are a Product Designer, UX Designer, Interaction Designer or a Visual Designer. You need to work interdisciplinary nowadays.
“Interactive style [is] a seamless mix of graphic arts, technology, and psychology” (Brad Wieners, Wired, 2002).
The new working methods demand changed design processes. It is a fact that designers will have to code. Designers and developers are not divided anymore. Both need to work interdisciplinary when it comes to build great, meaningful digital products.
It is a good idea to leave your comfort zone and start learning to code to know how the web you are designing work and to build prototypes for a real web experience and better outcomes. It is easy to learn and you will get success very soon.
0 Comments