App Design Evaluation

Adobe Illustrator CC, app design, Computer, design, Digital Art, Evaluation, mobile, U62_U63, User Interface Design

Designing an app was really interesting to me, as I had never worked in Illustrator before. Being able to learn how to create shapes and vector graphic art was really eye-opening and a whole different mindset to what I was previously used to. We were given a choice of three themes for our app: fitness, student cooking or weather. I chose to create a weather app based around cartoony characters to help children read the weather forecast and also understand the nature and science behind it too!

At first, I wasn’t sure of whether to base my app around cooking or the weather. I knew that the icon and aesthetics of weather apps was something that appealed to me more from a designer’s stand point, but at the same time I thought that creating funky food icons would also be really fun. So I brainstormed ideas and sketched out rough designs for both themes and eventually settled on creating a colourful weather app targeted towards children, teenagers and young adults. I wanted to do something character based because I knew that was a strength of mine when it came to creating and designing. Having colourful, personified characters is also very popular and appealing trend towards the younger demographic, as it makes subjects and themes more relatable and human. (literally!) Personification made things easier to understand whilst also being fun and imaginative.

After finalising my idea, I moved onto researching mobile apps and looking at their icons as well as analysing their navigation and how certain design choices were made to fit with whatever function the app focused on. For example, with photo editing apps obviously the main part of it is the photo itself, so that takes up the majority of the app display. With my weather app, the main focus is obviously the weather so the main information such as the day’s temperature is the largest feature on the screen. The mascots were the other main feature, so the two components share the homepage as main text and main image. I also looked at other aspects of app navigation and incorporated basic, yet effective principles from good UI designs. I learnt that the simpler the navigation, the better – and using the touchscreen to your advantage made your app feel more natural and smooth to use. I also observed some really poorly designed apps and made notes on what shouldn’t be done when designing an app. For icons, I looked at the use of symbols and basic vector graphics to give a clean, professional and simple look to your app icon and that squashing text onto a 120 x 120 dpi canvas was a bad idea. (Resizing text to such a tiny scale would make it impossible to read as well as make it look awfully clustered and blurred.) The various elements of app design that I researched really helped me gain a better understanding to my own app’s design.

After researching, I began drawing and designing and redesigning my app details until I reached the final design. I first drafted out a navigation map of my app and story-boarded the pages, fleshing out the layout and movement of the whole app. I did my best to keep it simple and straight forward as possible so that any children or young person would find it easy to use. This mindset continued onward into my character designs too. When I made my initial sketches for my characters I knew that they were a little too complex to recreate in a program like Illustrator that heavily relied on manipulating with basic primary shapes and lines. So I kept on redesigning the mascots until I got a result that was fun, but easier to recreate digitally later on. I researched designers called Brosmind in order to help me come up with a simple art style.

Once I had planned and designed all of my app elements in my sketchbook, I scanned them in and used those drawings as a base to work on in Adobe Illustrator. It took me several weeks to eventually come round and complete making all of the icons and characters and it was a huge learning curve. I went in knowing only the bare bones of the program, but persevered with it until I finally came out knowing it pretty much inside out. It took me a while to understand it’s unique creator mindest, as working with vector shapes and lines wasn’t something I was familiar with at all. But after mastering the pen tool and pathfinder function, creating my mascots became progressively easier.

After exporting the final mock ups of my app pages, I was introduced to the program Game Salad. I used this program to create a very basic interactive display of my app, importing all of the individual components into the program before then creating scenes and adding basic events and actions using the interface’s drag-and-drop-system. I couldn’t make things too advanced as I was limited with what the program would allow me to do without digging into expressions and specific coding. But I programmed enough to have the basic page navigation working and even have some elements rotating on scene!

Overall, I am very pleased with the outcome of this project and have learnt an awful lot about Adobe Illustrator and app design. The digital colours and simple Illustrator designs really helped flesh out the look of a simple, yet fun and interesting children’s weather app. In addition to the Game Salad programming demonstrating an example of how the final app would actually function, I think the overall project turned out really well in the end and I am very happy with the results I achieved.

Advertisements

‘Weather Mascots’ App Design

app design, U62_U63, User Interface Design

I created a weather app design in Illustrator that’s marketed towards children. The app is designed to be very simple and user friendly, using characters to portray the different kinds of weather. The app not only gives live updates on the weather forecast both locally and globally, but also has various educational widgets and events to help children learn more about the science behind nature’s weather!

PREVIEW_ALL-01

The final designs of my app, featuring the main three pages.

preview_01-01

This is the main page of the app. It shows today’s weather and also features the character to represent that weather. If you click on them, you’ll be given a daily fact about the weather. It changes everyday.

preview_02-01

This page is a weekly view of the weather, although you can keep scrolling down to see later dates. It gives more detailed information on the wind and precipitation levels, which can come in handy!

preview_03_phone-01

This is the global page, where the user can use the interactive globe to find major cities around the world and what weather it is over there!

 

