Animated StyleSheet — Implementation And The Design Process
Click Here To Review My Style Sheet on GitHub.
LINK TO MEDIUM POST: https://medium.com/@molliebourne16/animated-stylesheet-implementation-and-the-design-process-2c51a4939543
Introduction
Animation for the web is something that not many of us think about but we actually see and use every day, when referring to animation most people relate Adobe Flash and the 1990’s, but actually we use animations every day. Animations can be subtitle or more in your face, but most animations can be a simple as; sliders and hover links that change colours or they can be more advanced like hamburger menus, some might be larger and flashy, although this isn’t something seen so much now flash has been overtaken with new technology advances, “rise and fall of flash” .
With advances in technology, designing animations has grown, it’s now something that we use everyday without knowing it. Flashing over the top website animation has been redeveloped into a more subtitle more useful type of animation. Animations can be used within websites to hint at how things work providing the user with a better experience and understanding of a website, Carrie Cousins. Animations can be many things, that we look at every day such as loaders, buttons and more; this article will explore those. a
The breif given for this project had two different scenarios, both very different, the first being a short animated video and the second was an animated stylesheet, this is what I have chosen due to being able to gain a broader range of skills that I could develop and having a larger interest in this scenario. My stylesheet will compile a list of animated UI Elelements including buttons, sliders, loading cycles, hover images and text, and menus.
Animations are the basic foundation to every website, and user experience that allows each user to interact getting hints, allowing them to navigate the website, these fiunctional elements help improve the users experience, keeping up site traffic, as stated in Smashing Magazine Article by Nick Babic.
Originally before Implementation I researched animation to help broaden my knowledge and skills, some of these were; Platforms and Software( HTML, CSS, JS or Tumult Hyper 3) in which an stylesheet could be created, specific elements like; HTML Canvas, CSS Transitions, JavaScript and CSS key-frame animations and overall as well design trends for the current time, material and flat design.
Documentation Of Implementation:
Implementation (Documentation of the Design Process):
All projects follow a design process and my project is no different. My design process was very much like an agile development process and would follow through something like the image below. The process was designed based on the technologies I would use, time frame, design tends, the scale of the project and the overal best practice.
This process will be completed by going step by step through for each animation created on the style sheet and the testing each animation to get feeback as to whether each animation works correctly and to make any changes or improvements necessary.
Something I focused on in both research and planning my initial ideas was producing a stylesheet with UI elements that were animated, could be used in a functional website. also making sure that they were subtle not too obtrusive for a user who would eventaully interact with them.
My aim was to create simple and effective animted UI elements that would hint and enhance at the users perception of a website rather than put them off and confuse them. From here I began to mindmap ideas and start looking a how to approach the project.
Approaching The Project: Animations are used to give hints and imply direction and create balence, (Studio by UXPin) within a webpage to create a invigorating user experience. So the chosen apoach was to be subitle, but obvious and eyecatching. my intal approach was to use CodePen to build a variation of experimentations to gather knowlegde and skills to implement within the stylesheet.
I aproached these experimentation with research and by looking at other ‘Codepens’ to gain ideas and see how they approached each animation, I found that the key approach was to clearly label and comment each section by planning what was needed.
By experimenting with defferent types of animations and techniques I was able to create some good experimentations.
Experimentations: Creating some basic experimentations which I later adapted to help create the basis of my foundation for my stylesheet. are shown below. These experimentations turned out well although with the first experimentation I decided within my final product i was going to focus primarily on the menu icon rather than the list.
Experimentation 2 was something I decided to adapt within my final product because i felt like it worked well and shown a good experimentation style.
Planning
Before creating my stylesheet, planning and developing skills were my main focus, I needed to plan both what I wanted to include, what could be animated within a website. So I started to jot down ideas, working out what would need researching and what of my skills I might need to develop. I found that a lot of animations are subtitle through the use of UI elements most of these can be created through the use of HTML, CSS and JavaScript.
Planning was then expanded on and refined through a mind-map which was created through developing a list of possible animations and animated UI Elements that could be created. From the mind-map set of sketches and medium fidelity plans were created, these specified how I wanted things to look and be laid out, with a consistent colour scheeme.
After Sketching out a developing and refining my ideas i then produced a higher fedility plan in which i wanted to follow to create my style sheet.
Documentation Of The Production Of My Animated Style Sheet.
The starting point of implemtation for my stylesheet was deciding to implement it by code; after deciding this next was setting up the file structure gathering images and resources that were needed, setting up a file structure was important because it allowed me to keep everything organised.
I then looked for images on a ‘Creative Commons’ site; filkr.com I then looked for images that I could use without any copyright infringements, that I could download. After downloading the chosen images I then named these appropriately, from here I needed to set up and create my pages and files within my chosen TextEditior.
When I Intially began to implement, I started off by creating a grid that would hold the layout and style the webpage with a consistant colour scheme. This allowed me to mark up the page creating a layout of where I wanted everything to go and how I wanted it laid out.
I then created each UI element and styled and animated everything separately, testing and making sure everything worked and was laid out correctly as i went and added to the stylesheet; as each element was create it was placed in its own group or cluster using HTML <div> tags, with .class or #id so that each could be styled appropriately with CSS, and linked to JavaScript/JQuery.
Throughout the implementation I followed through with the design process that was working best for me, which was creating each sectioned animated elements indervidually, and completing and testing each as I went before moving on to the next. I first made each of the sections UI elements using HTML, in then added if needed any JavaScript and or JQuery, before then styling and animating each with CSS, these animations were in the form of Transitions, KeyFrames, Transformations, Translations and through the use of web-kits etc.
This process worked well and allowed me to make any adjustments clearly and easily, fixing any issues and errors that may also have occoured, it also allowed me to complete the project in manageable sections and chunks, making stoping points clear and acceptable, knowing that i could start on another new element when picking up the project again.
Conclusions
Research: At the begining of this project before the creation of my Animated UI Stylesheet, research was conducted on animtions for the web and why we need and use them, to help me decide what I would need to consider and learn to create and implement my own choice of animated UI elements. I researched and looked in to different animation techniques, to find out what would be the best way to approach something like this, and make the project effective and successful. I first looked at the different ways in which I might have been able to created the stylesheet I looked at both coding it by hand and also the program Tumult Hype 3, which allows you to create things in a GUI and then export it has HTML, and CSS but after reading and researching I found that you can only do so much with Tumult Hype 3 and that there was also a lot of issues with the new update and then after experimenting with it I found it made things harder than they needed to be so I chose to create the stylesheet by hand coding it. From here after desicing to code my project by hand i started to look at animation techniques with CSS and other Scripts, I found a couple or article that described the capabilities of the animation through CSS and JavaScript and another that stated some of the more praticle techniques of creating animations from Smashing Magazine.
Feedback Results and User Testing: Feedback and user testing and testing in general was a large part of this assignment due to needing to make sure that everything ran smoothly and was effective, I tested the Stylesheet UI animations as i created them but wanted to get some real feedback and testing from other to see what could be improved on. Due to weanted to do this I created a simple questionnaire for people to fill in, I then asked 6 different people to test my animated stylesheet and complete and fill in the questionnaire to gain feedback and to see and determine if there would be any improvements. From here I then Collected the data in to a spreadsheet to analysis the results together ask shown below.
As you can see above I have collected all of my feedback and user testing to analysis overall, the respondents stated that the animations all work and one stated that you might miss the animated text if you weren't looking for it as it only run once when you load the page, so therefore a loop for this animation needs looking in to, i had main positive feed back as you can see in the image above, 2 respondents stated that they though all of the animations were fitting for a website but 4 stated that the last animation would need changing in to a context before it could be used for a site, which i agree with therfore this needs changing with these comments they all had favourite animations most like the menu buttons and the loaders where others liked the hover buttons, there were also positive additional comments as well.
Success Of The Project: Now being at the end of this project i feel like it has gone rather well, by following through with the process used and by conducting any research that i need before begining the implemtation of the project i was able to gather all of the information and develop the skills that i needed to create a successful stylesheet, some of the skills i developed were new like CSS KeyFrames, and Web-kit, but others I had used before and just developed a large and broader range of skills within these. By using the research to create experimentations and get used to the technologies I was able to reference to these and the research to help when I got stuck or had any issues.
Reflections On Design Process: For the implementation of this project I used and created a design process in which worked by completing a section of animated UI elements testing and making any changes before moving to the next. Each UI element in each section worked by themselves and didn’t rely on others to work. I feel that this process worked really well and was the easiest way for Myself to carry out the project, ensuring that there was clear stoping points and making sure things worked well and effectively before moving to the next. With this though time managment became an important factor to consider knowing that there was only 108hours over a 6week period to complete the project, making time-management key, knowing that there was a lot of new skills and code to learn as well as making sure each companates worked. Already having some knowledge of HTML, CSS, JavaScript helped because many of the animated elements were only add-ons to what Ialready new, allowing for a good understanding of changing from static to dynamic elements, making things easier.
