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

3D Animation Evaluation

3D, 3D Animation, 3D Design, Animation, Computer, Evaluation, U8_U52

3D animation has been something I’ve been meaning to try for the longest time. So as daunting as it was at first to receive this brief, I was also very excited as I really like working with Cinema 4D in the past and was very much on board with creating a short animated trailer.

I started out with thinking of ideas for the trailer, but it didn’t take me long to settle on one. I decided to animate a character that I had created for a game a while back originally called ‘Lightbulb Girl’. The idea for the game I had in mind was an adventure puzzle platformer with occassional high-speed platforming elements in. The player would play as Lumi and illuminate the levels as she went along, collecting white blocks to solve puzzles and reach checkpoints. The grand scale of the game was quite expansive actually – I had plans in mind for electricity circuit based levels and a whole cast of side characters with quests to complete. But, the task was to animate a trailer for a game, not make a game. And in the time I was given to make it all, I could only just about animate one character, let alone a whole game’s worth of characters!

I took the sketches that I drew previously and used that as my basis for developing the visuals of my game. I modified and simplified Lumi’s final character design to fit realistic standards and meet my rather basic modelling abilities. And even then, the task of modelling, rigging and weight painting was still rather hellish. I was taught how to rig basic objects and forms, but it was a real challenge to teach myself how to fully weight paint and animate a humanoid character. For example, I completely forgot to model Lumi in the tea-pose position originally so I had to go back and fix that once I realised that the weight painting wasn’t working! I spent the majority of my project doing just that actually which in hindsight was quite taxing and straining. But I persevered regardless and eventually after many all-nighters and hour-long tutorial marathons, I just about managed to rig the model. The weight painting was still rather abysmal, but it was good enough to animate with. It was rough spending an entire Friday night weight painting Lumi’s hips and legs, but it definitely paid off when I got round to animating her run cycle!

The animating itself was probably one of the most enjoyable parts of the project. As someone who loves to animate, finally having a rigged and working model to use was so relieving. Animating in 3D was a fairly new experience to me – I had done very basic 3D animations in the past with fairly simple camera movement, so moving onto something more advanced was exciting. Rotating the joints and key-framing them was a lot easier compared to hand drawn, 2D animation. I couldn’t nail too much detail in the movement, but I animated enough to get the flow that I wanted which was great. For example, I purposefully rigged her thumbs and fingers so that I could get the hand gestures that I wanted whereas if I really wanted to, I could have just left those joints out.

Editing the rendered scenes in After Effects was just a joy really. I’ve always like post editing, so when it came to creating the title credits for my trailer, I really stepped out with the radial fast blur effect. I was actually going to go even further and have blue smoke and shadows integrated in, but in the end I decided to leave those out in favour of the simplistic yet effective outcome of the radial fast blur and lens flare. It looked much cleaner and more suitable to the tone of the overall trailer, plus I didn’t have much time to drag out long, fancy effects (unfortunately.). The trailer lacked any explicit narration or text, keeping to the muted storytelling like how Journey‘s trailer did. This way, the trailer could communicate solely through the visuals (besides the ending credits,) and thus crossing borders and reaching out to anyone on a more international level.

I’d say that compared to my previous animation brief, this one has had a lot more hurdles. Seeing as I wasn’t as comfortable animating in 3D than I was in 2D, this whole brief had a lot of challenges and issues to overcome. The two main ones being weight painting and rendering. I spent the majority of time doing at least one of the two to an arduous extent and I’m pretty sure the amount of all nighters spent doing working on those things has definitely not been healthy for me. Thankfully I managed to resolve them – I finally got used to weight painting effectively after struggling to familiarise myself with how the 3D polygons worked. And the rendering issues was solved once I finally found the ‘Do Not Sleep’ setting on my laptop – but even so, I’d say that it certainly wasn’t easy. Overall however, I am mighty pleased with the final outcome and to be honest, am quite shocked with how much I’ve achieved despite the setbacks.

As for how I worked safely at my station, I can confirm that there were no chainsaws or sharp objects nearby my desk and that food and drinks were kept under heavy surveillance at all times. (My laptop at home is on a levelled shelf separate to my desk to avoid any accidental water spillage. And I wasn’t allowed to eat in the college computer rooms, so my hygiene wasn’t sabotaged much.) I took breaks regularly and exercised my wrists often to avoid any pains or aches that could have negatively affected my work flow. I also stretched regularly to keep my back condition monitored. My desk is a hybrid-sitting and standing desk, so I can easily switch between the two positions to promote flexibility and good circulation. I shared the IT suite with my colleagues at college and offered available computers to anyone that needed it in the odd case that their one wouldn’t start up properly and also lent out the scanners and printers to those who needed it once I wasn’t using them.

