{"id":3129,"date":"2024-11-14T20:03:45","date_gmt":"2024-11-14T20:03:45","guid":{"rendered":"http:\/\/eidersuso.net\/design\/?p=3129"},"modified":"2024-11-14T20:14:00","modified_gmt":"2024-11-14T20:14:00","slug":"branding-app-prototypes","status":"publish","type":"post","link":"http:\/\/eidersuso.net\/design\/2024\/11\/14\/branding-app-prototypes\/","title":{"rendered":"Branding: app &#038; web prototypes"},"content":{"rendered":"<p>When we are designing apps or websites it is very important to know what you need before you start designing and building it, so you don&#8217;t waste a lot of time. UX is the User Experience design that designs the experience the user will have, from scratch. UX Designers always start with paper. They create mockups and wireframes.<\/p>\n<p><strong>1. App design<\/strong><\/p>\n<p>When designing your app, it is nice to start with a paper prototype such as this, where you define the different screens before you start applying your brand.<\/p>\n<p><iframe loading=\"lazy\" title=\"Mobile Application Design : Paper Prototype Video\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/y20E3qBmHpg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Once it is all clear and makes sense, and you have made corrections easily, it is when you can start designing with a bit more detail.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3135\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Bandsintown-Mobile-App-Redesign-434x1024.jpeg\" alt=\"\" width=\"434\" height=\"1024\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Bandsintown-Mobile-App-Redesign-434x1024.jpeg 434w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Bandsintown-Mobile-App-Redesign-127x300.jpeg 127w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Bandsintown-Mobile-App-Redesign-651x1536.jpeg 651w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Bandsintown-Mobile-App-Redesign-210x496.jpeg 210w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Bandsintown-Mobile-App-Redesign.jpeg 736w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/p>\n\n<p>Once you have the flow of screens, you can start designing a few. Play with the colors of the brackground, the typefaces and the images you have. Try to keep it consistent. Here are some examples:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3130\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Intelly-Healthcare-App-UI-Branding.jpeg\" alt=\"\" width=\"735\" height=\"774\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Intelly-Healthcare-App-UI-Branding.jpeg 735w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Intelly-Healthcare-App-UI-Branding-285x300.jpeg 285w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Intelly-Healthcare-App-UI-Branding-210x221.jpeg 210w\" sizes=\"auto, (max-width: 735px) 100vw, 735px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3131\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Ragged-Edges-fun-identity-helps-position-Marshmallow-as-a-disruptive-brand.jpeg\" alt=\"\" width=\"734\" height=\"413\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Ragged-Edges-fun-identity-helps-position-Marshmallow-as-a-disruptive-brand.jpeg 734w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Ragged-Edges-fun-identity-helps-position-Marshmallow-as-a-disruptive-brand-300x169.jpeg 300w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Ragged-Edges-fun-identity-helps-position-Marshmallow-as-a-disruptive-brand-210x118.jpeg 210w\" sizes=\"auto, (max-width: 734px) 100vw, 734px\" \/><\/p>\n<p>Or you can create a wireframe kit: the different elements you will use for the different screens:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3136\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Contra-Open-Source-Wireframe-Kit-uistore_design-517x1024.jpeg\" alt=\"\" width=\"517\" height=\"1024\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Contra-Open-Source-Wireframe-Kit-uistore_design-517x1024.jpeg 517w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Contra-Open-Source-Wireframe-Kit-uistore_design-152x300.jpeg 152w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Contra-Open-Source-Wireframe-Kit-uistore_design-210x416.jpeg 210w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Contra-Open-Source-Wireframe-Kit-uistore_design.jpeg 736w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/p>\n<p>Canva offers some mobile prototype templates <a href=\"https:\/\/www.canva.com\/prototypes\/templates\/mobile\/\">you can use:<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3132\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.01.45-1024x529.png\" alt=\"\" width=\"720\" height=\"372\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.01.45-1024x529.png 1024w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.01.45-300x155.png 300w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.01.45-768x397.png 768w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.01.45-1536x794.png 1536w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.01.45-2048x1059.png 2048w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.01.45-210x109.png 210w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n\n<p><strong>2. Webdesign<\/strong><\/p>\n<p>When designing websites the process is similar, UX designers create wireframes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3137\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Sketched-Wireframe.jpeg\" alt=\"\" width=\"683\" height=\"1024\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Sketched-Wireframe.jpeg 683w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Sketched-Wireframe-200x300.jpeg 200w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Sketched-Wireframe-210x315.jpeg 210w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/p>\n<p>Once you have it you can design the website.<\/p>\n<p>You can define if your website will have multiple screens or it will be a infinite scroll.<\/p>\n<p>Can<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3138\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/9-Critical-Landing-Page-Design-Content-Elements-to-Boost-Website-Conversions.jpeg\" alt=\"\" width=\"736\" height=\"995\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/9-Critical-Landing-Page-Design-Content-Elements-to-Boost-Website-Conversions.jpeg 736w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/9-Critical-Landing-Page-Design-Content-Elements-to-Boost-Website-Conversions-222x300.jpeg 222w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/9-Critical-Landing-Page-Design-Content-Elements-to-Boost-Website-Conversions-210x284.jpeg 210w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><\/p>\n<p>Canva offers (again) many design templates you can use, but it is important that your work ends up looking like YOU want it and not what the canvas template looks like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3139\" src=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.12.53-1024x538.png\" alt=\"\" width=\"720\" height=\"378\" srcset=\"http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.12.53-1024x538.png 1024w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.12.53-300x157.png 300w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.12.53-768x403.png 768w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.12.53-1536x806.png 1536w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.12.53-2048x1075.png 2048w, http:\/\/eidersuso.net\/design\/wp-content\/uploads\/2024\/11\/Screen-Shot-2024-11-14-at-21.12.53-210x110.png 210w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we are designing apps or websites it is very important to know what you need before you start designing and building it, so you don&#8217;t waste a lot of time. UX is the User Experience design that designs the experience the user will have, from scratch. UX Designers always start with paper. They create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3131,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","has-thumbnail"],"_links":{"self":[{"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/posts\/3129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/comments?post=3129"}],"version-history":[{"count":3,"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/posts\/3129\/revisions"}],"predecessor-version":[{"id":3140,"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/posts\/3129\/revisions\/3140"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/media\/3131"}],"wp:attachment":[{"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/media?parent=3129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/categories?post=3129"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/eidersuso.net\/design\/wp-json\/wp\/v2\/tags?post=3129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}