{"id":3430,"date":"2015-09-01T14:04:16","date_gmt":"2015-09-01T12:04:16","guid":{"rendered":"http:\/\/www.bluehair.co\/?p=3430"},"modified":"2015-10-20T16:54:49","modified_gmt":"2015-10-20T14:54:49","slug":"a-quick-guide-to-best-practices-for-user-interface-design-on-illustrator","status":"publish","type":"post","link":"https:\/\/www.bluehair.co\/corner\/2015\/09\/a-quick-guide-to-best-practices-for-user-interface-design-on-illustrator\/","title":{"rendered":"A quick guide to best practices for User Interface Design on Illustrator"},"content":{"rendered":"<p><a href=\"http:\/\/www.bluehair.co\/2015\/08\/a-quick-guide-to-best-practices-for-user-interface-design-on-illustrator\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3505 size-large\" src=\"http:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/08\/Header-630x342.png\" alt=\"\" width=\"630\" height=\"342\" srcset=\"https:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/08\/Header.png 630w, https:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/08\/Header-315x171.png 315w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n<p>As a creative professional working\u00a0on Graphical User Interfaces (be it for products, apps or websites) you are bound to come in contact with Adobe Illustrator, the leading vector graphics package out there. It&#8217;s an amazingly handy piece of software, that when used correctly, can make your whole workflow a breeze.<\/p>\n<p>In the past, I created a handy\u00a0manual\u00a0for\u00a0the design\u00a0teams I&#8217;ve worked with,\u00a0highlighting some of the best practices I&#8217;ve gathered through my experience working with it, and I figured it was time to share it with the rest of the world, you know&#8230; because <strong><em>sharing is caring<\/em><\/strong> \ud83d\ude09<\/p>\n<p><!--more--><\/p>\n<h2>WHY ILLUSTRATOR?<\/h2>\n<p>Using Adobe Illustrator\u00a0for the\u00a0design process allows you to:<\/p>\n<ul>\n<li>Keep your complete project organized in one file (multiple artboards)<\/li>\n<li>Easily make design changes at the last moment (this always happens)<\/li>\n<li>Easily update individual components (e.g. new version of an\u00a0icon) that appear throughout the entire system<\/li>\n<li>Export your assets in different resolutions for different display-sizes<\/li>\n<\/ul>\n<p>Using Photoshop is possible, but has some drawbacks:<\/p>\n<ul>\n<li>Last-minute design changes\u00a0become tricky\u00a0because they involve lots of manual work<\/li>\n<li>Making a single file with all necessary screens (many, mamy layers), or several\u00a0independent files (assets are spread throughout multiple files) makes\u00a0managing your design\u00a0quite difficult<\/li>\n<li>Once made in Photoshop, objects (e.g. icons) cannot be scaled up without compromising the quality (pixilation occurs).<\/li>\n<li>This means that future changes in screen sizes can require you to make everything again.<\/li>\n<\/ul>\n<h3>Before we start&#8230; An example illustrator file<\/h3>\n<p>To make things a bit easier to follow for you, I&#8217;ve created a handy example file that includes all of the best practices mentioned in this guide. You can download it by clicking the link below.<\/p>\n<p><a href=\"http:\/\/www.bluehair.co\/imagenes\/UI%20Projects%20-%20Illustrator%20File%20Example.ai\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3507 size-full\" src=\"http:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/08\/DownloadIllustratorFile.png\" alt=\"\" width=\"401\" height=\"50\" srcset=\"https:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/08\/DownloadIllustratorFile.png 401w, https:\/\/www.bluehair.co\/corner\/wp-content\/uploads\/2015\/08\/DownloadIllustratorFile-315x39.png 315w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/a><\/p>\n<h2>DOCUMENT SET-UP<\/h2>\n<p>Since we are designing for graphical user interfaces, and not for print, here are some suggestions on how to set-up your document to start working:<\/p>\n<ul>\n<li>Use the .AI file format when saving<\/li>\n<li>Use RGB colour mode<\/li>\n<li>Use Pixels as units and use an artboard size equal to the resolution of the screen of your project (e.g.\u00a01920 x 1080 for a full HD\u00a0desktop application).<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3494&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>New document prompt<\/small><\/p>\n<blockquote>\n<h4>Tips<\/h4>\n<ul>\n<li>When setting up a new document, choose WEB from the \u201cNew Document Profile\u201d to get most of the settings ready.<\/li>\n<li>Pay attention to the option \u201cAlign New Objects to Pixel Grid\u201d. It can be really helpful if your final output must be pixel perfect, but <u>VERY<\/u> annoying while working if you need to align objects.<\/li>\n<\/ul>\n<\/blockquote>\n<h3>Best practices for document management<\/h3>\n<ul>\n<li>Try to keep the file size under 20 Mb for easy editing and file management (See tips further in this document regarding symbols and linking\/embedding of files).<\/li>\n<li>Save regularly under a new name, especially when a big modification has been applied to the file. Use an increasing identification number at the end of the file name (e.g. \u201c TestUI-v1.0.ai\u201d, \u201cTestUI-v1.2.ai\u201d, \u201cTestUI-v2.0.ai\u201d) and if necessary while working on a variant with other colleagues, add your name to the end between parenthesis (e.g. \u201cTestUI-v3.1 [David].ai\u201d).<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>ARTBOARDS<\/h2>\n<p>Artboards should be used to define different screens or alternatives for a screen. There are many advantages for the use of artboards, such as exporting each individual screen separately or the ability to paste an item in place for every single screen.<\/p>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3515&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Artboards overview. The one with the thicker outline is the currently selected artboard<\/small><\/p>\n<blockquote>\n<h4>Tips:<\/h4>\n<ul>\n<li><strong>Crtl+1<\/strong> \u2013 Center currently selected artboard in TRUE SIZE mode<\/li>\n<li><strong>Crtl+0<\/strong> \u2013 Center currently selected artboard in FIT IN WINDOW mode<\/li>\n<li><strong>Crtl+Alt+0<\/strong> \u2013 Fit all artboards in Window<\/li>\n<li><strong>Shift+PageUp \/ PageDown<\/strong> \u2013 Jump from artboard to artboard<\/li>\n<\/ul>\n<\/blockquote>\n<h3>Artboard Dock<\/h3>\n<ul>\n<li>Artboards can be managed through the Artboard Dock (if the dock is not visible, you can activate it through the Window\/Artboards menu).<\/li>\n<li>Through the artboards &#8220;Extra options menu&#8221;, artboards can be added, duplicated or deleted from the stage.<br \/>\nNote: When duplicating artboards you need to unlock all the layers which you want to be duplicated in the new artboard, just as in the instructions ahead on \u201cmoving artwork with artboard\u201d<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3520&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Artboard dock and the extra options menu<\/small><\/p>\n<ul>\n<li>Artboards can be organized in rows and columns. This can be done by using the \u201cRearange Artboards\u201d option from the extra options menu.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3529&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Rearrange artboards prompt<\/small><\/p>\n<ul>\n<li>Select the number of columns and an appropriate spacing between artboards (e.g. 80px).<\/li>\n<li>It is recommended that you select the \u201cMove Artwork with Artboard\u201d check box, but for this to work properly, make sure NONE of the layers are locked and ALL are visible so that all objects can be moved.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3531&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>In this case, the contents of the bottom two layers will not be moved when the artboards are rearranged because they are locked<\/small><\/p>\n<h3>Best practices for artboards<\/h3>\n<ul>\n<li>Set up the artboard size to match the required screen size in pixels by using the \u201cArtboard Options\u201d<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3533&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>The artboard options prompt, where artboard size can be changed. Make sure you have the correct artboard selected before using it.<\/small><\/p>\n<ul>\n<li>Make use of separate artboards for each individual screen or screen variation made.<\/li>\n<li>Keep the artboards organized neatly\u00a0on a grid. This can help you to keep a proper overview of your screens.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>LAYERS &amp; GROUPS<\/h2>\n<p>Layers are useful to keep certain objects separated from each other for easy management.<\/p>\n<ul>\n<li>Create separate layers for different types of content such as docks, tabs, etc. and name these layers with a descriptive text (e.g. \u201cTexts\u201d, \u201cTabs\u201d, etc)<\/li>\n<li>Set up a layer called \u201cComments\u201d at the top of your layer hierarchy were comments and revisions can be placed and easily shown\/hidden as required.<\/li>\n<li>Layers\u00a0can also be used to show different states of certain items on the same screen<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3535&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Using Layers to show different states of a screen. On the left, the layer containing the alarm item is hidden<\/small><\/p>\n<ul>\n<li>Use them to show\/hide information when exporting. The comments layer for example, can be hidden when the separate screens are being exported for a user review, but they can be left on when exported for a presentation.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3537&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Using Layers to hide content during export. On the right, the \u201cComments\u201d layer is hidden before exporting the different screens<\/small><\/p>\n<ul>\n<li>Associated objects should be grouped so that they can be easily selected as a whole (e.g. the background and text of a button).<\/li>\n<li>Groups within groups can be made to add further hierarchy to a document (e.g. group a button background with its text label and then group all similar buttons together)<\/li>\n<\/ul>\n<blockquote>\n<h4>Tips:<\/h4>\n<ul>\n<li>Use <strong>CTRL+G<\/strong> to group selected items together<\/li>\n<li>Use <strong>CTRL+SHIFT+G<\/strong> to ungroup items<\/li>\n<li>By double clicking a group you can \u201copen\u201d it to rearrange the contents without ungrouping. When you are done, just double click outside the group to go back.<\/li>\n<\/ul>\n<\/blockquote>\n<h3>Copying &amp; Pasting Items:<\/h3>\n<ul>\n<li>When pasting content on an artboard, <strong>make sure to do it on the right layer<\/strong>. Choosing \u201cPaste Remember Layers\u201d from the extra options menu of the layers dock pastes the copied items in the same layer from which they were copied (very handy when copying from multiple layers as the system remembers the layer for each individual object).<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3539&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>The extra options menu of the layers dock, with the &#8220;Paste Remember Layers&#8221; option<\/small><\/p>\n<blockquote>\n<h4>Tips:<\/h4>\n<ul>\n<li>Use <strong>CTRL+SHIFT+V<\/strong> to paste in place between artboards. Make sure the correct artboard is selected when copying AND pasting<\/li>\n<li>Use <strong>ALT+CTRL+SHIFT+V<\/strong> to paste in place on ALL artboards at the same time. Handy when adding a new item to all screens for example.<\/li>\n<\/ul>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<h2>LINKING &amp; PLACING EXTERNAL FILES<\/h2>\n<p>Sometimes you may want to include an external bitmap into your work (e.g. a map for a GPS app).<\/p>\n<ul>\n<li>Use \u201cPlace\u201d to get images into Illustrator. DO NOT use Copy-paste since it increases file size.<\/li>\n<li>Check \u201clink\u201d (in the place dialog box) to ONLY save the link to the image in the Illustrator file<\/li>\n<li>Uncheck \u201clink\u201d (in the place dialog box) to save the image IN the Illustrator file<\/li>\n<li>Check \u201cinclude linked files\u201d (in the save as dialog box) to save the image IN the Illustrator file<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3541&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Left the \u2018Link\u2019 checkbox within the Placing dialog box, found under the File tab. On the right side the \u2018Include Linked Files\u2019 checkbox within the Save As Dialog Box<\/small><\/p>\n<p>Here are a couple of the combinations you could have when managing external files and their PROs and CONs:<\/p>\n<ul>\n<li>Placed with \u201clink\u201d checked, \u201cinclude linked files\u201d UNchecked\n<ul>\n<li>(+) Small filesize<\/li>\n<li>(-) The original file of a linked image can get lost (big risk)<\/li>\n<li>Advice: only use in hi-res, collage-type file. Store linked images in the same directory in a subfolder<\/li>\n<\/ul>\n<\/li>\n<li>Placed with \u201clink\u201d UNchecked, \u201cinclude linked files\u201d UNchecked\n<ul>\n<li>(+) The linked file is saved with the \u201cmother\u201d file and cannot get lost<\/li>\n<li>(-) Huge file size, especially when you use many duplicates of and image in a file (e.g. as background)<\/li>\n<li>Advice: only use if amount of linked image data is very low<\/li>\n<\/ul>\n<\/li>\n<li>Placed with \u201clink\u201d checked, \u201cinclude linked files\u201d checked\n<ul>\n<li>Same effect as previous option.<\/li>\n<\/ul>\n<\/li>\n<li>Placed \u201clink\u201d UNchecked, \u201cinclude linked files\u201d Unchecked, all placed images converted to Symbols\n<ul>\n<li>(+) The linked file is saved with the \u201cmother\u201d file and cannot get lost<\/li>\n<li>(+) Once converted to symbol, duplicates (e.g. as backgrounds) of images do not increase file-size<\/li>\n<li>(-) Large file size if you use high-res images or a large amount of images<\/li>\n<li>Advice: Use <u>this method<\/u> for most of your UI Design<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>REUSING MATERIAL: SWATCHES, STYLE LIBRARIES &amp; SYMBOLS<\/h2>\n<ul>\n<li>Save specific palette colors (to easily apply them to other objects) by dragging and dropping a color into the Swatches dock.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3543&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Adding a colour to the Swatches dock to be reused<\/small><\/p>\n<ul>\n<li>Use the \u201cAppearance\u201d dock to create complex visual effects combined into a single object (e.g. Rounded corners, a glow effect and two sets of outlines can be applied at the same time to an object). This avoids having to stack multiple objects on top of each other to achieve the desired visual effect.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3545&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>The Appearance dock being used to apply a gradient fill and two outlines with different colours and thickness<\/small><\/p>\n<ul>\n<li>If the created appearance will be used in other screen items (e.g. styling for a button), save it by dragging it into the \u201cGraphic Styles\u201d library and name it accordingly (e.g. \u201cButtonStyle_Highlighted\u201d).<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3547&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Dragging an object into the &#8220;Graphic Styles&#8221; dock saves this object\u2019s visual properties (appearance) as a Style that can be applied to other objects. Double click the style to give it a descriptive name<\/small><\/p>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3549&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Applying a saved graphic style to a new object. Select the object and then click on the style from the dock<\/small><\/p>\n<ul>\n<li>A graphic style can be replaced in the library by holding the <strong>ALT<\/strong> key while dragging and dropping a new version of the graphic on <strong>TOP<\/strong> of the specified style in the library. This will update all objects already using this graphic style.<\/li>\n<li>Create symbols for objects used more than once throughout the design such as icons, window backgrounds, scrollbars, button backgrounds, buttons, etc. This way they are reusable and easy to update\/replace<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3551&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Create symbols by dragging an object into the &#8220;Symbols&#8221; panel. Give them a descriptive name and reuse them anywhere in the design<\/small><\/p>\n<h3>Working with symbol libraries<\/h3>\n<p>Once you have added a series of symbols to the Symbols palette, you can save this palette. This allows you to re-use the same symbols across different files (e.g. different UI projects for the same client).<\/p>\n<ul>\n<li>Click on the option button (top-right corner of the palette) and choose \u201cSave Symbol Library\u201d<\/li>\n<li>To open an existing Symbol Library, Choose \u201cOpen Symbol Library\u201d in the same menu<\/li>\n<li>If you want to open a Symbol Library which is manually created, choose the \u201cOther Library\u2026\u201d option in order to browse your own folders.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3553&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Saving (marked green) and opening (marked yellow) a Symbol Library<\/small><\/p>\n<blockquote>\n<h4>Tips:<\/h4>\n<ul>\n<li>Be careful when pasting symbols from older versions of the file, as this can lead to duplicate symbols<\/li>\n<li>Monitor and clean up your symbol library regularly\u00a0to make sure you do not have several versions of the same objects in them.<\/li>\n<li>Save them in a place that makes sense. We recommend somewhere in the project directory.<\/li>\n<\/ul>\n<\/blockquote>\n<p style=\"text-align: center;\"><strong>\u00a0[robo-gallery id=&#8221;3555&#8243;]<\/strong><\/p>\n<p style=\"text-align: center;\"><small>A symbol can be edited by double-clicking it. Once edited, it will be updated throughout the whole document<\/small><\/p>\n<ul>\n<li>You can easily replace a symbol already on the stage by selecting it and using the \u201cReplace\u201d drop down list found on the top bar of Illustrator. This is a list of all the symbols available within the document.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3557&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Replacing a symbol already on stage with another symbol<\/small><\/p>\n<ul>\n<li>A symbol can be\u00a0changed in the library by holding the <strong>ALT<\/strong> key while dragging and dropping a new version of the graphic on <strong>TOP<\/strong> of the specified symbol in the library.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3559&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Replacing a symbol on the library with a new graphic<\/small><\/p>\n<h3>Registration Point in Symbols<\/h3>\n<ul>\n<li>The registration point is a point which Illustrator uses to align your object with. Chose a registration point for your symbol wisely, as this can help when you are aligning or positioning your objects on screen<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3561&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>\u201cSymbol Options\u201d dialog box pops up when symbol is created<\/small><\/p>\n<ul>\n<li>If you are using symbols to make interchangeable objects (e.g. different icons to be used in a single place) make sure that the graphics of them are properly aligned to the anchor point of the symbol (cross hair). If you don\u2019t , objects might shift in an unwanted way if you replace them. You can do this by including a transparent square as a background in each symbol. By making this square transparent (no fill or stroke) and the same size for each interchangeable symbol, you ensure that they center and resize in the correct way.<\/li>\n<li>For symbols which are different size but are aligned to, for example, the bottom; choose the bottom registration point.<\/li>\n<li>When an object is always placed in the top left corner of the interface, choose the registration point in the top left corner.<\/li>\n<li>This works as well for objects (e.g. icons) that you choose not to convert to symbol<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3563&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Using a transparent square as background for 3 different icons helps in keeping them centred to the symbol\u2019s anchor point<\/small><\/p>\n<blockquote>\n<h4>Tips:<\/h4>\n<ul>\n<li>Symbols within symbols are possible and often a good idea. For instance, an icon which uses a highlight when it is active. This can be achieved by making a base icon as a symbol and then putting this symbol within a new symbol that includes the highlight. If the original icon is edited, so too is the highlighted version.<\/li>\n<li>Use \u201c9-Slice scaling\u201d for symbols which can be resized without scaling all of its features (e.g. A symbol of a window background that can be resized without changing the size of the title bar or the rounding of the corners)<\/li>\n<\/ul>\n<\/blockquote>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3565&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Use the checkbox on the \u201cSymbol options\u201d pop-up to Turn 9-slice scaling ON for a symbol. The 9 areas work as pictured above<\/small><\/p>\n<ul>\n<li>If text (or another symbol) is used within a 9-slice symbol, an extra step needs to be made for this embedded symbol to scale properly. Select the embedded symbol, and click on <strong><em>Effect &gt; Path &gt; Outline object<\/em><\/strong><\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3567&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Use the &#8220;Outline Object&#8221; option to allow symbols within a 9-slice to scale properly<\/small><\/p>\n<ul>\n<li>For repetitive patterns (e.g. a keyboard layout) the blending tool can be used (also in combination with symbols). Place two objects (or instances of a symbol) on the artboard. Double click the Blend tool and select \u201cSpecified Steps\u201d and add the number of intermediate items you want. Click OK and then click on each of the initial two objects on the artboard. The system will create all the intermediate steps.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">[robo-gallery id=&#8221;3569&#8243;]<\/p>\n<p style=\"text-align: center;\"><small>Using the blend tool to create a repetitive pattern<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a creative professional working\u00a0on Graphical User Interfaces (be it for products, apps or websites) you are bound to come in contact with Adobe Illustrator, the leading vector graphics package out there. It&#8217;s an amazingly handy piece of software, that when used correctly, can make your whole workflow a breeze. In the past, I created [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[10,4,5,34],"tags":[],"class_list":["post-3430","post","type-post","status-publish","format-standard","hentry","category-bluehairing","category-designing","category-interaction","category-methodologies"],"_links":{"self":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts\/3430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/comments?post=3430"}],"version-history":[{"count":42,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts\/3430\/revisions"}],"predecessor-version":[{"id":3650,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/posts\/3430\/revisions\/3650"}],"wp:attachment":[{"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/media?parent=3430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/categories?post=3430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluehair.co\/corner\/wp-json\/wp\/v2\/tags?post=3430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}