I created a lot of development work for my app including a navigation map, icon and interface design as well as mock ups and experiments.

Interactive Media App Authoring

app design, Research, U62_U63, User Interface Design

Authoring in the context of digital and interactive media is a term used to describe the creation process of designing, creating and composing a usable interface for devices. Whether it be web pages, mobile apps, games or presentations – any form of media format that is capable of interactive elements such as sound, buttons, videos, animation and the like.

Authoring mobile apps is similar to that of web app development, rooting itself in more traditional software development. Whilst web app design is built around web pages, mobile app design is often written to cater for the mobile phone format and takes advantage of it’s features (such as the touchscreen function on smart phones). For example, a racing game app might be written to take advantage of an iPhone’s accelerometer (the tilt and orientation of the screen).

Applications can integrate a wide variety of interactive components to enhance it’s user experience. The user interface is commonly abundant with scripting for events, buttons, effects, hotspots (rollovers), timelines and slideshows etc. Of course when designing and developing apps, there are limitations in terms of memory, download time, file formatting and plug-in enhancements. As complex as you can make an app, it’s crucial to build it around the target media’s limitations in order for it to function at it’s best without exceeding the capabilities of the device.

There are many app development software that allow designers and programmers to create their apps with. In this case, I am using a variety of different programs to build my mobile app on. I have created the assets in Photoshop and Illustrator and am planning on assembling the interactive parts in Game Salad. Other app developers are part of a company and work on various app development projects for clients. Groups like Nodes have worked for many big companies such as Samsung, O2 and BMW.

Final Web Design Pages

design, Digital Art, laptop, Photoshop, User Interface Design, web design, Website Design

Here are my final web design pages put into a laptop template.

Laptop render HOMEPAGE

The homepage. This is just to present the design of the web pages, so I’m leaving some of the undecided images and text out for now.

Laptop render GALLERY 1

This is hopefully what the gallery page will look like.

Laptop render GALLERY 2

Here’s what the folder tab will look like when the cursor hovers over it. I’m thinking of adding an animation to the arrow icons too if I can get good enough at the coding part.

Laptop render GALLERY 3

This is what the full-view mode will look like.

Laptop render GALLERY 4

When the cursor hovers over the image, these functions will slide/fade in.

Laptop render ABOUT

This is the About page.

Laptop render CONTACT

This is the Contact page, with the cursor over the deviantART link.

Website Design Progress – The Page Designs

Computer, design, Digital Art, Photoshop, User Interface Design, web design, Website Design

Here’s the design process for my website pages. I designed how the individual widgets and components of each page will (hopefully) look.

For each page, there will be an icon representing it underneath the menu tabs. I got these great icons from www.thenounproject.com and credited the appropriate artists at the footer of the website.

Example of the Homepage icon. The text underneath it is called Lorem Ipsum and is often used in design to represent an area of text.

Example of the Homepage icon. The text underneath it is called Lorem Ipsum and is often used in design as example text.

I had to change the resolution of the actual icon.png because when I’ll use it later in my actual website, it needs to be the correct dimension. Resizing it in the design document won’t change the original image dimensions.

For the homepage, I wanted to have an example of my art featured as well as an introductory line to briefly let viewers know what this website has to offer, and who I am. I also put a link to my deviantART at the bottom.

website template homepage

I hadn’t decided on what art I would display on the homepage, so I left it blank for now.

I made the banner in Photoshop as well using the Rectangular Marquee Tool  and the and the Polygonal Lasso Tool and then filled in the selections with the bucket tool. I edited the deviantART logo to white so that it would stand out against the red banner and fit with the clouds background.

On my portfolio page, I wanted to organise my artwork into various folders so that the presentation was organised. I also took this opportunity to add interactive elements to my website.

The most difficult part of my portfolio page design was definitely coming up with a gallery widget that worked well. I tried many designs and worked my way until I found something that I was happy with. The first draft of my portfolio was a simple slide-show-like gallery, with the main image there with navigational arrows on either side of it. Below would be a row of small thumbnails and either a scroll bar or more arrows to slide through the thumbnails.  However, this didn’t include any folder options, so I tried a different method. I changed the design to a grid format, with each piece of art being shown as a thumbnail and placed little folder tabs at the top. I thought that this design would function better than the previous one, but I then realised that the tabs along the top of the grid were limited to the width of the grid. This wouldn’t work if I couldn’t fit all of the folder tabs that I wanted on the top.

I used a couple of example works to see how the artwork would fit in with the gallery.

Screen Shot 2015-01-08 at 16.20.02

My first design for my gallery. It was very simple and basic, but was limited to only a certain amount of images and had no folders.

Eventually I thought up a gallery design that would meet all my requirements and still fit the style of the website. I decided that since I wanted my gallery folders so badly, I would base the design around that first, then worry about my images. It ended up like this:

Screen Shot 2015-01-08 at 16.20.18

Here’s my final gallery design.

