{"id":10851,"date":"2011-12-13T21:01:40","date_gmt":"2011-12-13T13:01:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10851"},"modified":"2023-12-28T02:01:09","modified_gmt":"2023-12-27T18:01:09","slug":"make-images-informative-techniques","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/","title":{"rendered":"6 Strategies for Creating Engaging and Informative Product Graphics"},"content":{"rendered":"

Note:<\/strong> This post was first published on the Dec 13, 2011.<\/p>\n

Web designers have mastered the art of using marketing techniques<\/a> effectively. While captivating textual content is important, images play a crucial role in catching your visitors\u2019 attention. Unlike demo videos, they don\u2019t need sound and can convey crucial information in just seconds. Crafting informative images for websites involves several key techniques.<\/p>\n

These techniques range from highlighting features, zooming in on screenshots, making price comparisons, to showcasing other detailed aspects. Web designers often employ information graphics to showcase a variety of products like new apps, software, video games, and more, especially in technology fields.<\/p>\n

Below, we\u2019ll share tips and real-life examples of stunning product graphics that are both beautiful and information-rich.<\/p>\n

1. Enhance Your Content with Images<\/h2>\n

Informative images should complement, not replace, your webpage content. They should highlight key points<\/strong> and make them more understandable<\/strong> to your audience. For instance, creating a mini-demo to pinpoint crucial elements in a tutorial can significantly maintain your reader\u2019s interest. With a blend of informative graphics and screenshots, explaining each step becomes much easier.<\/p>\n

Demonstrating software tutorials, like Photoshop tutorials<\/a>, can be challenging in text alone. Visitors often form quick first impressions of your content. Web Designer Wall\u2019s tutorial on creating CSS3 rounded images<\/a> is an excellent example, featuring a useful graphic with labels and a close-up of the effect.<\/p>\n

\"Web<\/figure>\n

This image on the original article page offers a clearer idea of the end result. Including a small demo link along with demo images is a smart move. You\u2019re more likely to engage your audience with a well-labeled demonstration shot.<\/p>\n

\"WoorkUp<\/figure>\n

Avoid using images just to fill space in your post. Start by explaining your methods or ideas without visuals. Then, review your content and add detailed graphics where necessary, especially if a tutorial becomes more complex and needs visual aids. Examples could include creating a website database or designing table datasets.<\/p>\n

2. Emphasize Key Features<\/h2>\n

With the plethora of features in each software or technology, it\u2019s impractical to detail each one. Overloading your graphic with too many labels can overwhelm visitors. It\u2019s better to focus on the most interesting features<\/strong> and use labels for deeper explanations<\/strong>.<\/p>\n

When crafting label content, steer clear of boring language<\/strong>. For example, if you\u2019re showcasing an application\u2019s latest version, trivial changes like color schemes might not intrigue your audience. Instead, focus on benefits<\/strong> like a new interface panel or multi-user connectivity. These are abstract features<\/strong> that are not immediately apparent just by looking at the product.<\/p>\n

\"Postbox<\/figure>\n

Explaining these features clearly can significantly influence visitor response. It makes them feel respected as savvy consumers, potentially nudging them towards purchasing your software or product.<\/p>\n

An illustrative example is the Mozilla Firefox update page<\/a>.<\/p>\n

\"Firefox<\/figure>\n

The design uses dotted lines to draw attention to new features. All label text is in HTML tags, not just a single image, making it more accessible for search engines and mobile users.<\/p>\n

Also, note the \u201cLearn More\u201d link with the Panorama feature. This is a best practice for information graphics, offering deeper insights into complex features on a different page.<\/p>\n

Informative graphics should tease and showcase product features, providing opportunities to explore more in-depth information on external pages.<\/p>\n

3. Clear and Subtle Labels<\/h2>\n

Labels<\/strong> play a crucial role in informative product graphics. They help visitors understand different aspects of your product, whether it\u2019s software, websites, or mobile apps. While tables and lists have their place, detailed labels become necessary for explaining product features. Identifying key areas for labeling<\/strong> is essential.<\/p>\n

\"Apple<\/figure>\n

Apple\u2019s approach<\/a> to labels exemplifies simplicity and effectiveness, a technique evident across their product range. While their features and specs are similar to other brands, Apple\u2019s graphic presentation is exceptionally compelling.<\/p>\n

Simplifying the process is key. Product graphics are an integral part of website design, applicable across diverse products, from fertilizer to bed sheets to trading cards. While Apple excels in simple yet effective graphics, they\u2019re not alone. Exploring businesses within your niche can reveal various approaches to informative labeling and graphics.<\/p>\n

4. Dynamic Content in Imagery<\/h2>\n

For web developers who want to go beyond a simple labeled graphic, creating a dynamic and interactive experience can be key. Imagine designing a series of steps<\/strong> to guide visitors through a mini product demo on a small section of your webpage.<\/p>\n

\"Newsberry<\/figure>\n

The website of Newsberry<\/a> serves as a great example. Their homepage features a section with mini-navigation, showcasing a five-step process with different screenshots and descriptions. This introductory content<\/strong> is designed to clearly explain the product\u2019s purpose and functionality, complete with demo links.<\/p>\n

\"4th<\/figure>\n

As you browse through their content, you\u2019ll notice many slides display screenshots within a browser frame. This is a simple yet effective way to present web application screens, using a background image to encase your screenshots.<\/p>\n

5. Vivid Screenshots and Product Photos<\/h2>\n

Even with excellent labels and features, the quality of screenshots and photos<\/strong> is crucial for showcasing your product effectively. With tools available on Windows and Mac OS X, capturing high-quality screenshots is straightforward. Pairing these with editing tools like Photoshop, you can create engaging feature demos.<\/p>\n

\"Key<\/figure>\n

For complex products, consider assembling a series of images<\/strong>. Take the example from Tweetbot\u2019s website<\/a>, where blue circles indicate interactive elements in the app. Instead of a cluttered single image, a jQuery image gallery<\/a> can be used to showcase multiple aspects of your product, providing a richer experience for visitors.<\/p>\n

After capturing screenshots at 100% zoom, you might face challenges fitting them into your website\u2019s layout. A solution is to use magnification<\/strong> to scale down the overall image while highlighting key areas in detail, a technique more common in software than physical products. Below, I\u2019ll detail how to create this effect.<\/p>\n

6. Creating a \u201cZoom Lens\u201d Effect<\/h2>\n

Let\u2019s explore how to create a magnifying glass effect in Adobe Photoshop. This effect can be replicated in other graphics editors, though the steps may vary slightly.<\/p>\n

\"Things<\/figure>\n

A prime example is the Things for Mac<\/a> app homepage. Here, the app is scaled down with a drop shadow, but key areas are magnified within a circle, simulating a lens effect with added inner glow for realism. This technique effectively highlights important features while fitting within the webpage\u2019s layout.<\/p>\n

Bonus: \u201cZoom Lens\u201d Effect Photoshop Tutorial<\/h2>\n

Start by selecting a screenshot for your graphic. After cropping it to focus on the desired area and resizing to fit your website\u2019s content area, create a new layer above this background. Make a circular selection (holding shift for proportion) and fill it with any color.<\/p>\n

\"Photoshop<\/figure>\n

Step 1<\/h3>\n

With the circle still selected, reduce the fill percentage to 0% in the layers panel. Add a 1px-2px black stroke and a white inner glow under layer FX. Adjust the opacity to control the lighting effect.<\/p>\n

\"Photoshop<\/figure>\n

Step 2<\/h3>\n

On your background layer, with the circle still selected, copy the area using ctrl<\/span> (For Mac users, it\u2019s command<\/span>\/cmd<\/span> key<\/em>) + c<\/span>. Create a new layer between the background and magnifying circle, and paste. You can also duplicate the layer with ctrl<\/span>+j<\/span>. Use ctrl<\/span> + t<\/span> to open the transform tool and scale the new layer, maintaining proportions with shift<\/em> and center with alt<\/em>.<\/p>\n

\"Photoshop<\/figure>\n

Step 3<\/h3>\n

Reactivate the circle selection on the magnifying glass layer, ensuring you\u2019re on the duplicated background layer. Invert the selection with Ctrl<\/span> + Shift<\/span> + i<\/span> and delete the excess. Add a drop shadow from the layer FX menu for added effect. You can also draw a thin line and use the Liquify Filter (Filter > Liquify<\/em>) to create a handle.<\/p>\n

\"Photoshop<\/figure>\n

Conclusion<\/h2>\n

To create compelling product graphics, remember the basics: visitors want to quickly grasp what you\u2019re selling. The clearest way to convey this is through well-crafted screenshots or detailed graphics, with labels as a secondary but crucial element to highlight key features.<\/p>\n

Combining these techniques can lead to greater visibility and conversion, especially when featured prominently on your homepage. These strategies are ideal for those starting in graphic and web design. While we\u2019ve covered several ideas, we\u2019re eager to hear your insights and experiences in the discussion area below!<\/p>","protected":false},"excerpt":{"rendered":"

Note: This post was first published on the Dec 13, 2011. Web designers have mastered the art of using marketing techniques effectively. While captivating textual content is important, images play a crucial role in catching your visitors\u2019 attention. Unlike demo videos, they don\u2019t need sound and can convey crucial information in just seconds. Crafting informative…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[1864,2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n6 Strategies for Creating Engaging and Informative Product Graphics - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: This post was first published on the Dec 13, 2011. Web designers have mastered the art of using marketing techniques effectively. While captivating\" \/>\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.hongkiat.com\/blog\/make-images-informative-techniques\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Strategies for Creating Engaging and Informative Product Graphics\" \/>\n<meta property=\"og:description\" content=\"Note: This post was first published on the Dec 13, 2011. Web designers have mastered the art of using marketing techniques effectively. While captivating\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-12-13T13:01:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-27T18:01:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/product-graphics\/wdw-tutorial-graphic-details.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"6 Strategies for Creating Engaging and Informative Product Graphics\",\"datePublished\":\"2011-12-13T13:01:40+00:00\",\"dateModified\":\"2023-12-27T18:01:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/\"},\"wordCount\":1327,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/product-graphics\\\/wdw-tutorial-graphic-details.jpg\",\"keywords\":[\"Graphic Design\",\"Website Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/\",\"name\":\"6 Strategies for Creating Engaging and Informative Product Graphics - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/product-graphics\\\/wdw-tutorial-graphic-details.jpg\",\"datePublished\":\"2011-12-13T13:01:40+00:00\",\"dateModified\":\"2023-12-27T18:01:09+00:00\",\"description\":\"Note: This post was first published on the Dec 13, 2011. Web designers have mastered the art of using marketing techniques effectively. While captivating\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/product-graphics\\\/wdw-tutorial-graphic-details.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/product-graphics\\\/wdw-tutorial-graphic-details.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/make-images-informative-techniques\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"6 Strategies for Creating Engaging and Informative Product Graphics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"6 Strategies for Creating Engaging and Informative Product Graphics - Hongkiat","description":"Note: This post was first published on the Dec 13, 2011. Web designers have mastered the art of using marketing techniques effectively. While captivating","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.hongkiat.com\/blog\/make-images-informative-techniques\/","og_locale":"en_US","og_type":"article","og_title":"6 Strategies for Creating Engaging and Informative Product Graphics","og_description":"Note: This post was first published on the Dec 13, 2011. Web designers have mastered the art of using marketing techniques effectively. While captivating","og_url":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-12-13T13:01:40+00:00","article_modified_time":"2023-12-27T18:01:09+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/product-graphics\/wdw-tutorial-graphic-details.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"6 Strategies for Creating Engaging and Informative Product Graphics","datePublished":"2011-12-13T13:01:40+00:00","dateModified":"2023-12-27T18:01:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/"},"wordCount":1327,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/product-graphics\/wdw-tutorial-graphic-details.jpg","keywords":["Graphic Design","Website Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/","url":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/","name":"6 Strategies for Creating Engaging and Informative Product Graphics - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/product-graphics\/wdw-tutorial-graphic-details.jpg","datePublished":"2011-12-13T13:01:40+00:00","dateModified":"2023-12-27T18:01:09+00:00","description":"Note: This post was first published on the Dec 13, 2011. Web designers have mastered the art of using marketing techniques effectively. While captivating","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/product-graphics\/wdw-tutorial-graphic-details.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/product-graphics\/wdw-tutorial-graphic-details.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/make-images-informative-techniques\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"6 Strategies for Creating Engaging and Informative Product Graphics"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2P1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=10851"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10851\/revisions"}],"predecessor-version":[{"id":70810,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10851\/revisions\/70810"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=10851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=10851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=10851"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=10851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}