3D Animated Game Trailer Process

3D, 3D Animation, 3D Design, Animation, Camera, Cinema4D, Computer, design, Digital Art, U8_U52

I drew up a final design and imported it into Cinema 4D to use as a basis for my model. I used the Spline tool to create the separate parts of my character and then lathed, extruded and manually edited (via points and edges,) the parts until they were right. I then rigged, weight painted and animated the scenes.

TURNAROUND.png

Lumi’s final character turnaround.

After I (painstakingly) rendered, edited and re-rendered all of the scenes it was time to put it all together in After Effects! I imported all of the files and started compositing the shots accordingly, using my storyboard and the chosen audio as my base.

 

CINEMA4D – Creating Camera Movement

3D, 3D Animation, Animation, Cinema4D, Computer, Film, Film Studies, U8_U52

Today we learnt how to use and move cameras in CINEMA4D, and then render them into short QuickTime movies. We recreated the various camera movements that we had studied previously in a 3D scene with basic shapes and models.

Camera Pan shot

Camera Pedestal shot

Camera Dolly shot

Camera Tilt shot

Camera Truck shot

Canon Competition – Ideas and Animation Treatment

Animation, Computer, Digital Art, Research, U3_U53

A short, 20-30 second video showing a montage of footage and animation from around my college. The montage should not show what the college is on it’s own, but rather present what the college can be when its students’ creativity and imagination come to play. It should be short and sweet, but also fun and inspiring. We start with a fade in into the establishing shot of a new and modern building. We see an animated cartoon character make their way through the revolving doors at the entrance. As they fill the cool, empty interior with colour and movement, the animated character walk through the barriers to the beat and rhythm of the music. Followed by a montage of different locations within the campus, we are carried along with the character’s animated parade through the college – interacting with the various displays as we pass by each corridor and room. As we enter the common area, we see a student sitting down by one of the tables, supposedly working. The character walks up behind the student before diving into the student’s open sketchbook page; revealing that they are in fact, a character drawn in the sketchbook. At the last beat, we get a glimpse of a wink from the character before cutting to the credits. The short will mainly be composed of a combination of real life camera footage and animation, with the animation on top of the filmed footage. Most shots will have a slow pan to indicate a progression in time and constant movement – nothing should be still. The overall appearance should be clean and modern, but colourful and bright. The animation will mostly be digitally done, with hand-drawn 2D character animation. Like a short music video, the visuals should dance to the music. Something catchy and fun, but unique and modern to play in line with the swing and mood of the video would be perfect. This video should be a great glimpse of what and how the college has inspired me to create and should convey a great sense of imagination and life in its ambiance and cinematography, leaving the viewers wanting to see more of where the animated journey can take them.

More Cinema4D Experiments: Modelling, Texturing and Lighting!

3D, 3D Design, Cinema4D, Computer, Digital Art, U34_U51

In Cinema4D, I learnt various modelling functions and techniques that helped me create more realistic and professional looking 3D designs.

One of the tasks I was given was to replicate the basic shape of a car using a wide range of methods. I learnt how to import the photograph below into the programme as a background image to help me trace and get more accuracy with drawing splines.

2011-mini-cooper-d-side-view

A simple side view of a Mini car.

I also used the Symmetry functions in the programme to help duplicate the car wheels accurately. I divided the car’s build into separate shapes on different layers to give a clearer sense of depth. I used the Loft tool and edited the Filler Caps on the shapes to smooth out the edges.

mini car render

My attempt to recreate the basic shapes of a Mini car.

The other techniques that I learnt more about were lighting and texturing models. The lighting task introduced me to the basics of lighting and the various effects I can achieve with different amounts of light sources and different Luminescence intensities.

Control Lighting test 1

An example of one of my lighting experiments, using a basic cube to clearly define the lights and shadows from different angles.

Finally, we learnt more about texturing and the in-depth adjustments that you can make to a default material to make it suite whatever texture you’re trying to achieve more precisely. The are a large number of options to edit and fine-tune a material; from adjusting the patterns and reflection intensity, to adding bump-maps and colours!

Control Lighting environment 2

Here, I tried creating an environment using simple shapes, but applying a range of textures and lighting choices to make it become more interesting.

Promotional Flyers: 3D Modelling A Fantasy Staff

3D Design, advertising, Computer, design, Digital Art, promotional flyers, U34_U51

