{"id":19391,"date":"2018-10-02T13:40:59","date_gmt":"2018-10-02T13:40:59","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=19391"},"modified":"2018-10-02T13:40:59","modified_gmt":"2018-10-02T13:40:59","slug":"creating-front-end-prototypes-for-a-great-user-experience","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/","title":{"rendered":"Creating front-end prototypes for a great user experience"},"content":{"rendered":"

Static deliverables like wireframes and mockups often demonstrate the structure and aesthetics of an application but fall short of illustrating the feeling and emotion of it. In some cases, the final static deliverables always have to be adjusted due to technical restrictions or content changes. Other drawbacks are that microinteractions and animations are sometimes neglected during the whole design process, making the experience feel stale and unintuitive. From having an abundant amount of design artifacts to struggling to collaborate with other designers, there has to be a way for designers to compose every aspect of the experience without increasing the amount of time and energy to do so. Let\u2019s learn how front-end prototypes can be a great option for you and your team.\n<\/p>\n

\nA prototype is an effective method for designers to communicate and present ideas to stakeholders in an inexpensive way. The ability to combine different features into one prototype is a great way to tell the story from the user\u2019s perspective. Alastair Simpson from Atlassian said it best in his article “Why prototyping is a must for designers”<\/a>, which stated:\n<\/p>\n

\n

\u201cJust like a picture paints a thousand words, a prototype can paint a thousand user stories.\u201d<\/p>\n<\/blockquote>\n

The benefits of prototypes<\/h2>\n

In the case of digital products, the main purpose of a prototype is to have a sample application that can be used to test and validate early concepts of a feature. But why do we create prototypes? Here are a few reasons:<\/p>\n

Communicate ideas<\/em> \u2013 \u201cDon\u2019t tell them, show them\u201d is a great motto to have as a product designer. A prototype is a great way to communicate and sell concepts to others.\n<\/p>\n

Uncovering edge cases<\/em> \u2013 The earlier you discover edge cases, the cheaper it is to solve them. A prototype is an effective way to find them.\n<\/p>\n

Test usability early<\/em> \u2013 Having the ability to test and validate solutions early in the process will increase the chances of successful features.\n<\/p>\n

Display states<\/em> \u2013 When building complex applications, there will be many UI states like default, error, loading and interaction. Prototypes will allow you to display these states within the context of the user workflow.<\/p>\n

Types of prototypes<\/h2>\n

There isn\u2019t just one way to prototype. For digital products, there are three traditional ways it can be done:<\/p>\n

The paper prototype<\/h3>\n

\"An
An example of a paper prototype a colleague and me created for a calendar view<\/small><\/p>\n

The purpose of a paper prototype is to validate early and rough concepts. It\u2019s best to create these in the process with the whole team (designers, engineers, product managers and stakeholders).<\/p>\n

The lo-fidelity prototype<\/h3>\n

\"An
An example of a lo-fi prototype I created for a learning page<\/small><\/p>\n

The purpose of the lo-fidelity prototype is to validate the user journey and information architecture. This is where you start incorporating in content and putting together clickable screens.<\/p>\n

The hi-fi prototype<\/h3>\n

\"An
An example of a hi-fi prototype I created for a health insurance selection screen<\/small><\/p>\n

The purpose of the high-fidelity prototype is to validate the look and feel of the final designs. This where you want to nail down the visual direction of the feature with design elements such as colour, form, line, shape, space and typography.<\/p>\n

Common drawbacks<\/h2>\n

These methods help to validate solutions in their own way. But they all share common drawbacks. Here are the top three pain points:<\/p>\n

Creation of many artifacts<\/h3>\n

Have you ever questioned if the design you were viewing was the latest one? Or maybe you tried to version control your design files but ended up with a lot of files that no one would ever open again. I have over a decade of experience in this industry, and for me the hardest part is still categorising and organising artifacts. And this gets more difficult, the more designers work on the product.<\/p>\n

\"The
A visual illustrating the correlation between the feature roadmap and the number of designers (by Atif Azam<\/a>)<\/small><\/p>\n

The prototypes don\u2019t simulate the experience<\/h3>\n

The UI is just the tip of the iceberg in UX. Animation, microinteractions and performance all play key roles in the experience of the application. What all these prototypes fail to do is illustrate the feeling and emotion of an application. You could create microinteractions and animations in programs like InVision or Principal but the problem is that they might not look the same across different browsers and devices.<\/p>\n

Collaboration isn\u2019t easy<\/h3>\n

As a design team grows, there will be a time when multiple designers have to work on one feature. The problem is that there aren\u2019t many tools for designers to collaborate on the UI, UX and interaction design aspect in an efficient manner.<\/p>\n

Enter the front-end prototype<\/h2>\n

Before I tell you why front-end prototypes are awesome, let\u2019s define what they are.<\/p>\n

A front-end prototype is a prototype that has been built with HTML, CSS and JavaScript. The purpose is to demonstrate a realistic experience with data and content.<\/p>\n

Now let\u2019s talk about why they are so important.<\/p>\n

One master deliverable<\/h3>\n

The top benefit of a front-end prototype is having one master prototype that the design team can deliver to the engineering team. At any point a designer can branch off the master prototype and start building a new feature. Once the feature has been tested and validated, it can be merged back into the master prototype.<\/p>\n

\"Diagram
A diagram of a typical front-end prototyping process. As you can see, it\u2019s very similar to how engineers work<\/small><\/p>\n

Utilising real data and content<\/h3>\n

Another wonderful benefit is the ability to use real data and content in your designs. Do you remember those days of using Lorem Ipsum in your designs but when you got the real content, the design broke? You can save time and energy by using real data and designing around it. Users aren\u2019t using the application because of the beautiful UI design, they are using it because of the content it provides. There are two ways of incorporating real content into your prototypes: a static data file (in JSON) or an API. Both of these have their pros and cons, so choose the one that works best for your team.<\/p>\n

Designing the \u201creal\u201d experience<\/h3>\n

With a front-end prototype, you can design every nuance of the product. From loading animations to UI microinteractions, all of these can be designed to the smallest detail, which will make for a better product experience.<\/p>\n

Getting started with front-end prototyping<\/h2>\n

So you have decided you want to start front-end prototyping? Great! But where should you start? Here are the three foundations:<\/p>\n

Code conventions<\/h3>\n

Code conventions are a set of guidelines for how code should be written. Having these will make it easy for designers to jump in and out of projects, conduct efficient code reviews and develop faster.<\/p>\n

\"An
Mark Otto has created a great example of code conventions.<\/a><\/small><\/p>\n

Style guide<\/h3>\n

Once the code conventions have been set, you can start on the style guide. A style guide consists of branding guidelines that illustrate the look and feel of a product. Here is where you produce principles for design elements like colours, typography, buttons etc. For the code, I like using the Functional CSS<\/a> methodology (aka Atomic CSS) because you don\u2019t need to write new CSS to create the UI. Using a combination of CSS classes, you can create all the UI from markup.<\/p>\n

\"The
The style guide of the Sass-lang site<\/a><\/small><\/p>\n

Pattern library<\/h3>\n

Prototyping becomes much easier if you have a set of patterns you can use within the designs. A pattern library is a collection of reusable components. Here is where each pattern is documented to define the purpose, usage and variants (variations of the pattern).<\/p>\n

\"The
Pattern library for Lonely Planet<\/a><\/small><\/p>\n

Choosing your platform<\/h2>\n

\"Examples<\/p>\n

Once the foundation is all set, the next decision to make is what platform you want to build your prototype on top of. You have two options:<\/p>\n

Online playgrounds<\/em> like CodePen<\/a>, JSFiddle<\/a> and JS in<\/a>.<\/p>\n

Static site generators<\/em> like Jekyll<\/a>, Middleman<\/a> and Gatsby<\/a>.<\/p>\n

Online playgrounds would be a great option if you want to quickly prototype a single feature. If you want build whole workflows, use real data and have an effective artifact for user testing, static site generators are probably the better option (but keep in mind that, if you are using proprietary information, you probably can\u2019t use data on these platforms). There is a bunch of static generators you and your team can use, check out www.staticgen.com<\/a> to learn more about them.<\/p>\n

\"Screenshot
To see a ranking of static site generators, check out StaticGen<\/a><\/small><\/p>\n

The front-end prototyping process<\/h2>\n

The great thing about the front-end prototyping process is that it\u2019s pretty straightforward. Here are the three steps I usually follow:<\/p>\n

Import the data<\/h3>\n

After I go through a round or two of sketching and wireframing, I usually have an idea of what solution (or solutions) I want to explore further. The next step is to find the data I need and put them into a JSON (or YAML) file. For this example, we are going to build a page for the founding members of the Justice League.<\/p>\n

\"The
Content for the Justice League site<\/small><\/p>\n

Add content with markup<\/h3>\n

Once you got the data, it\u2019s time to import it into your markup. There are many ways to do this, but my favourite one is using the data each feature in HTML preprocessor Slim<\/a> to dynamically add data into your markup. The great thing about this is that it separates the markup from the content and keeps the markup super clean. From here, you can start structuring the content.<\/p>\n

\"Structuring
Structuring the content on the page<\/small><\/p>\n

Give it some style<\/h3>\n

Since we are using BEM<\/a>, it will be easy to scope our styles to the component. Let\u2019s say we want to give them a different colour border to make it easy to differentiate them from each other. A quick way to do that is to add a modifier with the character\u2019s name. To do that, you can add class=(\"hero__info-group info-group--#{hero.alias}\")<\/code> and then write styles for each of the characters (ie info-group--superman<\/code>, info-group--batman<\/code> or info-group--wonder-women<\/code>). The result is that each of them has the same structure with small style differences.<\/p>\n

Add some interactions<\/h3>\n

When your prototype has structure and style, you can focus on the interactions. This is what separates front-end prototypes from the rest of the prototyping methods: the ability to use realistic interactions and animations. You can adjust the interactions and design based on screen size, browser, internet speed and other things. For our example, I decided to apply a simple hover effect to each of the components:<\/p>\n

\"The
Incorporating interactions<\/small><\/p>\n

As products get more complex and teams get bigger, it\u2019s important to build products with the best user experience possible. Front-end prototypes allow designers to bring \u201cexperience\u201d to the user experience. When you combine front-end prototypes with the other prototyping methods, you will empower your designers to build every step of the experience, from concept to completion.<\/p>\n

Two rules to keep in mind<\/h2>\n

Front-end prototypes aren’t for every team, but if you do choose them, it\u2019s important to keep these rules in mind:<\/p>\n

Keep it simple<\/h3>\n

It\u2019s best to not over-complicate front-end prototypes. Speed is important when prototyping and if there is a lot of friction between the idea and implementation, it can lead to frustration and lost opportunities. When you are prototyping, the tools should be as frictionless as possible.<\/p>\n

Front-end prototype <> production application<\/h3>\n

If you want to maximise the benefits of front-end prototyping, there should be a relationship with the production application. One benefit could be the reuse of the CSS. This might be hard to do with BEM but it\u2019s possible with Functional CSS since the whole idea is to build UIs without writing new CSS. If you and your team can make that happen, it will reduce the time needed to build new features.<\/p>\n

If done well, a front-end prototype can be a great asset. Not only does it package all the design decisions into one deliverable and is a great asset for user testing, but it will also strengthen the relationship between design and engineering teams. If you are not using them now, try them out on a small scale and see if it’s a great fit for you and your team. Happy prototyping!<\/p>\n","protected":false},"excerpt":{"rendered":"

Front-end prototypes can help you create a great user experience. We explain why prototyping works, what tools you need to do it, and how you can make the most of the practice.<\/p>\n","protected":false},"author":2,"featured_media":19532,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-19391","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"\nCreating front-end prototypes for a great user experience - Heart Internet<\/title>\n<meta name=\"description\" content=\"Learn how to create front-end prototypes that will help you deliver a great user experience no matter what kind of website you're working on.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating front-end prototypes for a great user experience - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Learn how to create front-end prototypes that will help you deliver a great user experience no matter what kind of website you're working on.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-02T13:40:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1265\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"Creating front-end prototypes for a great user experience\",\"datePublished\":\"2018-10-02T13:40:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/\"},\"wordCount\":2058,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/\",\"name\":\"Creating front-end prototypes for a great user experience - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg\",\"datePublished\":\"2018-10-02T13:40:59+00:00\",\"description\":\"Learn how to create front-end prototypes that will help you deliver a great user experience no matter what kind of website you're working on.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg\",\"width\":1265,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating front-end prototypes for a great user experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating front-end prototypes for a great user experience - Heart Internet","description":"Learn how to create front-end prototypes that will help you deliver a great user experience no matter what kind of website you're working on.","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:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/","og_locale":"en_GB","og_type":"article","og_title":"Creating front-end prototypes for a great user experience - Heart Internet","og_description":"Learn how to create front-end prototypes that will help you deliver a great user experience no matter what kind of website you're working on.","og_url":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2018-10-02T13:40:59+00:00","og_image":[{"width":1265,"height":500,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"Creating front-end prototypes for a great user experience","datePublished":"2018-10-02T13:40:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/"},"wordCount":2058,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/","url":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/","name":"Creating front-end prototypes for a great user experience - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg","datePublished":"2018-10-02T13:40:59+00:00","description":"Learn how to create front-end prototypes that will help you deliver a great user experience no matter what kind of website you're working on.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/09\/prototyping-background.jpg","width":1265,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/creating-front-end-prototypes-for-a-great-user-experience\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating front-end prototypes for a great user experience"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/19391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=19391"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/19391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/19532"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=19391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=19391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=19391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}