28th December 2018

Mobile Graphics and Animation

Due to it being Christmas time, I did not make much progress with the animation itself, however I did research on fonts and looked through the fonts on Google’s (2018) font CDN. After downloading and testing out the top forty fonts, and how well they matched the style of animation I was going for, I decided to use Ubuntu Regular – which is also made to for, and to complement, Ubuntu (2018) therefore I was familiar with the typeface and had a preference for it.

After doing as much research as I could, and testing out the tools in Adobe Animate CC (2018), I decided to make a proper start to the animation and used the simpler included tools alongside imported assets that I made in the previous Mobile Graphics and Animation assignment in order to add content to the animation and make it better at capturing audiences and appealing to the intended audience – business startups and anyone looking for an online presence.

The development of the animation takes place over the commencing two weeks when an evaluation of the quality will occur, alongside a test plan and a reflective account on the development process of the animation.

Markup Languages and Styling

As I have completed this assignment and a reflection on it, I had the ability to reflect on it personally and consider what I may want to do in the future.

Overall, the development process went really well and allowed me to be creative and be autonomous, managing the project and making planned commits to GitLab to track progress and help with debugging if issues arise in the future as well as being able to take in a lot of knowledge made this assignment enjoyable. A key part of it was also communication and teamwork as working alongside class mates enabled creative thinking for how to overcome certain issues and errors when developing, which also gave a more realistic experience than in previous web projects I have done to what working in industry will be like. In spite of this, working at home was still my preferred option as I could still collaborate with a handful of people but was able to work on my own devices and with a better workflow alongside a better work environment for me.

In regards to how the website turned out, one may see for themselves at https://ocweb.co.uk. As for my opinion, I believe I should have followed the design specification closer due to the academic nature of the assignment, however if I was to create this website under my own terms I would have allowed myself to branch off more and make a lot of changes and allocate more time to the entire project, which would allow the website to feel more like a ‘fluid in a glass’ where all the content naturally flows to scale with the device – as is seen partially done with the navigation bar at the time of writing. In addition to this, I would need better assets – especially images for the content, as the current ones are of different sizes and have some issues with scaling, while also not being the most aesthetically pleasing and not having depth to them; 3D models of websites with shadows and stacked pages on top of each other alongside additional details such as mouse cursors and a containing monitor would make for a much more engaging and professional website as I could then showcase my work and exactly how it was put together – with what technologies, and how it works.

All in all, I believe this module went really well – ignoring the late hand in due to technical difficulties which exaggerated the already too-short time frame for development as the amount of content and pages on the website was much more than required. I have made up for my lack of doing anything web-related in the past months and have gained insight into what i want to do in the future, and have already planned multiple personal projects in the future – one of which includes a re-write to my messenger, which could tie in fantastically with the forthcoming JavaScript and Database modules.

References

Adobe (2018) Announcing Adobe Animate CC 2018. Available at: https://theblog.adobe.com/announcing-adobe-animate-cc-2018/ (Accessed: 13 January 2019)

Google (2018) Google Fonts. Available at: http://fonts.google.com/ (Accessed: 13 January 2019)

Ubuntu (2018) Ubuntu font. Available at: https://design.ubuntu.com/font/ (Accessed: 13 January 2019)

21st December 2018

Mobile Graphics and Animation

As I was finishing off with web development, I could focus a lot more on my animation for this module and re-configured my workspace to work efficiently across two monitors, and created a folder for my project with all of the assets imported into it so I had everything in a logical place to make development easier.

After creating my project file and configuring everything, I started to test out the tools in Adobe Animate CC and get accustomed to a different workflow compared to Adobe Premiere Pro or Adobe After Effects. I made the background layer and the first three main keyframes of the animation. As a result, I got insight into using the shape tools – mainly the rectangle, oval and line tools, to create elements on the page and the text tool alongside them to create effects while providing ample information to the viewers. Nevertheless, I had to scrap these frames as I did not make a good utilisation of symbols, which made applying effects such as opacity and making classic tweens impossible.

Taking the previous points and experience into account, I instead opted to watch a video by Draw with Jazza (2016) which gave me an insight into how I should be working in Adobe Animate CC and where I was going wrong.

 

Markup Languages and Styling

I set up the server that’s hosted by GoDaddy and made finishing touches on the website before fully testing it and logging all of the tests I have made. I also relied on the Markup Validation Service by W3C (2013) to check my markup for any glaring issues, which resulted in having as little markup errors as possible – although one significant error could not be fixed due to the lack of time.

