To build a beautiful interface is traditionally difficult due to subjectivity with beauty in the eye of the beholder.
However as you try to articulate your ideas and wonder what a system could look like this article allows a computer user articulate their ideas very visually with little effort.
This is a fun try it and see article for every kind of reader.
- Licencing Art
- 1: Background
- 2: Interface menu
- 3: Hooking it up
- Options
[read more=”Read more” less=”Read less”]
Licencing Art
Copyright
You wouldn’t expect to get a piece of art for free, or a book / poem free so that you can copy it and sell it for yourself. In terms of computing the laws of copyright very much impact everything visual on a computer.
Pictures, photos, styles of writing called fonts all have copyright licensing to consider.
As a result of this “making money” from how things look is how photographers, graphic designers, etc. make a living and we don’t want to take away their living.
Sometimes however we do want to build and play without worrying about the cost.
For this reason there is a large body of work that artists have released from copyright.
All materials used in this article are 100% free for commercial use.
1: Background
Materials
Now that we have a font we will probably want a striking image to help us. Photo organisations like Getty, ShutterStock and iStock can sell you images to suit every occasion.
Yet there is one website which I swear by. Pixabay. https://pixabay.com
They are connected to showing commercial ShutterStock images but I think they should do this as you get an awful lot for free and if they get any advertising revenue they’ve earned it!
Search for an image. When you choose one check on the right for the terms of use. Some images are only allowed to be used on blogs but the vast vast majority are free for commercial use.
So for our project we need an image. I searched for “technical” and found this image of a robot.
- Right click on the picture and choose “Save As” and save it to the desktop of your computer.
- Open PowerPoint
- Go to the “Insert” tab along the top
- Choose “Picture”
- Find your image on the desktop and insert it into the slide
Easy!
Keep your keywords generic and go rummaging. There are so many striking images available.
Yes a beautiful image can really set off a beautiful interface.
Textured images
Now if you can’t find the perfect image or you want something a lot simpler then no bother. PowerPoint is about to become your best friend.
- Open PowerPoint and at the top is a small box with shapes and lines in it called “Drawing”
- Choose the rectangle shape (fourth in on the top row)
- Drag out a big square that fills most of the screen
- Find “Shape Fill” again in the “Drawing” box at the top of the screen
- Choose from textures, gradients or just plain colours. This is your design.
Now if you want to explore in a bit more detail
- Right click on your shape and choose “Format Shape” from the menu that appears
- Find the fill section and you can choose “Pattern Fill”
I went with a sample first preset sample “Gradient fill” option of a dark into light blue fade.
Experimenting with “Gradient fill” allows you choose the fading of one colour into another.
If you’re having trouble, this is available in the PowerPoint sample downloadable below.
Two options
I created a second slide and popped the robot image from above in.
- Add a blank slide by choosing “New Slide” from the “Slides” section at the top
- Chose the “Insert” section
- Found “Picture”
- And added the image.
Again this is available in the PowerPoint sample downloadable below.
I describe this method of adding multiple slides to your PowerPoint so that you can put multiple designs together in a single PowerPoint document.
Download
If you’d prefer one built for you, you can download it here.
Please remember this article is about you learning and playing so I encourage you to try yourself.
However sometimes we all need a little push in the right direction myself included. So here you go if you need it.
2: Interface menu
Shapes and Smart Art
Quite simply PowerPoint has prebuilt shapes. You can drop any manner of shapes and sizes onto your interface.
If you want to get a bit fancier very quickly and add wow to your beautiful interface there is a tab in PowerPoint called Smart Art. 7th icon from the left in the ribbon below.
From here choose the Smart Art you like
In a few seconds I ended up with the following using just the defaults available in PowerPoint
In this way a team can experiment with different looks feels and options very quickly.
Now if you prefer a video to show you through Smart Art options you can have a watch of these.
- https://www.youtube.com/watch?v=54rI3s1gyzQ – Explantion of Smart Art
- https://www.youtube.com/watch?v=sG8xYlqOsyI – Building your own custom Infographics
- https://www.youtube.com/watch?v=OZKTzpbnGOA – Animated infographics for your own experimentation
3: Hooking it up
The final push
Well done you now have a beautiful picture which is going to be your interface. We need to convert it to something usable and this section has three steps.
- We are going to convert your PowerPoint into a single image. As images are much easier to work with.
- Next we create invisible buttons in your image which are clickable
- We get the code that’s been generated and put it in a webpage
This is a very quick process that just needs a bit of patience to understand it once.
3.1: Convert your PowerPoint into an image
We now have an image in the background of a slide. We have added some Smart Art on top to make a menu system of some kind.
Now we need to snapshot that PowerPoint slide into a picture for our beautiful interface.
So a few steps to this which are hopefully simple to follow.
- Go to your slide in PowerPoint
- On that slide on your keyboard hold down Ctrl key and tap the letter A for all. Everything should highlight (the outside of all the bits are highlighted as per this image)
- Hold down Ctrl and tap the letter C to copy everything.
- Hold down the Windows key on your keyboard (it’s usually in the bottom left of your keyboard) and tap the letter R key for run
- In the box that appears type mspaint and then hit return
Now you’re in Paint. don’t do anything at all but hold down Ctrl and tap V. This will create the image in paint.
Hold down Ctrl and tap S. Save the image to your desktop with a name you’ll remember.
For this example please call it “example.png” without the quotes
Easy? You’ve just created a beautiful interface! Now we’re going to make it usable.
3.2: Image Maps
Your first button area
Next you need a very very handy tool available online which is brilliant for this process.
Choose the green button “Select Image from My PC” and select example.png
You will get the following
You are going to be adding three rectangles to your image. The rectangles are managed by two dots in the corners which define the height and width of the area.
Click in your image in the top left corner of your Google button and then in the bottom right.
You get two dots you can drag around. The box is light grey. Don’t worry it’s invisible when you’re finished.
Drag your dots to cover your Google as per the image below.
So the options you need which are just under the picture are
- Shape: Rect
- Link: https://www.google.ie
- Title: Google
- Target: _blank
The other two areas
Then repeat the following process two times so we have three areas in our image. Each area representing each button.
Click the red “Add New Area”.
Put the dot in “Active” for each one to draw out the new boxes.
- Link: https://www.yahoo.com
- Title: Yahoo
And
- Link: https://www.msn.com
- Title: MSN
Your finished beautiful interface work should look like this
Use the “Active” dot to work on different boxes. So if you want to work on button 3, put the dot in Active beside that line.
Job done, well done. Only one tiny bit to go.
3.3: Making it work
That’s all the hard work done. Click show me the code.
Copy all the text in there into Notepad. If you have trouble with this step you can also try the tags article which introduces HTML.
- Hold the Windows key and tap R
- In the box type “notepad” without the quotes and tap Enter on the keyboard
- Ctrl and V to paste the generate text into your document
- Ctrl and S to save it and call the document “menu.html”
And from your desktop double click your new file called “menu.html”
My menu.html has a Chrome icon as that is my default browser. Whichever browser is your default browser will dictate the icon.
And when your browser of choice opens….
Your Beautiful Interface
If you hover over your button you see the title you gave the link appear. When you click your button a new tab opens and your desired link opens.
You just built a working interface!!! Be proud… very proud.
Now you can build anything… just just need to decide what links you want to include.
Options
Online
Web based systems should be able to host your code and image for you.
This is also how menu interfaces for mobile apps can be built.
How striking do you want your interface to be.
Image Map
The image map tool also has options to allow circles and polygons. Poloygons can be any shape so you could make the robot a button as well.
If you put links to your internal systems, training material and so on you can build your beautiful interface for very little effort.
Using _self instead of _blank means open in the same window instead of going to a new blank tab or window.
Style guides
If you are a big business your marketing department may have developed something called a style guide.
This document details a lot of important visual information about your business logo and visual representation of your business.
The font you use, the colours you use and details specific to your logo.
If you can get the style guide of a business, which are often readily available on the internet you can build a beautiful interface that closely matches that business.
Here is a publicly available style guide to inspire you.
Wrap up
Feel free to send me images of your beautiful interface as I’d love to see what you’ve been able to create.
I’m happy to help in any way I can but please remember I’m not a professional designer but I know people who are.
[/read]
