Interface Design @captaininterfacedesign-dxb301 - Tumblr Blog

Future improvements

Most of my interactions on this website are only hover and appear functions however, I would have really liked to implement some more animations to them to make it more interactive and interesting. I was too caught up with some of the layout/construction problems (eg. skrollr) I encountered during the development stage. I think for future practices where heavy coding is required, I would definitely need to really plan everything out carefully, as well as research all the possible jQuery I could use beforehand so that I get a sense of the direction and level of interactivity I could achieve.

I also attempted to make my shirts svg animations appear one at a time instead of in a row (i.e. under each <svg> tags) however, was not successful. If I had the time, I would have definitely spent a fair amount figuring out how to do this. Theoretically, it should have worked as I targeted each of the <path> tags that were inside each of its <svg> parent tags by delaying them.

#dxb301 #futureimprovements #reflections #part2

I decided to change a data visualisation that I originally designed in the mockup; previously, the visualisation was sort of like a compass/clock where other factory accidents were recorded on it based on its time against the number of total victims. However, visually, I think this is quite confusing and unclear so I am back to using the very first idea that I had. The initial idea was to have a map of Bangladesh and as the user hovers over the dots placed on the map, more info on different accidents appear at the side. The only problem at the time was that I did not have any sort of ‘data visualisation’, but since I’ve changed the ‘dashed lines’ visualisation (i.e. with the skull background in #sectionvictims) to using shirts to illustrate, I can now also use this in the map section.

#dxb301 #data #visualisation #design #part2

In the #sectionvictims of the website with the ‘dashed lines’ and skull in the background, I’ve decided to change the visualisation to using T-shirts. It’s clearer, and more effective.

#dxb301 #data #visualisation #part2

This section comes directly after the skull section. The mockup only had a paragraph but in order to grab the user’s attention, I decided to encapsulate this section in three words: the brands that were known to have ordered from the Rana Plaza.

#dxbo301 #design #mockup #part2

Image 1 is the original mockup however, I think that both the colour of the heading text (’New Wave Style ltd’) and the typeface used are not clear enough when placed against the background colour. Another colour issue is the mustard yellow used for the data visualisation; it does not stand out enough against the grey background.

So image 2, is the updated design and has been implemented into the html and css. The background now is black with dark red ‘concrete levels’ separating the data presented. The problem now is the Didot typeface used - it’s strokes are too contrasting, thereby making it fade into the background. So in image 3, I played around with another Didone typeface, Bodoni 72. I think it’s still too extreme, making it hard to read so I may stick to Adobe Devanagari, which is also the font used for main text.

#dxb301 #typography #part2

...

So instead of using Tooltip to make text appear on hovering svg paths, I simply changed to using hover effect in css. This involved nesting the text svg inside their respective image (i.e. seam) svg, as well as using the <g> tag to group svg paths accordingly. <g> is used because <div> tags do not work with svg elements.

By grouping the paths also makes the codes clearer and cleaner; when vectors are saved as svg in Illustrator the paths are not actually in a particular order when viewed in text editor. An easier way to overcome this, in which I realised after, is to manually group the separate vectors in Illustrator before saving it as svg. This way, when the svg file is opened in text editor, the vectors are already grouped using the <g> tag.

I actually prefer this approach much more than Tooltip as it does not require html to call a Javascript library.

#dxbo301 #css #hover #svg #part2

...

I really wanted to have animation happening for my logo to make the overall homepage more interesting. I wanted to have the logo (cracked) animate by ‘cracking’ or fragmenting into pieces; there’s a lot of these typography animation effects on Codepen, however many of them are text explosion animations. And then I found this demo: http://tympanus.net/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/

One of the demos had exactly what I was looking for; basically it uses the svg polygon to slice the text on hover. I played around with the polygon points to get it to slice across the entire ‘cracked’ text/logo.

Now it’s just a matter of implementing this into my actual website...

My experimenting on Codepen: http://codepen.io/anon/pen/jPrpxp

#dxb301 #logo #typography #svg #part2

Problems...

A problem that I am encountering with my website is that when I zoom out my viewport (to see what it looks like on larger screens) some of my images get pushed down the page. After some investigation I think this may be caused by the parallax I’ve applied to those images; so as I zoom out, the images are actually getting pushed to the new viewport dimension relative to the view-height parallax/transform:translate displacement.

#dxb301 #problems #coding #parallax #part2

Previously, I had used png files for the data visualisation for the number of dead, injured and missing garment workers, but since I wanted the dashed lines to animate (appear) one by one, I required using jQuery to make this happen. So the alternative to png was to convert these lines into svg in Illustrator.

Although from lines 89-95 is trying to get each of the 3 lines to appear at different times by applying a delay, it is not working with this code at the moment.

#dxb301 #coding #jquery #svg #part2

I experimented with the logo and the blurb; it is now shorter and more concise. A button ‘Explore’ was also implemented which links to the first section of the website (aka. just below the home page). This is to prompt the user.

Parallax scroll effect was also added to the black seam image as shown on the bottom of this screenshot. So as content is scrolled downward, this image will rise up:

#dxb301 #part2 #parallax #scrolling

This is the initial markup for the home page. Everything has been done according to the mockup as designed in the first part of this project, except for the navigation. Previously, a centred/top, dropdown navigation was used in the mockup however, I have decided to change to a vertical, fixed navigation instead. This is both aesthetically and functionally more ideal for a one-page scroll based website as having a dropdown menu fixed at the top of the site would obscure content when scrolling. Furthermore, the vertical navigation labels are hidden and only appear on hover; this is to make it less distracting when browsing/scrolling.

#dxb301 #part2 #markup #html #css #navigation

Experimenting with the timeline graph alternative as discussed in the previous post.

This data visualisation allows the option of clicking onto the statistics for more info on each specific accidents. When clicked, a pop-up window will appear and the statistics of victims will be revealed.

#dxb301 #data visualisation

This data visualisation is for the second section of the website where the user will journey down the collapsed building as they scroll down the page; the building illustration will go from the top (level 6) to the bottom (level 2). Each level has a different factory company employing different numbers of workers. The data is calculated by the percentage of workers who died, got injured or went missing during the collapse against the total number of workers for that level/factory. So for example, the factory that employed the most workers was on level 6 (the New Wave Style ltd.)

#dxb301 #data visualisation

My first two storyboards included a final data that I wanted to use to visualise/ dramatise and it was on the number of garment factory accidents that took place in Bangladesh, as well as the death tolls for those accidents. However, another option to this is to visualise data for growth in number of workers in the industry (in Bangladesh) by year against the number of deaths.

i.e. workers in garment factories vs. workers becoming victims of this industry by death

Another alternative is to look at different garment factory accidents in Bangladesh since 2005 (as there are several resources that go into detail on each of the accidents) and to present this by the number of total victims. This alternative would also allow the user to click onto each of the accidents and read some of the key facts. The only concern with this alternative is that it seems a lot more complex to implement and code.

#dxb301 #data visualisation #dramatisation

Revised version of data visualisation - this works much better than the previous draft. The seam lines (i.e. dashed lines) and the cross stitching (i.e. cross) align with the context and visual identity. I did not get rid of the actual figures because I wanted to emphasise the extent of this tragedy and human cost to the user.

#dxb301 #data visualisation

This is the visual design and layout for the first two sections. Basically, visual identity like tone and palette is starting to take place. The idea now is to just stay consistent to this visual approach so that the end product is cohesive and weaves together well.

Parallax effects will be applied here. For example, after the logo section is the black background with the introduction to the problem - parallax will be applied. So as user scrolls downwards the black section will rise upwards, therefore giving the content and visuals more depth.

More to come, so watch this space!

#dxb301 #design #layout #onepagescroll #narrative #visual identity

Decided to change the style of the logo. Not only will it be able to stand out more when placed against other graphics, it is a little bit more original as I am not borrowing an actual typeface for the logo.

However, some previous posts ago on initial logo designs, the name of the website was using Didot typeface. This will still be used throughout the site for headings and text that require emphasis. Body text will not be using this typeface as its serif characteristics are too contrasting, which would become illegible for longer text. Instead, body text will use Adobe Devanagari.

#dxb301 #logo #visual specifications #typeface #didot

Trending Blogs

Recently Viewed Blogs

Interface Design