March 2019 - Graphic Designer Vs Web Designer

Build Prototypes With Adobe XD

Kamal Thakur Sunday, March 24, 2019

Build Prototypes With Adobe XD

DOWNLOAD

Design seamless transitions between screens using 'Auto-Animate' and control it with your voice in Adobe XD

In contemporary web and app design there are often times when the interaction doesn’t open a whole new page or screen. The modern approach to creating interactive content requires transitions between design interface elements so that the user is surprised and wowed by the experience of changing content. This all happens on the same screen or page, without a refresh. Designing these kinds of interactions and refining them to work properly can take time, but it’s worth doing before writing your code.

This is what Adobe XD has spent the last few months of development getting right. Create content in one state on one screen, move that content to the new state on the new screen and simply choose the 'Auto-Animate' option to transition. All the content that is the same on both screens automatically animates from one position to another. If you don’t want all the content visible on both screens, make the content invisible on the first and it will transition into place.

Going beyond that, a new feature of XD enables the user to control interactions with their voice. We’ll explore this as a design feature and how the app can speak back to the user as well, which can provide some interesting design opportunities.

STEP 1: Starting The Project

If you don’t have Adobe XD, you can download and install it from adobe.com/ca/products/xd.html. Once the install has completed, open the software and the welcome screen will enable you to choose a screen size to download for. In this case choose the iPhone 6/7/8, as that’s the right size for this project, but you will see there are a variety of sizes available.

STEP 2: Import The First Image

There are different ways to import images, but in this first instance go to File>Import. Choose the 'assets' folder from the project files and the first image to import will be 'sky.png'. Place it on the top of the screen and move it a just couple of pixels down.

STEP 3: Place The Cabin

The next image for the design will be the 'cabin.png'. Just import this in the same way you did in the previous step and then place it to fill the screen. Finally, import the image 'trees.png' and place it at the bottom of the screen with the trees over the lake.

STEP 4: Bring In The Logo

The reason those images are separate layers is so that when a transition is created between screens they can move separately. Go to the File menu and choose Import. This time select 'logo.ai', which is a vector image. Place this image in the top centre of the screen.

STEP 5: Add A Circle

Select the circle tool and draw a circle just slightly larger than the logo. In the Properties panel on the right, remove the stroke and make the background black. Select Background blur and reduce the brightness to -30 so that the circle is still black.

Hidden Panels:

The Asset panel and the Layer panel are available from the bottom left of the XD Interface. These enable you to store asset styles and rename or reorder layers.

STEP 6: Reorder The Graphics

