Imagine you want to redesign your website or app and you start right away with the visual design. You take an incredible amount of time to implement and when it goes into feedback or directly online, it turns out that your ideas don’t quite pan out. So start over…<\/p>\n
Wireframes are a good intermediate step, because they give you the opportunity to efficiently capture your ideas in order to get feedback from users and other stakeholders early on.<\/p>\n
Therefore: Never skip wireframes! They enable an iterative conceptual design process.<\/p>\n
We recommend the following procedure for new products:<\/p>\n
- \n
- Scribbles (hand-drawn page sketches)<\/li>\n
- Rough concept (wireframe, e.g. created with tools like Axure or Balsamiq, which roughly depicts main content\/page structure\/user interactions)<\/li>\n
- Fine concept (wireframe, e.g. with tools like Axure or Balsamiq, which already depicts the website in great detail, but without visual design)<\/li>\n
- Prototype without visual design (preliminary versions with basic functionality – “click dummy”)<\/li>\n
- Mockup\/Design<\/li>\n
- Prototype with visual design (preliminary version with basic functionality and visual design)<\/li>\n<\/ol>\n
However, for existing or low-complexity products, individual steps can be omitted. At the latest, the prototype without visual design should be subjected to usability tests<\/a> in any case.<\/p>\n
For example: If the checkout of an existing online shop is to be optimized, the rough concept could be omitted. Depending on the extent of the optimizations, you may also no longer need mockups or a prototype with design. The prototype without visual design should be evaluated in a usability test and if the results are satisfactory, the developers can implement it directly in the existing design.<\/p>\n
Here you can find out more about which conception process we recommend.<\/a><\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_2″][et_pb_image src=”https:\/\/userlutions.com\/wp-content\/uploads\/2018\/08\/case-study-scribble.jpg” alt=”Concept step Scribbel” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on”]<\/p>\n
\n <\/p>\n
[\/et_pb_image][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]<\/p>\n
\nExample of the result of a scribble session<\/em><\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″][et_pb_image src=”https:\/\/userlutions.com\/wp-content\/uploads\/2018\/08\/case-study-design.jpg” alt=”Concept step Design” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on”]<\/p>\n
\n <\/p>\n
[\/et_pb_image][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]<\/p>\n
\nThe website in final design<\/em><\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Fehler 2: Kein Raster nutzen” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.3″]<\/p>\n
Error 2: Do not use a grid<\/h2>\n
Impact:<\/strong> Additional effort in later process steps<\/em><\/p>\n
Use a grid already in the rough concept, i.e. a system to which you align all elements of the website. This saves you the additional effort in the fine conception and guarantees a uniform appearance of the different pages at an early stage. They prevent the need to make fundamental changes to the layout at a later date. It also makes the work of the designers and developers easier, because they only have to transfer the concept into the design or the code.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2018\/08\/960Grid_Beispiel.png\")
<\/p>\nExample of the grid system of a website<\/em><\/p>\n<\/p>\n
Tips for choosing the right grid:<\/strong><\/p>\n<\/p>\n
- \n
- In most cases, it makes sense to choose an even number for the number of columns (e.g. 12, 16 or 24), as this allows the layout to adapt particularly well to different viewport sizes in the course of a responsive web design.<\/li>\n
- Usual total widths are 960 and 1140 px, whereas 960 px are no longer up-to-date<\/a> and the new 1140 px grid is ideal for current screen sizes from 1280 px. Wider layouts do not make any sense because the user then cannot see the entire width of the page at a glance.<\/li>\n<\/ul>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Fehler 3: Unrealistischen Content verwenden” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.3″]<\/p>\n
Mistake 3: Use unrealistic content<\/h2>\n
Impact:<\/strong> Greater time expenditure or loss of informative value<\/em><\/p>\n
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed … <\/em> If you write ‘headline’ everywhere in the concept instead of using realistic headlines, you run the risk of neglecting important requirements that the content places on the layout. In the worst case scenario, you don’t realize that the actual headings don’t even fit in the designated area until you’re entering the content.<\/p>\n
What now? Throw the whole layout out of the window or shorten the headlines and make them less meaningful? Better to work with real text content from the start.<\/p>\n
It doesn’t have to be the final content yet, but it should be realistic in terms of length and scale. It is the same with image content. Instead of placeholder boxes, you should work with realistic sample images. This allows you to test early on whether the images work in a particular format (for example, portrait or landscape, square or circle) and support the message or function of the page.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Fehler 4: Mobile vergessen” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.3″]<\/p>\n
Error 4: Forget about mobile (or desktop)<\/h2>\n
Impact:<\/strong> Loss of sales on the disregarded device<\/em><\/p>\n
Nowadays, websites must also function well on mobile – of course, this is no longer a secret. However, it is still often forgotten that the various devices should be taken into account at the design stage. By the way, it doesn’t matter if you follow the mobile-first approach<\/a> or not. Different devices use different screen sizes and interaction styles, which should not be ignored.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Fehler 5: Designprinzipien missachten” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.3″]<\/p>\n
Error 5: Disregard design principles<\/h2>\n
Impacts:<\/strong> Greater time required or loss of usability.<\/em><\/p>\n
When designing websites and apps, you should be familiar with key design principles, especially to create a visual hierarchy. The most important information on each page should be clearly highlighted. If you follow basic design principles at the conception stage, you will save yourself and your designer a lot of time.
Design principles that have to be considered already in the concept:<\/strong>
<\/p>\n- \n
- Low layout complexity:<\/strong> A layout that is as simple as possible allows users to find the information they are looking for much faster.<\/li>\n
- Visual hierarchy:<\/strong> It’s quite simple – what stands out, for example. by size, color, contrast or spatiality, people usually see first. Therefore, highlight the key information.<\/li>\n
- Grouping:<\/strong> This design principle is composed of proximity, connectedness and similarity. Elements that belong together in terms of content should also be linked visually, for example through their arrangement, headings, background, frames and spacing. Only then will they be perceived as belonging together.<\/li>\n
- White space:<\/strong> The omission of elements is also a design principle. It visually separates objects from other objects, thus giving them order and making them easier to grasp.<\/li>\n
- Simplicity:<\/strong> Keep it simple! – The best interface designs are often almost “invisible”, so unnecessary elements should be avoided.<\/li>\n<\/ul>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”1_2″][et_pb_image src=”https:\/\/userlutions.com\/wp-content\/uploads\/2018\/08\/ohne-designprinzipien.jpg” alt=”without design principles = chaos” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on”]<\/p>\n
\n <\/p>\n
[\/et_pb_image][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]<\/p>\n
without design principles<\/em><\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″][et_pb_image src=”https:\/\/userlutions.com\/wp-content\/uploads\/2018\/08\/designprinzipien.jpg” alt=”with design principles = order” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”off” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation_style=”none” animation_duration=”1000ms” animation_intensity_slide=”50%” show_bottom_space=”on”]<\/p>\n
\n <\/p>\n
[\/et_pb_image][et_pb_text background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid” background_position=”top_left” background_repeat=”repeat” background_size=”initial”]<\/p>\n
with design principles<\/em><\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Fehler 6: Kein User-Centered-Design” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.3″]<\/p>\n
Error 6: No user-centered design<\/h2>\n
Impact:<\/strong> Poor user experience and consequent loss of revenue.<\/em><\/p>\n
Even if you’ve sought regular feedback from your peers during the design process, you may still have left your users’ perspectives out of the equation. In this case, you probably won’t know how your users are taking to the new website or app until you go live – and in the worst case scenario, you’ll be terrifically wrong.<\/p>\n
That’s why you shouldn’t rely on gut instinct even for micro-decisions. All design decisions must be aligned with core principles and validated against personas, scenarios and use cases<\/a>.<\/p>\n
Together with usability tests of<\/a> the wireframes and the prototype, you can be sure to develop an interface that is tailored to the user and his tasks and needs.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Fehler 7: Konzeption ohne Feedback” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.3″]<\/p>\n
Error 7: Conception without user feedback<\/h2>\n
Impact:<\/strong> Poor user experience and consequent loss of revenue.<\/em><\/p>\n
Even though it’s already been mentioned a few times, this point deserves its own section: never design without user feedback! Our own perception can blind us quite a bit, and in case of doubt, it does not correspond to the view of your users.<\/p>\n
Therefore, to avoid developing your product past your customers, keep the following things in mind:
\n
<\/p>\n- \n
- Do not do rough drafts alone: In any case, conduct the first scribble session with at least two people. All parties involved must have a common understanding of the product and its users ( personas<\/a> help here).<\/li>\n
- Keep gathering user feedback in usability tests throughout the process.<\/li>\n
- Also, get internal feedback regularly to incorporate new perspectives.<\/li>\n<\/ul>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text admin_label=”Fehler 8: Unterschiedliche Zust\u00e4nde missachten” use_border_color=”off” background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.3″]<\/p>\n
Error 8: Disregard different states<\/h2>\n
Impacts:<\/strong> Increased time or loss of usability.<\/em><\/p>\n
Often it only becomes apparent during programming that essential states of the interface were forgotten during the conception, which leads to unexpected additional work.
\n
\nWhat you must not forget in any case during the conception:<\/strong>
\n <\/p>\n- \n
- Error messages:<\/strong> Sometimes people forget that a screen must also display error messages. These must be conceived and designed.<\/li>\n
- Blank screen state:<\/strong> Especially when developing tools, it is often not considered that a screen must also be designed for the blank state (e.g. for the beginning of the use of a tool).<\/li>\n
- Other states:<\/strong> Hover and disabled states, but also intended micro-interactions should already be considered in the concept. For example, it is useful for form screens to display all states in one screen.<\/li>\n<\/ul>\n
![\"\"](\"\/wp-content\/uploads\/2018\/08\/fehlermeldung-konzeption-1.jpg\")
<\/p>\nError message in our booking form<\/em><\/p>\n
\nNow, let’s go: Let’s go into practice! If you avoid these mistakes, nothing will stand in the way of a successful conceptual design project.<\/p>\nIf you are still unsure about how best to approach the development of your digital products, we will be happy to assist you with the conception of a prototype<\/a> or with interface design<\/a>.<\/p>\n
- Blank screen state:<\/strong> Especially when developing tools, it is often not considered that a screen must also be designed for the blank state (e.g. for the beginning of the use of a tool).<\/li>\n
- Visual hierarchy:<\/strong> It’s quite simple – what stands out, for example. by size, color, contrast or spatiality, people usually see first. Therefore, highlight the key information.<\/li>\n
- Low layout complexity:<\/strong> A layout that is as simple as possible allows users to find the information they are looking for much faster.<\/li>\n