I also did wrote a report and full test plan of the page, which included testing across multiple devices and different browsers. Even though I managed to do everything on time, I lost a large majority of my work due to OneDrive overwriting my files with older versions and the file history feature not having the most up to date work, so I had to re-write it and upload the work late.

 

References

Draw with Jazza (2016) The ULTIMATE Guide to ADOBE ANIMATE CC! (AKA Flash) – Tutorial. Available at: https://www.youtube.com/watch?v=3iXSQ8VcPcU (Accessed: 13 January 2019).

W3C (2013) The W3C Markup Validation Service. Available at: https://validator.w3.org/ (Accessed: 13 January 2019)

14th December 2018

Mobile Graphics and Animation

As I was mostly focusing on my web development at this point, I only slowly configured Adobe Animate and set everything up to be ready for when I start making my animation. During this time I set up my workspace to better match the layout I was used to in Adobe Photoshop and Adobe Illustrator. I also changed the default project template to a more suitable and modern aspect ratio, deciding on a sixteen-by-nine aspect ratio with the base template file being only 1280 pixels by 720 pixels as I could upscale it when publishing if a higher resolution is desirable.

 

Markup Languages and Styling

The website was coming together and I ended up using a relatively large amount of JavaScript relative to my skill-level with it, however due to the previous configuration changes in my editor it was easily manageable.

As a consequent of in-optimal images on the ‘my work’ page, I had to change the image sizes per-section in order to fit intended grid design I had made during the design process, but this became problematic as relative scaling gave issues across multiple devices therefore the entire JavaScript that handled the DOM elements on the HTML page was re-written to write different CSS rules depending on the screen width. The result was a page that could be expanded upon and scaled to fit various screen sizes and resolutions, although it was not done with every page as certain pages, such as the about me page, are only based on text and re-creating pages was not feasible with the amount of time available.

An issue I faced at this stage was my current web server having issues, my server was running correctly however the NGINX (2018) instance was encountering errors and not starting up. I could not diagnose the issue, and settled to use a GoDaddy with cPanel to host my website as, even if I could get my server to work, the instability of the server beforehand may have been problematic.

 

References

NGINX (2018) nginx. Available at: https://nginx.org/en/ (Accessed: 13 January 2019)

7th December 2018

Mobile Graphics and Animation

I installed Adobe Animate CC on my computer at home and tried to familiarize myself with the tools, although I could not get started with animating because the workspace was very different to what I was used to when working in Adobe After Effects and Adobe Premiere Pro, therefore I decided to watch Connor’s (2016) introductory video to Adobe Animate which gave me insight into the frame-by-frame animation style that tends to be used when working in Adobe Animate  – which contrasts to the keyframe animations I was used to doing in other Adobe programs.

Markup Languages and Styling

I researched different UI Themes and Syntax Themes for Atom Editor to better suit my preferences and make developing more comfortable, and settled on Seti and Monokai Seti. Another noteworthy change I made that helped me with development was to set up AMD’s Eyefinity (2019) to scale my editor over two screens flawlessly, which enabled me to use the atom-ide-ui package to allow me to navigate through my code.

The aforementioned changes that I made enabled me to work more efficiently, which was necessary as I decided to create some of the website using JavaScript to create/set content, in particular this was used for the ‘my work’ page as I decided to keep it as one page with multiple sections. As documented by Mozilla (2018), I looked into how to use JavaScript to manipulate the HTML DOM elements for a smoother website experience.

References

Connor, D (2016) Learning Adobe Animate CC: Animation. Available at: https://www.lynda.com/Animate-tutorials/Learn-Adobe-Animate-CC-Animation/475937-2.html?srchtrk=index%3a8linktypeid%3a2q%3aAdobe+animate+short+animationpage%3a1s%3arelevancesa%3atrueproducttypeid%3a2 (Accessed: 13 January 2019)

AMD (2018) Multi-Display Eyefinity Technology. Available at: https://www.amd.com/en/technologies/eyefinity (Accessed: 13 January 2019)

Mozilla (2018) Document Object Model (DOM) | MDN. Available at: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model (Accessed: 13 January 2019)

30th November 2018

Mobile Graphics and Animation

I finished off all the logos, banners and assets before the submission date and set up a bleed area for the documents that are designed for print. After finishing up the banners and clipping out the elements that were on the bleed are I went through all of the project files and made sure they were done properly and up to standard without any issues I may have missed, and then submitted the assignment through Moodle and was generally satisfied with the level of production.