Now the circle needs to move behind the logo. Select Object>Arrange and send backwards. Like in other Adobe products, it is also Cmd/Ctrl+[ to move any graphic backwards in the layer order. Using the right square bracket, meanwhile, will bring an object forwards in the order.

STEP 7: Drop Themic

Now import the 'mic.ai' image and resize the image to be relatively small. Place this at the bottom of the screen. Draw a circle around this and uncheck the fill so that it’s removed. Then make the stroke white and two pixels wide. Position that around the 'mic' image.

STEP 8: Text Message

Use the text tool to add the words 'speak to search' below the microphone. Make the text white and change it to Helvetica Neue Condensed Black. In the bottom left of the screen click the Assets panel icon to open it. With the text selected on the screen, click the ‘+’ icon next to ‘Character styles’ to save this format for the text.

STEP 9: Join A Group

Select the Layer panel icon in the bottom left of the screen. On the screen, select the 'search' text and Shift-click to add the circle and the mic icon. Go to Object and choose Group. In the Layer panel rename this group 'Search'. It’s useful to name groups, especially when animating these.

STEP 10: Group The Logo

Just as in the last step, select the logo and the blurred circle around it, then group them together. In the Layer panel, rename the whole group 'logo' so that it is easily identifiable if you need to edit this again later. For the moment the design for the first screen is complete.

STEP 11: Extra Elements

Even though the first screen is complete there are still more design elements that need to be added. This is how animation is created by changing the elements’ positioning between screens. Go to the rectangle tool and hold Shift to add a square on the screen, making the border white.

STEP 12: Different Import

Now open the folder for the assets through your operating system. Select the ‘cabin1.png’ image and drag this directly onto the square that you created in the previous step. It will automatically be masked inside this. Double click to edit the position of the image and make sure that the cabin is visible in the square.

Different Modes:

There are two different modes in Adobe XD; the design view that allows you to lay out your screens, and the prototype view, which enables you to wire up the interactions.

STEP 13: Add A Label

Using the Text tool, add the label 'Forest Cabin' below the text and use the Assets panel to style the text in the saved style from step 8. Select the image and the label and group them together. Name the group 'left cabin' in the layers panel.

STEP 14: Duplicate The Group

Normally repeating an interface element is the perfect job for the 'Repeat Grid' tool. However, this is going to need specific animation, which doesn’t work with the Repeat Grid. Select the image and text group, then copy and paste it so that it sits next to the original, and add the image 'cabin2.png' instead.

STEP 15: Rename Then Copy Again

Change the text to 'Snow Cabin', and in the layers panel name this 'right cabin'. Select both the left and right cabin and duplicate them, position the duplicates below and update their text and images with 'cabin3.png' and 'cabin4.png'. Group both of these together and name the group 'lower cabin'.

Working With Responsive Design:

If you are designing web pages then it’s always difficult to design for different screen sizes. Adobe XD understands that designing modern web pagesmeans designing for different screens. By default the Responsive Resize option is turned off for an artboard. Turn this on when you want to resize your artboard. It’s usually a good idea to make a copy first for the differentsized screen. XD does a pretty good job of resizing your content, but if anything doesn’t stay together that should then simply group those elements. After resizing, you canmanually adjust anything that isn’t to your liking, whichmakes it much faster thanmost other design programs to convert a design from screen to screen.

STEP 16: Text Title

Add text to the page with the text 'Search results for cabins'. Give this the Rockwell typeface and save this to the Character Styles in the Assets panel. Now position the 'lower cabin' group right at the bottom of the screen and take the appearance down to zero so that it is invisible on this screen.

STEP 17: Changing Opacity

Now select the left and right cabins, move them to the bottom of the screen and take the appearance slider to zero. Repeat again for the search text. When we move to another screen these will all animate to their new positions. In the Layer panel, move the 'left cabin' above all of the other cabin groups.

STEP 18: Duplicate The Screen

Select the artboard by clicking on its name, then double click the artboard and change the name to 'home'. Copy and paste the artboard and rename it 'search'. Now select the logo and move it up to almost off the screen, then reduce its appearance to zero.

STEP 19: Move The Backgrounds

Select the sky image and nudge it up slightly on the screen. Select the cabin image and move it up until the cabin is at the top of the screen. Then click on the trees image and move it over the cabin. Finally, select the ‘search’ group and reduce the appearance down to zero.

STEP 20: New Elements Appear

Select the search results in the Layer panel and bring its appearance up to 100. Move it up on the screen. Repeat this for the left cabin, right cabin and lower cabin. Use the pen tool to draw a simple back button and add a circle around it. Make the background blur and take the brightness of that down to -30.

STEP 21: Complete The Back Button

Select the back arrow and circle, group them together and name them 'back button' in the Layer panel. Switch over to the 'Prototype' mode by pressing 'Prototype' in the top left of the XD interface. Select the homescreen, drag the blue arrow to the search screen and a pop-up panel will appear.

STEP 22: Voice Command

Change the Trigger to Voice and type the word 'search' as the voice command to control this. Change the Action to Auto-Animate and Easing to Snap. Make the duration 1.5s. In the search screen click on the back button and drag the blue arrow back to the 'home' screen. Just change the Trigger to Tap.

STEP 23: Test The Prototype

Over in the top right of the XD interface is a play button. Click on this and a working prototype will now pop up on the screen. On the homepage you will need to hold down the Space-bar while you speak the voice command 'search'. When you let go of the Space-bar it will take you to the next screen and animate the graphic interface into position.

STEP 24: Going Back

Once the transition has run you can press the back button to get back to the homescreen. Close the prototype and click on the search screen, then click the blue arrow to the right (don’t drag). Change the Trigger to Time, make the delay 0s and set the Action to Speech Playback. Make the speech 'search results for available cabins'.

STEP 25: Speech Confirmation

Test this now with the play button to hear a voice confirmation of the search. Close the prototype when you have tried this out. Another screen is going to be created, so let’s click back on the 'Design' view in the top left of the XD interface. Click on the search screen by clicking the name, and then copy and paste it.

STEP 26: Scaling The Image

Rename the new screen 'cabin'. Double click the image for the 'left cabin' layer. Resize the corner handles so that it fills the screen, then reposition the image inside so that it covers that screen. Click on the search results text and take the appearance down to zero to remove it from view.

Test On A Device:

Your final testing of the app is not just limited to testing on the desktop – your prototype can also be tested on a device to get the right kind of feel for how it will look on the device. First of all, download the Adobe XD app fromyour device’s respective app store, then connect the device to the computer with a USB cable.

Click on the small mobile phone icon in the top right of the XD interface. In the panel that pops out you should be able to see the name of the device and, provided you have the XD app running on that device, youwill be able to see and test prototypes. It’s also possible to avoid using a USB cable and transfer via the Creative Cloud.

STEP 27: New Screen Elements

Double click the 'Forest Cabin' text as it is part of the group. Enlarge the text size to 26 pixels and move it up slightly on the screen. Add text to the screen in Helvetica Neue Medium at 14 pixels size and set it to white to stand out against the background. Add a white line with the line tool under the heading.

STEP 28: Create A Button

Use the Rectangle tool to draw a rectangle on the screen at the bottom of the design. Drag in the corner handles to give this shape round corners. Add the word 'Reserve' to this, using the saved character style in the Assets panel for Helvetica Neue in Condensed Bold.

STEP 29: Move To Prototype Mode

All the design elements are in place now for the entire design of the app. Move to the 'Prototype' Mode by clicking the word 'Prototype' in the top left corner. In the search screen click on the 'forest cabin' group of the image and text. Drag the blue handle from this over to the 'cabin' screen.

Repeat Grid:

Often when designing interface elements there are a number of repeating items, so be sure to use 'Repeat Grid' for these.

STEP 30: Animation Settings

In the pop-up panel for the transition between screens, choose Tap as the Trigger, then make Action Auto-Animate. Keep Easing as Snap but reduce the duration of this to 0.6s. This ensures that the animation doesn’t drag – the movement of the first screen to the second screen had a lot of movement that required a longer transition.

STEP 31: Link Up The Back Button

Now select the back button from the final screen and drag the blue arrow from this back over to the 'search' screen. All the settings from the previous transition should be remembered. You are now ready to go ahead and test this by clicking on the play button.

STEP 32: Auto-Animate

What you will see with the auto-animate now is that the image expands to fill the screen, and the elements that are no longer needed will fade away while the new text will fade in. The opposite happens when going back. This provides a good way to see the auto-animate working across three screens.

STEP 33: Save The Project

By default your project should automatically save to the Creative Cloud, but it is a good idea to save a copy to your own hard drive in case there are any issues. Click File>Save, change the location to your own computer and name the project with a suitable name.

STEP 34: Sharing The Project

The whole point of prototyping is to test the project on other people. Fortunately there is a share button on the top right of the XD interface that makes this a breeze. Click the share button, and in the dropmenu that appears select the option Share for Review.

STEP 35: Publish Prototype

In the next screen you are told that auto-animate support is not yet available for the web, but it is coming soon. Click Create Public Link and then click the link in the top right to visit the public link in a web browser. You will need to hold the Space-bar down to use the voice command with the prototype.

STEP 36: Video Version

Another prototype can be shared by recording the interface in action. Click the share button and choose Record Video. This will open a window, and when you close this you will be prompted to save a recording of the screen as an MP4 file, which is also a useful way to share your prototype.

DOWNLOAD

PDF | CODE

Build Prototypes With Adobe XD

Reviewed by Kamal Thakur on Sunday, March 24, 2019 Rating: 5

10 Tips For Better Online Forms

Kamal Thakur Sunday, March 24, 2019

10 Tips For Better Online Forms

Introduce UX practices into forms to give users a better experience and help increase conversions.

DOWNLOAD

PDF

As users we generally don’t enjoy filling in forms online. This is down to a number of reasons. Forms tend to be time-consuming – we are already thinking about the product or service that waits beyond the thank you page, and we want to get there as quickly and easily as possible. Forms often seem complicated, and the increased cognitive load they put on us makes completing the actions even harder. And then of course there is the risks and issues around personal data. Everyone is now much more aware of GDPR – and anyway, why do you really need to know my birthday for me to sign up for this service?

Forms are the key touch point between our users and us, so it is odd that they tend to be neglected by designers. Having done all the hard work to sell the product or service we then force the user to prove themselves worthy by navigating a long form with obscure error messages and input fields.

With this in mind, what steps can we take when building these touch points for our users that will make the process simpler and generally more enjoyable? Try using some of these suggestions in your next project.

STEP 1: Ask As Little As Possible

Following the recent GDPR legislation your attitude towards collecting data will most likely have changed a little, and really you want to only ask the bare minimum in order to let your user complete their goal. The less the user has to fill in, the more likely it is that they will.

STEP 2: Visually 'chunk' Your Forms

Sometimes you have no choice but to request lots of data for a sign-up or registration. In this case it really helps to visually break your content down into bitesize amounts. You can usually group these based on the type of information you need.

STEP 3: Embrace A Single-Column Layout

Although two-column layouts can look visually nice in a design and are often used in print, the eye will naturally track vertically. By having a two-column form layout the user’s eye will have to zigzag left to right in search of new lines, which will impair the user’s ability to give you the info you need.

STEP 4: Use Input Constraints

Make use of constraints on your user’s inputs. It may be quicker just to use text fields for everything, but the well-planned use of number fields or JavaScript to ensure that only a certain type of data can be added will ensure you have less erroneous data in your submissions, and most importantly will help to guide the user.

STEP 5: Auto-Focus

Remove a click straight away by auto-focusing on the first field in the form. It gives the user a good starting point. Make sure the focus itself is styled to be clear and prominent. This will really help the user to see where they are in the process.

STEP 6: Prefill And Preselect Where Possible

If you have data relating to a user, or they have filled in some information previously, then use it to prefill elements of the form. A perfect example would be a billing/shipping address. Make sure you give the user the option to use the same address rather than type it in twice.

STEP 7: Error Checking

Now your user has entered their data, make it as simple as possible for them to rectify any errors. Always show your errors inline next to the field in question, and explain the issue so the user knows what to do to solve it. If possible use real-time validation to check as the user fills the form in, and perhaps give a signal via an icon, such as a tick, to show when it is correct.

STEP 8: Show That Optional Fields Are Not Required

As mentioned, with the new GDPR guidelines you should only hold the information on a user that you really need. With this in mind everything on your form should be mandatory, so indicate optional fields rather than adding an asterisk to every required field.

STEP 9: Explain Why You Need Information

If you do want to make someone’s experience better with extra personalisation, make sure you explain what you will use the information for. Bear in mind that the information you’re asking from a user could be personal so they won’t want to just give it away. A site like Facebook will use this information to try and build a personal relationship with you, but generally you should follow the 'less is best' rule and not ask if it isn’t necessary.

STEP 10: Make Your CTAs Work

Now the user has filled in your form, make sure the design and visual hierarchy of the page works so that they naturally press the submit button. There are loads of ways to visually do this.

Favour The User:

It may be easier as a developer to receive a telephone number split into country, area code and digits, but it is not easiest for the user. You should always try to let your back-end process or some JavaScript do the heavy lifting and get your data into shape. Likewise you could take the user’s full name in one field.

DOWNLOAD

PDF

10 Tips For Better Online Forms

Reviewed by Kamal Thakur on Sunday, March 24, 2019 Rating: 5

Make An Animated Extending Menu

Kamal Thakur Sunday, March 24, 2019

Make An Animated Extending Menu

Use CSS and JavaScript to create content space and reveal navigation options.

DOWNLOAD

PDF | CODE

STEP 1: Document Initiation

Start with the HTML document. This consists of the document container HTML tag, containing a head and body section. The head is used to reference the external CSS and JavaScript resources, and the body is used to contain the visible page content that will be created next.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Extending Menu</title>

<body>

*** STEP 2 HERE

</body>

</head>

</html>

STEP 2: Navigation Content

The example content consists of a navigation container that stores a collection of links. The only exception to this is the first element of the navigation container, which will be used as the interaction icon. Take note of how the navigation container has the 'extend' class applied – this will be used to identify that this navigation is to have the effect applied.

CODE:

<a href="#">Three</a>

</nav>

STEP 3: JavaScript - Link Management

Create a file called 'code.js'. This step searches for all of the links inside the navigation(s) using the 'extend' class. Each link found has an 'animationDelay' style applied, which is calculated in relation to its index position. As a result, any CSS animation applied to these links will appear in ascending order based on the link position. Note how this code is inside a 'load' event listener applied to the window.

CODE:

window.addEventListener("load", function(){

var time = 0;

var nodes = document.querySelectorAll

("nav.extend > a");

for(var i=0; i<nodes.length; i++){

nodes[i].style.animationDelay = time+"s";

time += 0.2;

}

*** STEP 4 HERE

});

STEP 4: JavaScript - Icon Management

A second search is also required by JavaScript. This time the focus is on finding the first child element inside the identified navigation containers. This element has a click event applied to toggle the application of the 'open' class to its parent element, the navigation container. As a result, CSS can be used to define specific styling based on whether the navigation is 'open' or not.

CODE:

var nodes = document.querySelectorAll("nav.

extend > *:first-child");

for(var i=0; i<nodes.length; i++){

nodes[i].addEventListener("click",function(){

this.parentNode.classList.toggle("open");

});

}

STEP 5: CSS - Navigation Icon

Create a new file called 'styles.css'. This step sets the appearance of the first child of nav elements using 'extend'. A bigger font size, along with inline-block display, enables it to be automatically positioned alongside the navigation links, but with the ability to be treated like a block. A transition is set to the transform property to enable step 7 to trigger an animation effect.

CODE:

nav.extend > *:first-child{

display: inline-block;

cursor: pointer;

user-select: none;

-moz-user-select: none;

transition: transform .5s;

font-size: 2em;

transform: rotate(0deg);

}

STEP 6: Navigation Links

Links inside the navigation container using the extend class also need styling. To be hidden by default they use relative positioning, so that animation can move them towards their natural text flow location. Horizontal spacing between links is achieved by using padding on each side, so that they are clearly distinguishable from each other.

CODE:

nav.extend > a{

display: none;

position: relative;

opacity: 0;

padding: 0 1em 0 1em;

text-decoration: none;

color: #777;}

STEP 7: Open States

JavaScript applies and removes the open class to the navigation icon that has been clicked. This class is used to specify presentation changes when the navigation is open. Firstly, on the icon a rotate transform is applied, which will appear animated due to the transition applied in step 5. Secondly, the navigation links are changed to display as an inline-block to become visible, along with the 'open' animation to control their appearance.

CODE:

nav.extend.open > *:first-child{

transform: rotate(45deg);

}

nav.extend.open > a{

display: inline-block;

animation: open 1s forwards;}

STEP 8: Open Animation Definition

The last step is to define the opening animation required for step 7. With links set to use relative positioning, this animation starts the navigation links two characters before their natural text flow position and animates them to where they should be. Opacity starts from invisible to fully visible, making each link appear into view as they animate.

CODE:

@keyframes open {

0% {left:-2em; opacity:0;}

100% {left:0; opacity:1;}

}

DOWNLOAD

PDF | CODE