{"id":4916,"date":"2019-10-01T10:28:47","date_gmt":"2019-10-01T09:28:47","guid":{"rendered":"https:\/\/uxstudioteam.com\/website\/?p=4916"},"modified":"2023-06-10T18:57:58","modified_gmt":"2023-06-10T17:57:58","slug":"screen-design","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/screen-design\/","title":{"rendered":"How to Start Screen Design and 8 Principles You Should Consider"},"content":{"rendered":"<p><span>Probably the most common question about UX is how to start screen design and what principles should we care about? <\/span><span>Designing screens starts with sketching. We at our\u00a0<a href=\"https:\/\/www.uxstudioteam.com\">UX company<\/a> start with quick paper sketches, then build wireframes and clickable prototypes, test and iterate them, and finally get to the pixel-perfect, detailed design plans. In this article, we present the 8 most important rules of thumb one needs to take into account when designing screens.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-10504 size-medium\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/How-to-Design-Screens-\u2013-The-Hateful-Eight-in-Screen-Design-720x405-720x405.jpg\" alt=\"Bad practices for Screen Design\" width=\"720\" height=\"405\" \/><\/p>\n<p><!--more--><\/p>\n<p><span>Eight basic principles of screen design:<\/span><\/p>\n<ol>\n<li><span>The three questions all screens need to give an answer to<\/span><\/li>\n<li><span>The importance of visual hierarchy<\/span><\/li>\n<li><span>The copy is part of the design<\/span><\/li>\n<li><span>Conventions are important, we should use them<\/span><\/li>\n<li><span>When designing for the mobile phone, we design for our hands, too<\/span><\/li>\n<li><span>Pay attention to the effective surface area ratio<\/span><\/li>\n<li><span>Aim at simplicity and transparency<\/span><\/li>\n<li><span>Be careful with animations and motion<\/span><\/li>\n<\/ol>\n<p><span>Let\u2019s have a look at these in more detail.<\/span><\/p>\n<h2><strong>1. Three guiding questions of screen design<\/strong><\/h2>\n<p><span>When we arrive at a new screen, we are looking for the answer to three questions:<\/span><\/p>\n<ul>\n<li><em><span>Where am I?<\/span><\/em><\/li>\n<li><em><span>What can I do here?<\/span><\/em><\/li>\n<li><em><span>How can I move forward?<\/span><\/em><\/li>\n<\/ul>\n<p><span>After arriving at a new screen, we instinctively take a look around to see <em>where<\/em> we are. Many clues help answer this question. <\/span><\/p>\n<p><span>For example, we may instantly see the logo of the page. Or, w<\/span><span>hen we are moving between pages within one application, similar structures, and colors may reassure us that we are on the right track. If we click on a link, and the text of the link is echoed in the title on the next page, we know we have arrived at the right place. It is also usually highlighted in the menu which page the user is on.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-10503\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/Business-Website-Design_Final-Design-720x508-720x508.png\" alt=\"Example of business website design screen\" width=\"720\" height=\"508\" \/><\/p>\n<p><span>The <em>\u201cWhere am I?\u201d<\/em> question seems too simplistic, but in many applications, the users don\u2019t get any feedback about what just happened. <\/span><\/p>\n<p><span>Just like when moving around in real life, in <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/digital-space\/\" target=\"_blank\" rel=\"noopener\">digital space<\/a>,\u00a0<\/span><span>they have to know what they reached at any given moment, what processes are going on or have ended. Applications which do not give continuous feedback about their status are very annoying to use.<\/span><\/p>\n<p><span>After coming to understand where I am, the next question is what I can do on this screen. <em>What<\/em> content can I see? <em>What<\/em> functions can I use? If I do not get a clear answer to this question, I would rather step back and retreat from the interface. The more things one is able to do on a screen, the more difficult it is to understand what the given page is for.<\/span><\/p>\n<p><span>Users usually find the answer to the third question (<em>\u201cHow can I move forward?\u201d<\/em>) in a form of a call-to-action button. They don\u2019t just ask this question having already played enough on the page and wanting to move forward \u2013 it&#8217;s useful at arrival, too, to see where we can go from there.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-15864 size-full\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/10\/NBC-example2.webp\" alt=\"case study news content screen design\" width=\"709\" height=\"357\" \/><\/p>\n<p><span>Most news pages get a passing grade on the three-question test. Let\u2019s take a look at NBC. When we arrive at the page, we instantly see in the upper left corner that we landed on the page named NBC News. From the way the content is displayed on the page, we immediately realize we are on a news page. It becomes obvious we can move forward by clicking on the titles.\u00a0<\/span><\/p>\n<h2><strong>2. Visual hierarchy and user experience<\/strong><\/h2>\n<p><span>Visual hierarchy is one of the most important parameters in screen design. We can rank the elements of a given screen according to how bold they are, how emphasized, and how easily we spot them. <\/span><\/p>\n<p>This is what we call visual hierarchy. The bold and highlighted elements are at the top of the hierarchy, and the tiny stashed elements are at the bottom.<\/p>\n<p><span>Visual hierarchy helps lead the eye. It determines what order we notice things. This is why it&#8217;s important to develop this hierarchy consciously. Think carefully about what the goal of a given page is, what the user wants to achieve, and what we want to call attention to. The previously introduced three questions can help you with this.<\/span><\/p>\n<p><span>The illustration which follows is a very simple school example of visual hierarchy: we read the title in capital letters before we read the text in brackets.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-10510 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/your-eyes-1.jpg\" alt=\"importance of hierarchy on interface design\" width=\"385\" height=\"179\" \/><\/p>\n<p><span>The hierarchy also helps to understand. When our eyes run through a river of concise text, there is no chance we will understand what it is about. If, however, we scan through a text full of subtitles, we get an idea from them about the content.<\/span><\/p>\n<h3>How do we create a visual hierarchy?<\/h3>\n<p><span>Most beginner web designers are only concerned with emphasizing certain elements. And it\u2019s even worse if they try to highlight too many elements. <\/span><\/p>\n<p><span>Unfortunately, only one or two elements can be at the top of the hierarchy, and it is up to us which these elements will be. To make the right decision, we need to know what the most important goal of the screen is.<\/span><\/p>\n<p><span>We can highlight certain elements like size, color, position, texture, form, and orientation.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-10506\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/orientation-1.jpg\" alt=\"shape and size for screen visual hierarchy\" width=\"556\" height=\"380\" \/><\/p>\n<p><span>Eye camera studies revealed precisely how we scan a page. When we arrive at a page, we browse through it twice from left to right at the top of the page, and then we scroll down. This is referred to as Nielsen F, as seen on the heat map image below:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-10497\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/058-Heatmap-720x334-1-720x334.jpg\" alt=\"design screen for better reading\" width=\"720\" height=\"334\" \/><\/p>\n<p><span>This also shows that things in the upper left corner are more likely noticeable. Also, the left column and the part above the fold (accessible without scrolling) are more emphasized.<\/span><\/p>\n<h2><strong>3. Copywriting is part of the design process<\/strong><\/h2>\n<p><span>Many designers think writing is not in their job description, but this could not be further from the truth. <strong>Copywriting is part of the design.<\/strong><\/span><\/p>\n<h3>Sketching the copy<\/h3>\n<p><span>During the screen design process, the best method for writing is similar to the one in the case of drawing: we need to make sketches first. In other words, you should write down at least 6-8 versions of the copy. <\/span><\/p>\n<p><span>If we are ready with that, we need to choose the best. It is worth spending time on formulating the text. The best results usually come out from melting the previous versions together.<\/span><\/p>\n<p><span>You should make your colleagues read the copy as well, so you will discover if something is incomprehensible or weird. It also helps a lot if you read it out loud. The most important goal of the copy is to be comprehensible. And we can ensure this one way only: if we test it with real users. We will talk about this more in the chapter about research. <\/span><\/p>\n<p><span>The next is to use the expressions people use during the tests. When doing <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/user-interviews\/\" target=\"_blank\" rel=\"noopener\">interviews<\/a>, we need to note the words used by our interviewees so that we can use their own words later in the product or marketing.<\/span><\/p>\n<h3>Microcopy &#8211; part of the screen design<\/h3>\n<p><span>We call the copy you can read on interfaces <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/microcopy\/\" target=\"_blank\" rel=\"noopener\"><em>microcopy<\/em><\/a>. <\/span>It&#8217;s the text on a button, a tiny piece of instructions, or the label on a form field.<\/p>\n<p><span>In our experience here at UX studio,\u00a0you should avoid using terminology as much as possible (except when designing only for professionals). An informal tone is useful, but do not exaggerate and become cheesy. <strong>Well-written microcopy has a human touch.<\/strong> It gives the feeling that there&#8217;s an actual person on the other side. In short: it builds trust.<\/span><\/p>\n<p><span>These principles of microcopy are relevant in any screen design scenario. The copy of a form should be encouraging. Assuring you that you don\u2019t need much to finish the form. <\/span><\/p>\n<p><span>Write error messages with empathy and solidarity. Be careful with being funny in a stressful situation, and never blame your users. There always has to be a sense of us all being in it together. And don\u2019t forget to offer a <em>solution<\/em>.<\/span><\/p>\n<h3>Create a style guide<\/h3>\n<p><span>If there is more than one person writing a copy for the same product, you should create a short style guide that describes the tone of voice they should use. You can collect adjectives and list a few good and bad examples. <\/span><\/p>\n<p><span>It\u2019s also useful to search for other websites or blogs with the same tone of voice and read them frequently. When you have to write, you can hit them up to get in the mood. Granted, the <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/ux-copywriting\/\" target=\"_blank\" rel=\"noopener\">copy also needs testing.<\/a><\/span><\/p>\n<p>Microcopy is just a few words but with a huge impact. That&#8217;s why many people think <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/ux-writing\/\" target=\"_blank\" rel=\"noopener\">UX writing is the new superpower<\/a>.<\/p>\n<h2><strong>4. Use conventions!<\/strong><\/h2>\n<p><span>The web and the mobile world are the most recent achievements of humankind, but even during this short period of time, plenty of solutions were born, which the majority of apps use in general. These de facto standard solutions are called conventions.<\/span><\/p>\n<h3>Conventions for better user experience<\/h3>\n<p><span>Conventions in screen design are like this: &#8220;logo goes in the upper left corner&#8221;, &#8220;links should be in blue&#8221;, the &#8220;links should be underlined,&#8221; etc.\u00a0<\/span><\/p>\n<p><span>Most users are already used to these conventions. <strong>We use them because they shorten the learning curve.<\/strong> Solutions different from conventions usually get on people\u2019s nerves.<\/span><\/p>\n<h3>Innovation versus convention<\/h3>\n<p><span>People often ask if this contradicts innovation. The answer is simple. It is <em>not<\/em> the conventions you need to be innovative about. We don\u2019t have to reinvent the wheel, and we don\u2019t have to change proven, tested things. We should build new castles with these building blocks instead.<\/span><\/p>\n<p><span>The illustration shows an old and a new screen design of <a href=\"https:\/\/www.amazon.com\/\" target=\"_blank\" rel=\"noopener\">Amazon<\/a>. Note how many interfacial elements we are still using today (links, tabs, search box, basket, drop-down menu).<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-10500 size-medium aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/69-Amazon-1-720x365-1-720x365.png\" alt=\"screen design principles - old amazon home search screen\" width=\"720\" height=\"365\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-4923 size-medium\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/060-Amazon-2-720x301.png\" alt=\"amazon search screen design example\" width=\"720\" height=\"301\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/060-Amazon-2-720x301.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/060-Amazon-2-768x321.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/060-Amazon-2-1024x429.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/060-Amazon-2-1080x452.png 1080w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/060-Amazon-2.png 1326w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<h2><strong>5. When designing for touch, we design for our hands (too)<\/strong><\/h2>\n<p><span>When designing for touch screens, the most important parameter is our own hand, with which we are using the product. We can only design an easy-to-use interface if we take into account the size of our hands and how they function. <\/span><\/p>\n<p><span>We especially have to pay attention to the size and movement of our fingers: what can we reach and when can we safely tap on certain buttons?<\/span><\/p>\n<h3>Can we safely tap on a button?<\/h3>\n<p><span>Let\u2019s start with the latter. When we tap on something, our finger covers a fairly large space on the screen. In order to feel it is safe to click, we have to have only one thing under our fingers when we click. If our finger covers more elements, we will feel discomfort because we can never be sure enough about what we clicked on.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-10509 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/tap-area-1.jpg\" alt=\"good mobile ui screen design tap area\" width=\"546\" height=\"341\" \/><\/p>\n<p><span>If we study a modern phone\u2019s screen and look at how many times our thumb fits the screen breadthwise, we see that we can put 4 clickable things in one row.<\/span><\/p>\n<h3>Can our fingers reach the button?<\/h3>\n<p><span>Another interesting point is reachability, namely, what we can reach with our fingers. There has been an observational study: notes were made about people walking on the street and holding their phones. There were three basic positions \u2013 nothing new here.<\/span><\/p>\n<p><span>The first is when we hold our phones with one hand. The sub-versions are supporting the phone with our small finger and one where we hold the phone fully. The small finger support gives a sense of safety, but in return, we can only reach the lower bottom of the screen.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10505 size-full\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/onehand-1.jpg\" alt=\"touch screen design for all sizes with one hand \" width=\"540\" height=\"378\" \/><\/p>\n<p><span>Another position is holding onto the phone with both hands. This way, we are safe because of the helping hand, but in return, we do not always have the possibility to hold it in both hands.<\/span><\/p>\n<p>The third version: both hands holding the phone at the same time and both thumbs used at the same time.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-10498\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/064-reachability-two-hands-landscape-720x509-1-720x509.jpg\" alt=\"\" width=\"720\" height=\"509\" \/><\/p>\n<p><span>The illustrations above show which areas we can easily reach and which not at all. The following diagram illustrates which was the most common holding position among people on the street, besides listening to music and speaking on the phone. It may not be so surprising that the one-hand position won.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-10508\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2018-05-12-at-18.57.25-1.png\" alt=\"flexible design for touch screen\" width=\"400\" height=\"484\" \/><\/p>\n<p><span><strong>When designing for mobile, we cannot know how the users will hold the phone<\/strong>, so it is worth creating interfaces that can be used in the majority of cases. In other words, we should not design clickable elements which aren&#8217;t reachable in certain positions. Looking at all the illustrations, this is the upper-left part of the screen and the lower right corner, which is only reachable by bending the thumb uncomfortably.<\/span><\/p>\n<h3>Growing screen sizes<\/h3>\n<p><span>The situation is even more nuanced if we look at how these positions have changed due to the growing size of phones. Reachable spaces are becoming smaller on large screens. We have to get our second hand in to reach things in the upper third of the screen.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-10502 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/big-screens-1.jpg\" alt=\"reachable area for design screens\" width=\"500\" height=\"291\" \/><\/p>\n<p><span>Consequently, the screen design needs have to be controllable from the lower half of the screen. Frequently used functions should not appear on top of the screen.<\/span><\/p>\n<p>Want to learn about the specific challenges of designing <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/text-free-interfaces\/\">text-free interfaces<\/a>? Read our designer Luca&#8217;s take on the subject!<\/p>\n<h2><strong>6. Effective surface area ratio<\/strong><\/h2>\n<p><span>During the screen design process, we have to work with the space at our disposal. The first obvious question to answer is for what device we should design, which depends on who we are designing our screens for (design for your audience first, the masses second).\u00a0 <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/responsive-web-design-services\/\">Responsive web design<\/a> and development help solve the old dilemmas of what is the most common screen size for website design or mobile.\u00a0<\/span><\/p>\n<p><span>The aim of the game is to see <em>which<\/em> content element appears <em>where<\/em>\u00a0<em>in what form<\/em> and<em> how big<\/em> of a space it takes up. Note how small the effective surface area ratio is on a given screen! We grayed out areas on a news page showing you the content, which is not the priority.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-10499\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/067-useful-content-720x373-1-720x373.jpg\" alt=\"screen design content optimal location\" width=\"720\" height=\"373\" \/><\/p>\n<p><span>Menu or sharing buttons are only secondary functions on this page. Nobody arrives at this page to read the menu. Visitors come to read the articles. Consequently, everything else is a \u201cnecessary evil\u201d, especially when we open the page.<\/span><\/p>\n<h2><strong>7. Simple and clear screens<\/strong><\/h2>\n<p><span>The best user-friendly interfaces are simple and clear. Interfaces like these are easy to understand, people get familiar with them easily, get used to using them, and feel joy when opening them the next time, too.<\/span><\/p>\n<p><span>This simplicity in screen design is not easy to reach, though. In a design project, new ideas and new information need\u00a0to appear on the interface appear one after the other. It may be the case that the different departments of the company (or the different participants in the project) consider different things to be important to appear.<\/span><\/p>\n<h3>The designer&#8217;s responsibility<\/h3>\n<p><span>The responsibility of the designer is to govern the participants during the planning phase to achieve a clear, easy-to-understand interface. You probably guessed that in the majority of cases, this is only possible if the designer reaches a consensus among the participants which makes this possible. This is a diplomacy or management task but still remains the designer\u2019s task.<\/span><\/p>\n<p><span>But what do you need to make all this possible? First of all, straightforward business objectives and a very clear idea of what the given product\u2019s goal is. If we have these, the interfaces can be easily managed. Then, it&#8217;s also more simple to determine which elements are important and which are not so much.<\/span><\/p>\n<h3>Defining goals<\/h3>\n<p><span>Not knowing what the product is for may appear as a huge problem for the first time during the design of the interfaces. It is the designer\u2019s responsibility to realize that this is the real reason for problems and to convince others to step back and establish the main goals.<\/span><\/p>\n<p><span>The designer\u2019s second important task is to educate other team members continuously. He needs to explain the difference between a packed screen and a beautiful sleek minimalist screen. The designer is the one to dismiss ideas and manage related fears. (<\/span><span>For example, a huge logo at the third step of the sign-up process is not relevant since branding doesn\u2019t happen here.)<\/span><\/p>\n<h3>An example of setting user goals<\/h3>\n<p><span>An example: the next picture shows two different versions of a mobile application screen. <\/span><\/p>\n<p><span>At first glance, the screen design on the left seems a bit more exciting due to the colorful icons, but when we try to understand exactly what the page is for, the one on the right is more useful. <\/span><span>Here the same content appears in a more clear and simple structure. <\/span><\/p>\n<p><span>Note the difference between the two screens and how the one on the right achieved this:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-10507\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/quideo-1-720x617-1-720x617.jpg\" alt=\"app design screen example\" width=\"720\" height=\"617\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>8. Motion and Animations<\/strong><\/h2>\n<p><span>UI animations are one of the most controversial areas of screen design. Many people just want to use animations because they look cool. I don\u2019t recommend that. Others use them to communicate how the interface works or have some <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/emotional-design\/\" target=\"_blank\" rel=\"noopener\">emotional<\/a> impact on the users. <\/span><\/p>\n<p><span>Google\u2019s <a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noopener\">material design guide<\/a> has a wise, moderate standpoint of animations, but even some Google products use them so heavily, it is annoying.<\/span><\/p>\n<p><span>The first and most important rule: <strong>don\u2019t use animations for just the sake of animations.<\/strong> People are wired to focus on moving objects. We needed this reflex to survive when a tiger surprised us in the jungle. <\/span><\/p>\n<p><span>It\u2019s easy to distract people with some moving objects from their original goals. So you have to be very careful with motion and use it with purpose. Every animation has to be meaningful.\u00a0<\/span><\/p>\n<p><span>Animations can explain how your interface works. One of the well-known examples is how you minimize the window in your desktop operating system. The window shrinks down to an icon on the tray, so you will know where to find it later.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-10501\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/069-minimize-animation-720x405-1-720x405.jpg\" alt=\"macOS screen animation\" width=\"720\" height=\"405\" \/><\/p>\n<p><span>When you select an item on a list, it can grow and expand to full screen. This animation will tell the users that they see the detailed view of the same element. <\/span><\/p>\n<p><span>In many mobile applications, the menu slides in from the left side of the screen, and it hides back there too. The sliding animation shows where the menu panel is, and it teaches us to swipe from the left to get it back.<\/span><\/p>\n<p><span>Animations can also add to the character of your application. Cartoon animators are very good at expressing feelings with just the motion of characters. <\/span><\/p>\n<p><span>You can also do movement in a playful, aggressive, or modest way. This can amplify the style of your app. But still: be careful. <\/span><strong>As always in design, less is more. Keep animations for the best moments only.<\/strong><\/p>\n<h3><strong>Take the next step to improve your website\u2019s UX<\/strong><\/h3>\n<p>UX studio has successfully handled 250+ collaborations with clients worldwide.<\/p>\n<p>Is there anything we can do for you at this moment?\u00a0<a href=\"https:\/\/uxstudioteam.com\/contact\/\">Get in touch with us<\/a>, and let\u2019s discuss your current challenges.<\/p>\n<p>Our experts would be happy to assist with the UX strategy, product and user research, and UX\/UI design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Probably the most common question about UX is how to start screen design and what principles should we care about? Designing screens starts with sketching. We at our\u00a0UX company start with quick paper sketches, then build wireframes and clickable prototypes, test and iterate them, and finally get to the pixel-perfect, detailed design plans. In this&hellip;<\/p>\n","protected":false},"author":2,"featured_media":10568,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[25,28],"tags":[90,91,87,89,86,88,61,39],"table_tags":[],"coauthors":[59],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>8 Principles of Screen Design in 2023 (with Examples) - UX studio<\/title>\n<meta name=\"description\" content=\"It&#039;s everything that you need to know about screen design. 8 basic principles to follow in 2023 when screen design comes to your mind.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Start Screen Design and 8 Principles You Should Consider\" \/>\n<meta property=\"og:description\" content=\"It&#039;s everything that you need to know about screen design. 8 basic principles to follow in 2023 when screen design comes to your mind.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/\" \/>\n<meta property=\"og:site_name\" content=\"UX Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxstudio.hu\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-01T09:28:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-10T17:57:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/screen-design-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"D\u00e1vid P\u00e1sztor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"D\u00e1vid P\u00e1sztor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/screen-design\/\"},\"author\":{\"name\":\"D\u00e1vid P\u00e1sztor\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/4c38454adf7672a41b8fb21b3540a139\"},\"headline\":\"How to Start Screen Design and 8 Principles You Should Consider\",\"datePublished\":\"2019-10-01T09:28:47+00:00\",\"dateModified\":\"2023-06-10T17:57:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/screen-design\/\"},\"wordCount\":3132,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"keywords\":[\"app design\",\"desktop\",\"interface design\",\"mobile app\",\"screen design\",\"UI\",\"ux\",\"ux team\"],\"articleSection\":[\"Mobile UX\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/screen-design\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/\",\"name\":\"8 Principles of Screen Design in 2023 (with Examples) - UX studio\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2019-10-01T09:28:47+00:00\",\"dateModified\":\"2023-06-10T17:57:58+00:00\",\"description\":\"It's everything that you need to know about screen design. 8 basic principles to follow in 2023 when screen design comes to your mind.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Start Screen Design and 8 Principles You Should Consider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"name\":\"UX Studio\",\"description\":\"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics\",\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\",\"name\":\"UX studio\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"contentUrl\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"width\":1000,\"height\":1000,\"caption\":\"UX studio\"},\"image\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxstudio.hu\/\",\"https:\/\/twitter.com\/UXstudio\",\"https:\/\/www.instagram.com\/uxstudioteam\/\",\"https:\/\/www.linkedin.com\/company\/uxstudio\/\",\"https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/4c38454adf7672a41b8fb21b3540a139\",\"name\":\"D\u00e1vid P\u00e1sztor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/cc28750681e5f826b93c7e39e8212cb1\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/david-150x150.jpg\",\"contentUrl\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/david-150x150.jpg\",\"caption\":\"D\u00e1vid P\u00e1sztor\"},\"description\":\"Founder and CEO of UX studio. Author of the book Product Design, TEDx speaker, one of Forbes 30 under 30. Enthusiastic about self-managing teams, new technologies and human-centered design.\",\"sameAs\":[\"http:\/\/uxstudioteam.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"8 Principles of Screen Design in 2023 (with Examples) - UX studio","description":"It's everything that you need to know about screen design. 8 basic principles to follow in 2023 when screen design comes to your mind.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/","og_locale":"en_US","og_type":"article","og_title":"How to Start Screen Design and 8 Principles You Should Consider","og_description":"It's everything that you need to know about screen design. 8 basic principles to follow in 2023 when screen design comes to your mind.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2019-10-01T09:28:47+00:00","article_modified_time":"2023-06-10T17:57:58+00:00","og_image":[{"width":640,"height":360,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/06\/screen-design-featured.jpg","type":"image\/jpeg"}],"author":"D\u00e1vid P\u00e1sztor","twitter_card":"summary_large_image","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"D\u00e1vid P\u00e1sztor","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/screen-design\/"},"author":{"name":"D\u00e1vid P\u00e1sztor","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/4c38454adf7672a41b8fb21b3540a139"},"headline":"How to Start Screen Design and 8 Principles You Should Consider","datePublished":"2019-10-01T09:28:47+00:00","dateModified":"2023-06-10T17:57:58+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/screen-design\/"},"wordCount":3132,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"keywords":["app design","desktop","interface design","mobile app","screen design","UI","ux","ux team"],"articleSection":["Mobile UX","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/screen-design\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/","name":"8 Principles of Screen Design in 2023 (with Examples) - UX studio","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2019-10-01T09:28:47+00:00","dateModified":"2023-06-10T17:57:58+00:00","description":"It's everything that you need to know about screen design. 8 basic principles to follow in 2023 when screen design comes to your mind.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/screen-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"How to Start Screen Design and 8 Principles You Should Consider"}]},{"@type":"WebSite","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","name":"UX Studio","description":"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics","publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization","name":"UX studio","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","contentUrl":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","width":1000,"height":1000,"caption":"UX studio"},"image":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxstudio.hu\/","https:\/\/twitter.com\/UXstudio","https:\/\/www.instagram.com\/uxstudioteam\/","https:\/\/www.linkedin.com\/company\/uxstudio\/","https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/"]},{"@type":"Person","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/4c38454adf7672a41b8fb21b3540a139","name":"D\u00e1vid P\u00e1sztor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/cc28750681e5f826b93c7e39e8212cb1","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/david-150x150.jpg","contentUrl":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/david-150x150.jpg","caption":"D\u00e1vid P\u00e1sztor"},"description":"Founder and CEO of UX studio. Author of the book Product Design, TEDx speaker, one of Forbes 30 under 30. Enthusiastic about self-managing teams, new technologies and human-centered design.","sameAs":["http:\/\/uxstudioteam.com"]}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/4916"}],"collection":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=4916"}],"version-history":[{"count":32,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/4916\/revisions"}],"predecessor-version":[{"id":15866,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/4916\/revisions\/15866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/10568"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=4916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=4916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=4916"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=4916"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=4916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}