Expose App Development

October 21, 2019October 21, 2019 adminLeave a comment

Expose logo

The Expose App is a health app for people who have specific diets. The main function of the app is to be a scanner. The idea is to have a brand that exposes the hidden healthy meals and to expose unhealthy meals for what they are. So this means that you will be able to know immediately if a food product fits your diet. This will be especially helpful for people who follows a diet due to health reasons such as allergies or medical conditions as it will include a function to search through ingredients.

This functions of the app will include:

Scanner – that allows you to scan a logo or bar code.
Log – to see past products that you want to find again.
Contacts – to be able to share products that will fit the diet of your friends or family
A blog for top Exposed hits – to see what products are trending

One aspect that is important to bring in is that people only want the information they care about. For example, for people who have allergies, in many cases they only want to know if they can eat something without worry. Some people want to know how many Calories (American measurement) or KiloJoules (South African measurement) is in a meal. Some want to know is a meal is dairy free or gluten free. Some want to know if it is ethically harvested and manufactured. This is why the design will be modular. This means that when you make a profile you can choose from common diets or make a custom diet based on your preferences. The information will then just show the data modules of the product you care about.

The image above shows the flow of how the app would work. There is a page for a blog, but did not make it as I don’t have content for it yet. I wanted to focus on the actual process a person would go through when using the App.

I made the app using illustrator, which in hindsight was not the best idea. I am not sure why, but this document got really slow and crashed at one point. I believe masking images takes far more Ram than it is supposed to but I cannot prove it. In the future I will make individual elements with Illustrator and learn to use Adobe XD. I like the layout and functionality of XD but for some reason I cannot scroll horizontally. Adobe XD also allows you to copy on the exact same place as other art boards. I will be teaching myself on how to set up a XD document with Assets and using the library as I see this will be an important skill for a web designer.

Another aspect I did not anticipate is the difficulty in making all the Icons. My plan for the set up is based on using icons to choose your diet. The icons will be simple as seen on the app itself. I will also add text as some things look too similar to distinguish.

Click here to see the rough Prototype

Animated menus

October 21, 2019October 21, 2019 adminLeave a comment

Social Media Links

I wanted to create a fixed menu to show my social media links. I found a Folding Menu by Animated Creativity that I decided to use as a template for my Social Media links.

While implementing it was fairly simple, it was not responsive, and I had to learn the code to ensure I could edit it without breaking it. This animation is done through CSS animation activated by hovering the pointer over the “FOLLOW ME” text and through some clever transition-delays. I edited the positions but left the animation itself largely alone as it was exactly what I wanted.

Main Menu

Original menu for portfolio — Original menu

For the main menu, I wasn’t sure what I wanted. I wanted a similar line based menu animation but a simple hover effect was boring. The original menu looked like the image above. There were no colour animations (menaing the active menu just stayed blue) and the hover effect simply duplicated the blue colour gradient to the other menu items.

This is the first time I tried animating with the hover effect, so I used the code in the pen Magic Line Navbar by seto89 to figure out the timing and syntax needed. I also added some text and a photo to make it look like an about page to make sure the spacing looked right. I just duplicated the about page so what we could see the menu difference when it was active on other pages.

I decided to code my style first and then add this animation to my menu. I only added the line animation from the pen as I couldn’t figure out how to recreate it myself. I also believe it will break in any browser other than Chrome. From this point I decided I needed to animate the colour to replicate the background colours and got it to work. I also tried to get the animated to line to be on the top and bottom, but I can either get to work on top or on the bottom. From this point all I had to do was make the menu responsive. This was tricky as the animation tended to stop working if you fiddle with it. In the end I left it at the bottom as it still looked cool and I feel like it will break I fiddle too much with it. My goal for the end of the year is to have this animation working on all browsers on the top and the bottom the menu.

To download the file, click here.

References

Animated Creativity, na. CSS – Folding menu | Codepen. [Online]
Available at: https://codepen.io/animatedcreativity/pen/wOqBQr
[Accessed 21 10 2019].

seto89, na. Pure CSS Magic Line Navbar | Codepen. [Online]
Available at: https://codepen.io/seto89/pen/WmGwwp
[Accessed 21 10 2019].

Portfolio Planning using Meister Task

October 21, 2019October 21, 2019 adminLeave a comment

Meister task is an online task management tool that I use to do portfolio planning and organise dates. The basic version is free to use and allows you to collaborate on projects. I am using the free version.

Screenshot of my Meister Task planning — Meister task screenshot

The way it works is that you create sections, in these sections you have lists of tasks that need to happen for you to complete. These tasks are organised by placing them in the right section and sorted according to name, assignee, Creation Date, Due Date and Tags. The sections I made are:

Open – for the open tasks that I need to complete
In Progress – To show what I am busy with
Done – That I finished
Export – To show what I finalized for web upload

