These are my first wireframes when I didnt know what was going on

Then I built out the basic wireframes, what screens I need and what each screen says

Then I started applying my chosen fonts, colors and assets

After some more refinement, I added a new illustrations, and amended my chat screen. The extra elements really made a huge difference.

I could finally get going after wifi frustrations.

First up just reading about what goes UI design is and watching the aero and other tutorials on how to use XD…

It lowkey took me a while to get used to it and i Just figured out that you need to drag the artboard name to move it and i feel dumb for struggling haha

Firstly I’ve taken a look at a lot of Behance projects to see what they included in their app, and of course the latest tut on aero really helped me understand what screens I need to do and how to go about it. I honestly felt really overwhelmed getting into this and didnt really know what to do to start and its taken me so much reading I havent even decided on the look and feel of my design.

I have however looked at things I liked and now know what I want to incorporate in my design

I definitely want to include a lot of soft colors into my design, and make cute vector illustrations. It’ll help draw users in and though animal adoption apps may attract all ages, I suspect it tends to attract young kids/people begging their parents for a dog.

Splash and Onboarding screens

I really like the dot/swipe what do u call it thingy idea to introduce your app to the user.

So far I’ve been outlining/mapping out my layouts, what each screen will say, so I know what assets, illustrations etc to design.

When I scroll over pages the triangles go over my text for some reason, even though in my code my text is on top. I think its to do with the parallaxes maybe, but even moving the containers hasnt helped, and i tried z index as well. Idk what to do :((((

Only when I look at it in inspect does it look fine…..

I have all my images on my webpages…

Next I need to do each page’s parallaxes, add the text stuff… and then the navigation.

Ta dahhhh eet ees e nice

I applied the 4th parallax tut to my landing page, here is some documented progress…

First I made my 2 containers, the assassin is the controller. I sukkled a bit with positioning at first then realized it was because the way i saved my triangle pngs was that they were small on a canvas instead of full size.

Anyway then I added cute border shapes…. they move a bit more than the images inside.

SOme more cute lil elements

Complicated ass code. I thought I did it wrong then I continued the tut and saw you did it wrong at first lol

I am working on my landing page which is going to have a lot of links on it, and realized i had to do it differently as I hadn’t made my pages different htmls. My pages are just different divs on index.html.

Luckily I figured it out. You just need to give your div an id, and then link your href to that id #.

Yeeet i am a hacker man dan

As per consult, I made all pages hald black and white half color. I also corrected some of my assets so that the images blend into eachother better.

For this one, I cut the foreground pic in two and made it half b&w. It looks more multi layered now.

I just made this bg pic b&w…

Now everything looks more cohesive:

As you can see I’ve also experiments with making the dates big and low opacity aqs background elements. Not sure if they should be positioned the same on each page, as for some pages it looks better elsewhere due to the images…

After doing enough tutorials and actually understanding things…

I started coding my first page, the loading page, which I want to look like this eventually:

I want them to move to look as if they really are jumping/falling.

So far:

Some process images

LOADING SCREEN

CODE PEN LOADER:

LANding PAGE

So BASICALLY het my ai design doc nie reg gesave nie so ek het van my goed verloor. Was seker te moeg gister aand idk. But i had some pics on my phone so u can kinda see whats going on

The landing page’s design is the one page I’m undecided about design wise. Assassins Creed’s loading page is that white background with weird moving white line things. So I thought I’d imitate that effect but with triangles.

My idea for my landing page is to put the assassin pic in a container and when you hover him, the other shapes move like in your 4th parallax tut.

Assassin = controller, when you hover him the triangles move around

I dont know if I should make some of those pictures^ smaller triangles and put them inside the white line triangles, or if itll look cleaner with just the shapes. It might look nice if all the images are b&w.

Navbar is a classic slide out menu, but I thought I could turn the timeline into a navbar as well where you can hover over the dates and it links to the pages.

Or: Scrollbar/process thingy? I wanted to find a tut for something like this but idk what you call it.

1st Page

I lost the image for what it looks like when text appears, but it looks like the next page except the triangle is top left like this:

For all my AC game background pics, I want them move up/around when you hover over it. I assume that is scrollmagic?

2ND PAGE

Parallax scrolling:

The top three photos need to move to the side when scrolling

I saw this effect by css.coder and I thought it could be a nice effect for my text.

You only see the first sentence and the rest is revealed when hovered.

3RD PAGE

4TH PAGE

5TH PAGE

6TH PAGE

7TH PAGE

Here are some of the many assets I had to make

I need to tweak a few things, but I can basically put everything in Ae now and only need to design my character now.

I’ve started to make trees for my squirrel animation, and I’m trying out different ones, The rejected ones might be used for my other animations…

CONCEPT 1 // SQUIRREL ANIMATION

CONCEPT 2 // MOUNT FUJI LANDSCAPE

CONCEPT 3 // SNOW STAR TRAIL LANDSCAPE ANIMATION

Today we were briefed on our new haiku brief. We need to make 3 40 second animations of 3 different haikus, using cinema 4d, after effects and illustrator. *remember mt mograph motion plugin to download*

I’m trying to find ways to animate text and other effects so I went and searched for animation tutorials I could use:

Haiku ideas so far:

Today we started working with cinema 4d and Werner took us through all the tools of the software.

Notes:

alt g group objects

click and drag one layer to another, arrow down means parent, left arrows places it in between

symmetry, dear shape in other shape gives mirror effect

in timeline double click to create, change colour etc the drag it onto your shape

right click on object, line cute make own selection for segment

SKateboard: make plane, select edges, extrude tool, drag out and bend up. Select nodes at ends, right click bevel and drag to round. elect middle edges, drag

to download: vfxmed

Making my bodycopy text bigger only increased visibility by a little, but at least you can see it now. My arched sentence is much better though as the text could be made much bigger and bolder.

Something I don’t understand is that every element is in the right place in my animation, such as the planets following their paths on the lines, but when I put it in roar everything stays a bit out of place no matter how much I try and experiment with resizing. It may have to do with the alitude but I couldn’t change it that much as the video layer needs to be a specific height above the other shapes.

^When I edit in roar the video layer is correctly placed above my shapes but when scanned it goes a bit off:

Getting to know Roar the past few days wasn’t the best experience. It seems the want to make it difficult instead of easy to use. It’s even hard to select objects as it just moves your whole background around and drives you mad.

Then it looked like my pngs have a box around them, which it shouldn’t… and I though I couldn’t fix it but magically they disappeared once you look at it in AR.

I realozed I had to take almost everything out of my animation background, as it didn’t look good when you’d see double of some elements and it just looked off. Now the background seems quite empty though.

Another problemo is that the bodycopy animation comes out so faint you can barely see it. It may be due to the green screen…soooo I might still change my after effects background to transparent and see if that changes anything,

This is it so far, basically finished besides the bodycopy problem. The app messed with the colors too for some reason…

Im linking my variable font correctly but for some reason it won’t show up 😥

I also tried linking the font file in my source code but it hasnt made a difference

Today we did another coding exercise, which while it looks simple took some trial and error.

At least this time I managed to set it up and link my css all on my ownnnn

Here is what we did so far:

We then learned how to apply the css of variable fonts from Axis praxis and animated our text.

I have discovered Behance and although it is wonderful I’ve decided it is in fact quite demotivating because how will I ever live up to these people’s amazing work

I want to animate those 3 small black circles around the large circle on my poster…

Today we are setting up our Roar accounts and being shown how to make our layers into assets for importing to After Effects.

Some things I need to remember are:

• Dividing my shapes up in layers according to how I wish to have it animated
• Roar only allows 4 layers
• Remember to make the backgrounds transparent when exporting.
• export as mp4s
• From Ai to Ae: double click where u import files, Import, file, select ai doc, import as composition retain layer size, it keeps all the layers.
• Release groups to sequence to make 4 layers
• (select main layer, options)
• Ae: create, create shape from vector
• keyframe shortcut: U
• Choose font with bold and light, make 2 text layers
• create shape from text layer
• double tap U on shape layer, select all paths by holding in cmd, click top keyframe thingy, makes keyframes for all of them. Then, click U once on shape outline layer and click it again. This will make only the path keyframes appear dropped down.
• snapping tool at bar in top
• scrubber: cmd arrows is 1 frame at a time
• cmd shift is 10 frames at a time

We went through the basics of animating shapes in After Effects again, and were shown hoe to make gradients, change path shapes etc.

Then we made our names into shapes and animated the letters to go from bold to light and vice versa.

I realized one word was missing from my sentence, namely “Unfailing.”

I suppose I could just leave it out as the whole sentencce is also written out on the poster already…

Nevertheless, here are 3 different layouts I’ve experimented with:

This saved my life when I realized I had made my poster a3 and had to copy paste it on a new a1 document. It thrw my layers into one layer and I struggled with getting them into their own layers , losing my prior neatly organized layers panel…

Some things I changed on my poster was adding some dotted shapes for a bit of depth and fill, spacing out the top left corner so that it isn’t as cluttered and more elements in the corners. The rest of my sentence at the bottom of the page was arranged a bit awkwardly, so Werner helped me bymaking the text run up the side which makes it look much cleaner. The “&” is bigger now as it is a nice design element.

My body copy was a bit of a problem. I wanted to turn it into a semicircle and had managed to make the text follow the path, but couldn’t slant it horizontally. After watching a tutorial, I managed to turn my body copy text into a semi circle shape. It warps the text to look as though it is wrapped around a sphere, which gives it a cool 3d look, but I’m not sure whether I’m happy with it…

The other option is to make a few arches of text but I feel that would look too repetitive as there already are 2 other arched sentences and I’d like to mix things up.

These are some tutorials I watched to help my design…

I found inspiration in the colourful Bauhaus designs and the clean, geometric shapes, lines and layers of Suprematism.

I incorporated lined rectangles and coloured shapes into my poster.