16th November 2018

Mobile Graphics and Animation

I built upon two sketches for logos.

I decided I wanted the first logo to have strong connotations with creativity and Adobe, therefore the logo looks similar to Photoshop and other Adobe programs. This creates the desirable effect of painting me as a designer, and points in the direction of me being/becoming more and more fluent in Adobe’s CC products and being able to deliver. However, this logo feels a little too simple and lacks some creativity therefore further work will need to be done with it.

In the mean time, I started working on the second logo, which is heavily focused on showcasing my web-developer side and skill-set. I incorporated the angled brackets “<>” that are used in the HyperText Markup Language into the logo alongside my name. The colour scheme is also monochrome as it is aesthetically pleasing and professional, but also fits a lot of contexts and generally matches a lot of colours.

 

Markup Languages and Styling

I started making the first page of my website in order to have a template for all the other pages, and a fully working responsive website experience.

So far, I have managed to create the base layout using HTML and simple CSS, and figured out the display modes for elements so that they are aligned properly. This navigation bar does not scale down with screen size natively, and instead it currently overlaps when zooming in or making the window size smaller. However, when scaling up in size, or making the window bigger, the nature of the flexbox makes the navigation links easily accessible and identifiable due to them being centered – the website remains usable at 21:9, even though such a wide aspect ratio isn’t intended for single-page browsing at once and instead multitasking, therefore I have decided not to scale the page up higher as it will have to differ significantly from the original designs due to the required font size and placements of items.

Currently, the page is a base for properly aligning everything and applying size-specific styling. I plan on doing a majority of this in the coming week with @media queries, and possibly animating the transitions to some extent in case users are scaling the browser after loading the page.