Individual tasks can have more detailed information:

Notes – place to make notes
Checklist – smaller list to check what needs to be done to complete the task
Attachments – to add photos and files
Assignment and Details – To show what assignment the task is part of
Activity – monitoring function to see changes

Elective 2 Continuation of CCS animations

October 21, 2019October 21, 2019 adminLeave a comment

Moon reflection on water created to animate

In this elective I decided to animate a illustration using CSS animation. I decided to do a reflection of the moon on water. I used a flat illustration style as it would be the easiest to animate simpler shapes. I made this illustration in Adobe Illustrator.

Showing the SVG code of a section in the image — SVG code of the star

To build the image in code, I exported the image in sections in SVG format and placed them in position on top of a gradient made with code. I then copied the text into the code. This means when I scale the image, it will scale as a vector in the browser itself. For example, the image above shows the code of the star in the yellow circle. The text in the yellow square is the code that makes the star image. If you zoom in on your browser on where you have the file open, it means the image will not pixelate at all. Additionally, the file size is very small. In total, the size of the animated drawing is about 43KB. To compare, the recording below with 4 seconds that would repeat is about 500KB. With larger websites with many animations, the smaller file size can literally save money as file space and download speed is reduced significantly.

Animated moon reflection

As for actual animation itself, I used the Scale and Translate 2D transformations from the Elective 1 CSS animations. The way it works is that you designate a animation duration for a certain amount of seconds, and specify what the animation would look like through keyframes. I use percentages to select my keyframes as I feel it is the option that makes more sense. In the keyframes I selected a beginning frame, a middle frame and a end frame. The beginning frame and the end frame are the same to ensure that the animation does not look like it is glitching.

This is a simple animation, but this entire image was made with code. Getting the timing and movements right took time. But I am proud of this animation as it was my first illustrated animation made only with code.

To download the file, click here.

Elective 1 CSS animations

March 18, 2019October 21, 2019 adminLeave a comment

This learning unit is about learning a new skill. I decided to work on CSS animations and made a page on the basic transitions and transformations you can do to divs. This page is more of a reference guide summarizing what I learned from online resources rather than a visual solution but I feel like I got the basics down. I would like to make a reference to w3schools as I used a lot of the text from the site. Also, I want to reference the site called CSS tricks for animation count down as I used a tutorial to learn how the code works.

You can see this document as process work where I tested a bunch of code I found online in a way that would make sense to me in the future. I do have to admit that I am probably the only person who would be able to make sense of it without context as a lot of the explanations are done with notes in the code itself if I felt it was necessary. It also has the basic functions down so I only have to use the Inspect browser function to see what I did to reuse the code in the future.

As for the actual content, it includes:

Transitions – which affects the speed at which animations happen.
Animations – this is the function that actually makes the animation happen
2D/3D Transforms – which is a overview of how the animations would work and look like
Perspective – to show how one would change the perspective of a object with code
SVG (Scalable Vector Graphic) – a file type for vector images that allows you to directly affect the code. It is also commonly used in animations as it is one of the smallest file sizes.
SVG Animation – followed an online tutorial to learn more about the code. This animation is done by moving the nodes you use to make the image. Thus you need to ensure you have the same number of nodes in every image to make the animation work.

One thing I learned through this is the amount of effort that goes into making animations accessible across different browsers. The code I wrote works in Chrome. Browser support is specific syntax that allows your site animations to work on multiple browsers. To learn more about Browser Support click here.

To show the animations I used Xbox live screen recording to make the video.

Click here to download the original practice file.

References

CSS-Tricks, 2015. A Guide to SVG Animations (SMIL). [Online]
Available at: https://css-tricks.com/guide-svg-animations-smil/
[Accessed 21 10 2019].

W3Schools, 2019. CSS 2D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_2dtransforms.asp
[Accessed 21 10 2019].

W3Schools, 2019. CSS 3D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_3dtransforms.asp
[Accessed 21 10 2019].

W3Schools, 2019. CSS Animations. [Online]
Available at: https://www.w3schools.com/css/css3_animations.asp
[Accessed 21 10 20191].

JavaScript basics

March 18, 2019October 21, 2019 adminLeave a comment

We had an introduction to the JavaScript language and how it fits into our skill set as web designers. In the class we were asked to do an online tutorial on JavaScript to get the basics. This tutorial is made by Codecademy and is a free online platform to learn and practice coding. The syllabus is also frequently updated and thus a good solution for current developers to stay up to date with new addictions to coding languages.

Screenshot of Introduction to JavaScript progress on Code Academy tutorial.

References

Codecademy, 2019. about. [Online]
Available at: https://www.codecademy.com/about
[Accessed 21 10 2019].

What is Ruby on Rails