Each row represents a gallery, and if you wanted to see more than you would click on the arrows to slide along the to the next thumbnail. The ribbon-like banners on the end also fit with my red banner on the homepage to add a sense of consistency. I changed the colour of the banner to fit the colour scheme by adjusting the Hue and Saturation.

I also thought a lot about how the user would interact and navigate with the gallery. I decided to add elements of animation into this design to reveal more information about the gallery to the viewer.

Screen Shot 2015-01-08 at 16.20.42

Here’s what happens when the mouse rolls over a tab on either arrows on a particular group.

The banner will extend and reveal the name of the folder. It will stay there so long as the mouse is on the arrows. I also considered having a rotating animation for the icon so that it spins when the mouse rolls over it.

If the viewer wanted to view the image in full screen, then they would click on the thumbnail. The screen will dim and the full version of he image will appear in the centre like so:

gallery full view 1

This is what the full screen mode will look like when the viewer clicks on a thumbnail preview.

To exit this view, the viewer will simply hit ‘Esc’ on their keyboard or just click outside the area of the image. The footer text remains unaffected because it is important to keep the copyright and credits clearly presented in every part of the website.

I also considered navigation in this view as well. So when the viewer’s mouse rolls onto the image, navigation arrows will slide in. I also included a name and description of the piece too.

gallery full view 2

Here’s what it will look like when the mouse rolls over the image.

This gallery was a lot more complex than my original idea, but in order to accommodate the requirements that I wanted, I had to play around and develop the idea.

I drew in the rectangles with the Rectangle Tool and then lowered the opacity so that they weren’t obstructing the entire image beneath it. I also used the same arrow icons and the same font as the rest of the website to keep consistency.

For my About page, I simply had a paragraph of who I am and some information on what programs I use.

Screen Shot 2015-01-08 at 16.42.33

On the Contact page, I had my e-mail address and deviantART link. I made it so that when the mouse rolled over any linked text, the text would turn red. I copied the text layer by selecting it and pressing cmd + j (Ctrl + j on Windows,) to duplicate the layer and then changed the text colour.

CONTACT 1

This is how the Contact page would look like normally.

CONTACT 2

This is what it will look like when the mouse rolls over the deviantART link.

To return to the homepage, the viewer can simply click on the header and the page will navigate to it.

Web Heaven/Web Hell

Photoshop, Research, User Interface Design, U_5, web design, Website Design

Here are my annotations on various websites and their web design.

Retail website 1: www.rakuten.co.uk

Retail website 1: http://www.rakuten.co.uk

News/Blog website 1: www.theguardian.com/uk

News/Blog website 1: http://www.theguardian.com/uk

Artist/Studio/Portfolio 1:  www.omo-cat.com

Artist/Studio/Portfolio 1: http://www.omo-cat.com

Artist/Studio/Portfolio 2: www.miriamschulmanstudio.com

Artist/Studio/Portfolio 2: http://www.miriamschulmanstudio.com

Galleries/Museums 1: www.vam.ac.uk

Galleries/Museums 1: http://www.vam.ac.uk

Railway Museum

Galleries/Museums 2: http://www.earm.co.uk

*Please note that some of these websites may have been updated or changed since I wrote these.

Website Wire-framing and Mapping – Design drafts and sketches

User Interface Design, web design, Website Design

For my Website Design class, I’ll be making a personal website with a portfolio of my art. This will be very useful for when I apply to any Universities or jobs in the future, and it will be a great way to show my work. Recently I’ve been sketching up some wire-framing and maps for my website.

Here's my brainstorming page for my website.

Here’s my brainstorming page for my website.

I first created a brainstorming page in my sketchbook to note and jot down my thoughts and ideas. It probably could have been done more neatly, but at the time I was still trying to figure out what I wanted on my website and what I didn’t. I would organise and modify my initial designs and go into more detail later on.

An in-depth site map.

A redrafted version of my site map.

After brainstorming, I turned to a new page and developed my site map. The idea was to have four pages including the homepage. I wrote down the content and widgets that each page would have, as well as navigational buttons.

Scan 1

Here are the second designs for my pages, excluding my homepage design.

The portfolio page was inspired by OMOCAT‘s portfolio page, but after some drafting I realised that the spacing of the gallery widget wasn’t very effective unless it took up the width of the page. So I decided to redesign the page.

These are my third designs of my webpages. They're more detailed and in-depth.

These are my third designs of my webpages. They’re more detailed and in-depth.

Here’s my final design for the homepage and portfolio page. I’ve changed the gallery widget to just a thumbnail grid format. To enlarge the thumbnails, the user will click on the icons and the icon will expand into the full size image on the page, with navigational buttons on the side to go to the next or previous image.

Scan 5

About and Contact page designs.

The About and Contact page remained pretty much the same. I just cleared and neatened up the overall layouts of the header, background and footer to the pages as a whole to make sure that it was all consistent, neat and easy to understand.