For our Promotional Flyers project, I decided on creating a magical fantasy staff. I first sketched some ideas out into my sketchbook, then created a 3-view sketch of a final design and began building it in Cinema4D.

An initial brainstorm of my fantasy staff product in my sketchbook.

An initial brainstorm of my fantasy staff product in my sketchbook.

A more detailed 3-view drawing of my final staff design. This will help me when I start modelling in Cinema4D.

A more detailed 3-view drawing of my final staff design. This will help me when I start modelling in Cinema4D.

Once preparations were complete, I opened up Cinema4D and started building it. I used a basic capsule shape to create the main part of the staff. I elongated and adjusted its dimensions by using the Move and Scale tool.

Screen Shot 2015-01-22 at 13.46.36

Before I moved on, I wanted to be able to easily reference and compare my model to my sketches to make it as accurate as possible. So, I went into the multiple window view mode by clicking on the far right icon on the top-right hand corner of my current working view window.

Screen Shot 2015-03-05 at 11.14.52

Screen Shot 2015-03-05 at 11.15.31

Then, I selected the Right view window and under Mode I clicked on View Settings and then went to the Back tab and uploaded an image from my folders.

The image then appeared in the background of my model on that view, giving me something to instantly refer to when modelling to keep it accurate.

I moved onto making the coil at the top end of the staff. I edited the properties of a Helix spline so that it matched my design and used a Circle spline to follow alone the path, creating a coil.

Screen Shot 2015-03-05 at 11.23.43

Screen Shot 2015-03-12 at 11.41.29

After that, I made the coiled shape into an Editable Object. This allowed me to customise the points and faces of my shape a little further so that I could get it to coil around in a specific way at the end. I used the Knife tool to cut in new points in the object that I could then bend and shape.

Screen Shot 2015-02-05 at 14.59.19

I then went into Sculpting mode by going to the top right-hand corner of the program and selecting it in the drop-down.

Here, I could start to really mould my piece and fine-tune the shape and surface contours.

Screen Shot 2015-02-26 at 14.12.57Screen Shot 2015-02-26 at 13.56.43
Screen Shot 2015-03-12 at 11.46.49

I had to create quite a few Subdivisions in order to achieve the right amount of smoothness and extensions to the basic shapes, which unfortunately made the program lag quite a bit whilst I was working. Although in the end, it wasn’t that bad and I could still work without having Cinema4D crash on me!

I also went back and forth to the basic editing tools on the left Editable Object toolbar to help with creating extra parts and points.

This part definitely took the longest, as I really had to work on the details and shapes of the staff to make it look like it could be smoothly carved wood. It was incredibly fun to sculpt though!

After most of the gruelling shaping was finished, it was time to add the final parts and texture it.

In my final design, the staff had four gemstones floating in-between the branches. I created these in a new file. I went to the Front view window and drew in three diamond shapes using the Linear Spline tool.

Screen Shot 2015-03-12 at 11.55.16

I then spread the three splines out in the Right view window to create depth. Once I had spaced them out, I used the Loft tool to create a shape out of the three splines!

Screen Shot 2015-03-12 at 12.03.56

I then textured this by using editing a pre-made material. I chose a diamond-like material and changed the properties a little so that it had more colour and crystal-like properties to it.

Screen Shot 2015-03-12 at 12.05.56

Screen Shot 2015-03-12 at 12.06.07

Screen Shot 2015-03-12 at 12.12.37

I wanted to make the gemstones glow, but I could only do so much to the material properties in Cinema4D. I’d be able to make it glow in Photoshop once I had completed the 3D work.

After I had finished texturing it, it was time to copy it into my staff model. I pretty much just copied and pasted the stone over from one file to the other. From there, I resized it and moved it so that it was in place. I then repeated these steps for the other three smaller stones, adjusting the dimensions and positioning so that they were in place and varied slightly.

Screen Shot 2015-03-12 at 12.16.32

And last but not least, I added the final wooden texture to my staff! I edited a pre-made material like how I did with my gemstones. I then dragged the material to the staff layer to apply it. I also added various lights to help with the setting of the staff and the composing. I saved it for the final time and rendered it. It didn’t actually take as long as I anticipated for it to render, which was great!

Screen Shot 2015-03-12 at 12.23.07

To save it as a png with a transparent background for my Photoshopping, I had to change the rendering settings. I selected the file type to be .png with the alpha channel (transparency) options selected.

Screen Shot 2015-03-12 at 12.26.53

I then went through the final rendering and saved the 3D model as an image.

Screen Shot 2015-03-12 at 12.26.20 Screen Shot 2015-03-12 at 12.26.27