Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
9th February 2013

Create a user-friendly UI

How to create an inset stroked logo and add a responsive image slider

Create a user-friendly UI

inspiration www.oatbook.co.uk

OATbook is an iPhone app designed by Rob Cleaton to monitor Oral Anticoagulant Therapy: hence ‘OAT’. This is for patients on a lifelong course of Warfarin, which has to be monitored through regular blood tests. These tests have to match a range set by a clinic; falling out of this range can carry serious consequences, so it is important for patients to be able to record their levels. The app was designed to eliminate the NHS recording book and keep blood test results, appointment notes and dates for the clinic, providing reminders to patients to carry out the regular tests. Being such a serious subject, the app’s design, which inspired the web design, needed to be kept friendly and patient-focused.

INSPIRATION

Focus on lifestyle
For a patient who is suddenly faced with taking medication and monitoring a serious ailment for the rest of their life, the design of any service designed to aid them is going to be key in helping that patient manage their condition. The patient has to integrate this process into their daily schedule, making it a natural part of their daily lifestyle and routine. As such, the design of OATbook focused on this particular aspect as the key points to drive the design. Rob developed a mood board that focused on creating a friendly user experience, exploring different elements of typography and photography that presented a friendly, lifestyle identity for the
digital experience.

TECHNIQUE

CREATING AN IMAGE SLIDER

Start the document

Open your web browser and visit www.buildinternet.com/project/supersized to download the supersized image slider. Open a new HTML document in Dreamweaver and add the following code in the head section, which links to the css files that style the slider.

001 < link rel=”stylesheet” href=”css/supersized.css” type=”text/css” media=”screen” />
002 < link rel=”stylesheet” href=”theme/
003 media=”screen” /> 

Link to the libraries

There are three important libraries to link to in order to get the background slide show running. The first is jQuery which is the base engine for the slideshow; next comes the jQuery easing library, for the transitions. The next two are for the library itself and the styling for the library, which is the shutter theme.

001 < script type=”text/javascript”src=”https://ajax.googleapis.com/ajax/libs/jquery/
002 1.6.1/jquery.min.js”>< /script>
003 < script type=”text/javascript” src=”js/ jquery.easing.min.js”>< /script>
004 < script type=”text/javascript” src=”js/ supersized.3.2.7.min.js”>< /script>
005 < script type=”text/javascript” src=”theme/supersized.shutter.min.js”>< /script>

Set up the slider

Continue adding the code shown here, which initialises the supersized slider and gives it two images to present. If you need more images in your slider, just add them in this space. Make sure you change the name of the images to images that you are going to link to in the code, or they won’t work.

001 < script type=”text/javascript”>
002 jQuery(function($){
003 $.supersized({ 
004 slide_interval:3000, transition:1,transition_speed:700,
005 slide_links:’blank’, slides:[
006 {image : 'img/image1.jpg'}, {image : 'img/ image2.jpg'}]
007 });
008 });
009 < /script>

Style up the content

We are continuing to add the code shown here into the head section of the document, and here we set the body to have Arial as the text font. We put a logo in the top-left corner, and the base, which is scrollable, over the image set. There is no need to put the height tag if filling with your own content.

001 < style type=”text/css”>
002 body{font-family:Arial, Helvetica, sans- serif;}
003 #logo{margin:30px;}
004 #base{
005 background: #333; padding: 10px;
006 width: 100%; height: 300px;
007 position: absolute; top: 750px;
008 text-align: center; color: #FFF;
009 }
010 < /style>

Add the page content

Move to the body section of the page. Add the code shown below, which allows for the logo to be placed, previous and next buttons, and finally the content in the base section. Fill this with your own content, preferably with a menu that will be just visible on the bottom of the screen. Save this and test in the browser to see it in action.

001 < div id=”logo”>Logo Here 
002 < a id=”prevslide” class=”load-item”> 
003 < a id=”nextslide” class=”load-item”>
004 < div id=”base”> 
005 < !–Put your menu and content in here–>
006 < /div>

TECHNIQUE

CREATE AN INSET STROKED LOGO
The logo uses a shape that has a stroke on the inside, creating a stitched look. This is easy to achieve in Illustrator. We explore how to create an inset stroke on an object that can be taken into Photoshop and dirtied up!

Open Illustrator
Create a user-friendly UI
Open Illustrator and draw two circles, aligning them vertically and positioning one overlapping the other. Open the pathfinder window and press the Minus Front button so that one circle is removed from the other.

Duplicate the object
Create a user-friendly UI
Copy the object that you are left with and choose Paste in Front from the edit menu. Now choose Object>Path>Outline Path. In the window add -10 for the offset. This makes it smaller than the first circle.

Add a stroke
Create a user-friendly UI
Click OK and remove the fill, then add a white stroke. In the stroke panel make the stroke dashed, – 6pts seems to work, but this will depend on how large the original object is. Now you have a stitched effect!

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.