HTML/ CSS/ JS/ SVG
I am a UX Designer who can code for my tasks. Working in the industry I have gained practical knowledge of html, css, js, and svg. I can build websites and online presentations, implement SEO into the code, create interactive prototypes and workable mockups. Here are a few examples of my coding skills in action.
Coding My Portfolio
I created and coded my portfolio, the one you are viewing right now, from scratch until completion. Also, I moved the portfolio to a server that allows me to support the site and work directly with the server panels and tools.
Research Stage
Initially, I tried third-party templates but my portfolio looked like many other cookie-cutter portfolios. Then I turned to my favorite wordpress. I went through dozens of themes but could not find one that fit my vision. The next attempt was a bootstrap. The portfolio looked fine, but the bootstrap grid system did not fit my layout ideas well.
Coding and Simplifying
I used text files and a code editor for coding the portfolio. Working with the code, testing it, cleaning and implementing scripts was a pleasure for me. I enjoyed it so much that I missed the main point of working on the portfolio - to make it simple so people can easy navigate the portfolio and focus on examples.
I deleted unnecessary features, cleaned up the header and footer, and simplified navigation. I use a hamburger menu with overlay on click for mobile.
Making It Responsive
I made the portfolio responsive. The portfolio looks good on various screen sizes from desktop to mobile. I checked it using Responsinator, Responsivetesttool, and Google's mobile-friendly online test.
According to Google my portfolio pages are mobile friendly.
According to Responsinator and ResponsiveTestTool my portfolio pages are fully responsive.
I made the user experience on mobile smoother and better by implementing mobile-friendly features such as hamburger buttons and overlay menus. I tested these features on different devices and they worked just fine.
iPhone
Android
Simplifying layout to fix Android bug
I tested the portfolio on Android, iPad and iPhone as well as on different desktop and laptops. I used online testers as well as my and other people's devices. Everything was fine. Then I noticed that my Android stopped showing mobile versions. Rather than using a mobile layout, it crammed a desktop version into the device's small screen. I could not see hamburger buttons and overlay menus on the portfolio pages. What I saw was a desktop version with a tiny font and images inside a mobile screen. It became very difficult to navigate the side. My portfolio was not the only website affected by Android updates. Google search pages were squeezed on chrome and displayed everything small and text unreadable.
In order to ensure that even the squeezed desktop version would look and function correctly on mobile devices, I further simplified the layout. I deleted the second level navigations and made the navigation elements more visible. I divided the content into cards and applied a parallax effect to show them.
The bug was fixed by Android but I preferred to keep the simplified layout. It has less chances to be crashed by the next technical bug. This is one of the reasons why "UX is all about simplicity".
Slideshows Code Snippets
Ability to hand-code can be crucial in speeding a design process for a web or mobile app. In the course of my job I have created a lot of pieces of code (code snippets) for different layouts and functionalities. I can reuse them for mockups and prototypes when needed.
Tabbed Gallery
Manual Slideshow
Slideshow with fade effect
Interactive Prototype
This is my favorite code snippet. I created it for prototypes where users can go back and forth between pages.
Layout
Click on links to see the effect
page1
page2
page3
page4
text 1
text 2
text 11
text 22
text 111
text 222
text 1111
text 2222
Basic code
Animation for prototypes
Sketch
I like the ability of Sketch to turn static artboards into interactive prototypes with animated interaction. The prototypes can be previewed in Sketch and shared on Sketch Cloud. I am in control of who can see my work -- I can invite people via email, or share a link with the team or make the document public.
Anima Plugin
Sketch does not have video recording or animation exporting features but there are sketch plugins and tools that can help create videos and gif to show and play prototypes. I used Anima plugin, it has some bugs and inconsistencies. I prefer to code my sketch animated prototypes by myself. Here is one of my examples.
SVG images
SVG or Scalable Vector Graphics is a file format that allows to display vector images on a website. SVG images are different from images in other formats. While SVG images can be edited visually in graphic editing programs like other images, they can also be edited directly in their XML code. I like experimenting with SVG. See examples below:
Styling SVG images with CSS
Look what amazing changes can be done for SVG images with a manipulation of SVG markup attributes FILL or STROKE. I apply different colors for the fills and strokes.
Example 1
Example 2
Animating SVG images
SVGs can be animated the same way as HTML elements — by using CSS keyframes and animation properties or CSS transitions. Unfortunately, not all browsers support CSS-based SVG animation. The following examples work well on Firefox and Chrome but may not work on EI and Safari.
Animated Hover Effect
An animated hover effect is widely used in prototypes as well as for web and mobile apps.
Below is an example of icon style buttons with an animated hover effect I created and used for my prototyping. Mouse over or tap on the icons and you can see this effect. If you tap — you need to tap again outside an icon to shrink the icon back.
For this particular example I used an inline SVG code. Embedding it as an image or even as an object does not show the hover effect properly. I needed to use a JS library to adjust for a wide range of browsers. I hope my tricks and hacks help and you are able to enjoy the hover effect on both buttons. SVG animation is still not stable but progress is moving in the right direction. In the near future SVG animations will be a breeze to create and a joy to use.
Text Transition with Delay
I added the text transition to the SVG image and embedded it by using the < object > tag. Embedding it with the < img > tag does not show a full effect.
SVG image markup is supported in most modern browsers but applying styles and animating SVG can cause flaws in display effects. Sometimes I need to add an IE hack to increase the possibility of playing the animation in EI browsers and Android.
Changing Background Colors
I applied an animated effect to background color's values and made it play indefinitely. I hard-coded the effect inside a SVG code of both examples. I embedded both SVG with the < image > tag.
The SVG format was born more than twenty years ago thanks to an open standard developed by W3C (the World Wide Web Consortium). At that time it was novelty and most browsers did not support it.
SVG is now widely supported across major browsers and devices, not without some hiccups but things are always improving. SVG images have already established themselves on the web and have even a brighter future. They are:
- Scalable — they can be scaled up and down without losing any quality;
- Stylable — we can style elements inside a SVG code by using class names or IDs;
- Interactive — we can create interactive elements using SVG the same way we would with HTML and CSS;
- Animatable — most elements inside a SVG code can be animated.
I like SVG icons. They are small in size, easily changeable in colors, text, and outlines. And they look great. I can create icons using Sketch or Adobe XD or I can choose from thousands of icon libraries widely available online or as plugins.
I use SVG icons and images for my wireframes, prototypes and mockups to add interactivity, show logic of flow or enhanced look and feel.
It's possible to build an entire mobile or web application using only SVG images. The question is whether we need it. I saw some cool apps and presentations that were entirely built with SVG. In my practice, we mainly used SVG icons, animation and images to enhance users' experience.