March 18, 2019October 21, 2019 adminLeave a comment

Where HTML is the builder and CSS is the designer in a website; JavaScript is the wizard. JavaScript is the one that makes stuff work such sending data from forms or some specialised functionality. All three of these languages focuses on front end design.

Ruby on Rails works on the back end of websites and apps to request and fetch data from databases and to display data that contains HTML, CSS, and JavaScript content.

Ruby coding language is best understood when compared to JavaScript. For example, in the following video you see how you would use Ruby and JavaScript.

Ruby is easier for the programmer to use. It is simple and thus harder to create errors and bugs.

“Ruby on Rails (or Rails) is a web development framework that gives Rails developers a time saving method for writing code” (Morris, 2018). Frameworks are collections of code libraries that are referred to in the coding process to save time when doing time consuming and repetitive tasks such as building menus or forms. Rails is built on the Ruby coding language. It’s key tenets are:

“Conventions over configurations” which helps save time by defaulting to what their developers believe are the most common convention rather than specify though intricacies of configuration files.

“Don’t Repeat Yourself”: the DRY principle which basically mean what it says. If you have to write the same code twice, then it’s written wrong. This helps keeping things simple which means easier to maintain and harder to mess up.

(Morris, 2018)

The role this syntax would fill would be as an aid to build websites. You cannot use this to replace the original trio, but rather as a method of doing the same things differently. This would be a good addition to a designers repertoire for projects that need to be updated frequently.

References

Morris, S., 2018. 4 Key Things You Need to Know About Ruby on Rails. [Online]
Available at: https://skillcrush.com/2015/01/29/13-ruby-rails/
[Accessed 13 02 2019].

2D vs 3D animation

February 21, 2019October 21, 2019 adminLeave a comment

The most renown difference between 2D and 3D is the result that people see. For example, in the photo below the first examples are from Tegami Bachi of Pierrot studios. For 3D examples I will be looking at How to train your dragon: The hidden world.

Divine, (2011), tegami bachi reverse 25 end [ONLINE]. Available at: https://randomc.net/2011/03/26/tegami-bachi-reverse-25-end/ [Accessed 21 February 2019].

Dreamworks Animation, (2018), Hiddenworld [ONLINE]. Available at: https://www.howtotrainyourdragon.com/ [Accessed 21 February 2019].

The most renown difference between 2D and 3D is the result that people see. For example, in the photo below the first examples are from Tegami Bachi and Bleach of Pierrot studios. For 3D examples I will be looking at How to train your dragon: The hidden world.

From the above image you can easily see the difference in dimension, specifically called depth. While in 2D animation you can create immersive worlds, it is usually made via using art techniques such as illusion and placement but is still only made through ‘faking it’. Essentially 2D artists draw the scenes with various software and tools. In 3D another dimension is added that is far more immersive compared to 2D animation. It is done through modelling where they create the character and ‘rig’ it into a puppet. This process means that characters are far more lifelike. Geometry, textures and physics are replicated based on reality.

Both styles have their pros and cons. For example:

2D animation is more forgiving. If you need a character to stay still, it won’t attract as much attention where in 3D animation you are forced to ensure a character is moving a little to prevent it from looking dead.
2D animation will never be as realistic as 3D animation.
2D animation style may change depending on the artist, where 3D modelling prevents this through the use of modelling.

Music Video

October 22, 2018 adminLeave a comment

My music video is fairly similar to my group members. It starts out with the two characters starting their day and walking around. Then moves on to Dusty losing his shadow. He starts looking for him and asks around. He then kicks the bucket and things start reversing. He is still looking for his shadow but the world around him is in reverse. At the end they do find each other and time flows normally again.

Due to the fact that the video size is over the limit, I will link to YouTube where I uploaded the song.

Refined animation showreel

October 22, 2018October 22, 2018 adminLeave a comment

I think I did fairly well with the animations. I probably will go and do more animations later on to replace the walk cycles and homer at the end, but I feel that this is a good show reel for what I accomplished in my second year. These were my first attempts at animation, and I believe they need to be acknowledged. I had a lot of fun doing this show reel. It felt like going down memory lane. The only thing I changed was the speed and duration of the animations to the lyrics of the song. This is also one of my favourite artists, ironically who I listened to while working on a lot of my work.

The song is Oh Glory by Panic! at the Disco.

The reasoning behind the order is one part to fit the song and the other because it reminds we of the sequence we made them in. Originally, I wanted to end with my stop-motions since they were the best executed but the stars popping up fit the song so perfectly. The second stop-motion flowed more naturally after the first one. The Rotoscoping one fit the beat of the third part of the song very well. The walk cycles are there to remind me of what we did, because we did a lot of walk cycles. Homer at the end feels like saying “Yay, it’s the end!” just for the fun of it. It feels like a personal narrative my year.