We have also received the third assignment and I read through the specification and what it was asking for – an animation advertising my freelance development business. I went over the assignment and had some ideas for what animation to make, however I prioritised the Markup Languages and Styling assignment substantially until the hand in date which would allow me to focus more on website development, and then the animation after I am done with web.

 

Markup Languages and Styling

My website started to resemble the design and I could add content to the home page, however, due to no prior style rules being applied to the content wrapper or elements, I had to figure out how to place the content of the home page and scale it with mobile before I filled up the other pages so I have a base stylesheet to work with.

After figuring out the scaling for the content of the home page, the about, contact and cv pages were filled with their respective content, which led to issues with scaling on different pages due to differing content and this had to be figured out.

An additional point during this stage of development was relying much less on resources and help from Stack Overflow (2018) as I have picked up a lot of knowledge on using flexboxes and could therefore figure more things out myself and more efficiently develop the website.

 

References

Stack Overflow (2018) Stack Overflow – Where Developers Learn, Share, & Build Careers. Available at: https://stackoverflow.com/ (Accessed: 13 January 2019)

23th November 2018

Mobile Graphics and Animation

The web-developer logo version of the logo was finished, and I created several variations with slight differences in order to make the logo more usable in different contexts and followed Jager’s (2018) advice on designing for colour blindness in order to make a better contrasting variation. This knowledge was also applied for the designer-oriented logo, as the default colour scheme was blue and grey – which may cause problems for readability to some, therefore different coloured versions alongside higher contrast and less cluttered versions were made.

By this point, I have learnt how to better utilize the brush and line tools in Adobe Illustrator, which helped in making the banners and assets for the animation as I could manipulate shapes and envision what the banner would look like, and how it would be composed before I start making it so that I do not have to restart or make adjustments.

Markup Languages and Styling

I have made progress on styling the page and used Mozilla’s (2018) write up on media queries in order to start to implement them into the page properly. Thanks to this, I was more aware of the possibilities of using media queries and the syntax so that I could only apply style properties if multiple variables are true.

I also opted to not use PHP for a template in case the server goes down, as PHP is a server-side language and needs to be hosted on server, and it adds to the complexity which could possibly become overwhelming especially with an oversized project for the amount of time available.

 

References

Jager, T. (2018) How to Optimize Charts For Color Blind Readers Using Color Blind Friendly Palettes – VenngageAvailable. at: https://venngage.com/blog/color-blind-friendly-palette/ (Accessed: 13 January 2019)

Mozilla (2018) Using media queries | MDN. Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries (Accessed: 13 January 2019)

 

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.

9th November 2018

Mobile Graphics and Animation

In class we were introduced to Typography and designing by utilizing . We have analyzed the different portions of text and how certain things came to be – such as the naming for lower and upper case, spacing of text and friendliness.

The things we learned gave me an idea of how to amend my ideas for my logos in order to make them more easily readable and what steps to take to make a more complex logo easily readable for all audiences.

Markup Languages and Styling

I have made a start on my website and am setting SMART targets in order to push forward to reach my target in every University session and when working at home.

I am also starting to recall previous knowledge in HTML and CSS and use that to give myself more time to make the more challenging aspects of the website.

2nd November 2018

Mobile Graphics and Animation

I have received feedback on my assignment and made improvements to it, re-structuring parts of the report to fit the word count with more information and to flow better and be easier to read.

Furthermore, I have uploaded the assignment and started working on the second assignment. This has, thus far, been an introduction to some design and typography heuristics alongside getting inspiration for my own logo designs and coming up with some quick sketches.

Markup Languages and Styling

We have had an introduction to the assignment and are slowly working towards it, though we haven’t done much work towards this yet.

I have, however, made some adjustments to my own Raspbian server to open up the possibility for a development-site on the domain and to not interrupt the usability of my live website.

12th October 2018

Mobile Graphics and Animation

So far we have completely went over the assignment specifications and have had several lessons where we discussed Vector and Raster Graphics, File Formats, Compression, Print Media, Screen Media and Interpolation Algorithms.

I have heavily researched the topic area and carefully selected what to include in the report depending on the importance of the detail relative to what a graphic designer should know when working in industry so that they can select the correct file formats and know how to work with screen media and print media.

Markup Languages and Styling

I have created two colour schemes before switching the idea of the website to a a more minimalist and aesthetically pleasant design, which came with the switch of the colour scheme to utilize a bigger range of colours to create a contrast between content and allow the use of colour-gradients across pages.

I also created Desktop and Mobile visual mock-ups and wire-frames in Photoshop and exported the files into the working folder as PNGs.