tumblr dot com
noise dept.
Jar Jar Binks Fan Club
★
todays bird
taylor price
ellievsbear
No title available
Today's Document
Aqua Utopia｜海の底で記憶を紡ぐ
Discoholic 🪩
izzy's playlists!
No title available
PR's Tumblrdome
sheepfilms
Xuebing Du
Noah Kahan
pixel skylines
Sweet Seals For You, Always
Lint Roller? I Barely Know Her
seen from United Kingdom
seen from Malaysia
seen from United Kingdom
seen from Poland
seen from Türkiye
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from Venezuela
seen from United States
seen from New Zealand
seen from Colombia
seen from United States
seen from Indonesia
seen from Brazil
seen from Malaysia
seen from United States
seen from United States
@heatherdxb301-blog
Fonts and Clicks
I had issues with loading my own fonts in. Despite googling it forever and following all the instructions I could find I just couldn’t get my fonts to work. They’re loaded into the zip file. I found when I specified no font for H1 it worked? I still don’t understand what went wrong.
And same with the clicks. Clicking on images I specified just ‘click’ but JS makes you double click. Again, no idea why this happens and google was of no help.
The new colour palette for a lighter and brighter feel
#354458
#3A9AD9
#29ABA4
#E9E0D6
#EB7260
New Design Thoughts
Getting feedback from the first assessment it was suggested I make it more info graphic based than text. So I rethought my design idea so rather than be based around a quiz its based around info graphics. While I think the info graphics get the point across how dire the situation is, they’re not as interactive. I found combining everything I got such a huge design and at the end of the day I couldn’t complete it in time. Because I put so much focus on getting the ‘bones’ right like the responsiveness I missed out on time making it really interactive with animation and javascript.
The one page site thing I'm not convinced about, I think it would be more user friendly being a multi page. But then again this might be better with more animation ‘squishing’ it up. I did find during development my mac was freezing and having trouble loading some things such as the text expanding so I wonder how this would appear on mobile devices. As I work within the internet space outside of uni, speeds and downloads and the user experience of items loading are really important to me and I believe its better to not overload a page.
Overall I think the pages I got completed Im happy with the pictures matching my wireframes. I really enjoyed working with svgs and would have spent longer playing around with them if I could have. I like how easy they are to manipulate. In some ways its easier than in illustrator! Animation could have been better done and I really underestimated how long this would take to complete.
New design layout
Link to pdfs for mockups so they aren’t are blurry
Although it raises awareness I believe campaigns like this show the situation as being a jumping out from behind the bush, rather than recognising that majority of assaults are from someone you know. So most likely behind closed doors.
UI Wireframes of the site including the different elements. The scenario wireframes have not been repeated as they follow the same format with the same elements.
These are images of my development stages. The top is my initial sketches on how to layout a survey and put in information. The difference of having large amounts of text to the final product of only ‘yes’ or ‘no’ which animation of a coloured green icon for the correct answer means it is about a ‘try and learn’ experience which allows the use of white space and interact parallax scrolling. Second image shows my notes on trying to create more fun ideas for the site. My main takeaway was having a banana with a condom that goes down as you learn what the line is. Its a play off of the tradition sex-ed and a laugh. As this is an older target audience that don’t need kids names or other silly kid-like thing to be educated. i didn’t end up having the time to put in this concept as my design had progressed to a more structured look, kind of ‘mechanical’ looking. So a cartoon banana didn’t seem to fit in.
This is the new mockup I have created to try and make the it seem a bit brighter and better use of colour. At the Draw the Line section is where a call to action will go and additional resources including the localised content of people they can talk to
Considering I want to make this site more engaging I started considering “what makes a young adult visit a site”. The main purpose of this site is to speak to the target audience, make them interested in seeking you out so you get your message across. Make it fun! What came to mind? This campaign by Metro Trains Melbourne. With over 100million views (5 times the population of Australia!) this has clearly created that demand in consumers. Its not just educational and about creating a good message, it is entertaining, you show your friends. And that is the aim about the Know the Line campaign, you have that conversation amongst friends, you make it a non-confronting platform.
After making the design mockup and considering other works I have decided it isn’t engaging enough. I want to make it more interesting with images or animation.
I like how this ikea site uses parallax scrolling and brings in the content from different directions and has a lot of information points. It adds to the page being engaging for the audience. My concern would be whether this will allow an easy responsive design or if mobile devices will have issues loading this type of content when on mobile reception.
Design Mockups with the correct answer options. Based on the trends of flat design and line icons. Following the play on of ‘know the line’ by following the lines. They will be assisted with animation drawing in the lines making the experience a bit more interesting and drawn as the person scrolls down (parallax scrolling) however the objects won’t be filled in until the previous has been answered.
COLOUR SCHEME
The colour scheme I have chosen is complementary teals and burnt oranges. Teal is the colour of sexual assault awareness so I believe it is an appropriate colour. These colours are also gender neutral. My inspiration posts show these colours can appeal to the younger audience and lend itself to flat design with white spaces, rather than in your face colour. I will blue based charcoal greys as the background colours.
Responsive Design- UI Trends
Responsive design is becoming so important for web design that its less of a trend than it is a necessity for a website to be usable by all consumers. It’s no longer as simple as designing a site for a large screen (desktop, laptop, and possibly tablet) and one for a small screen (mobiles) but with the increase in range of devices coming onto the market including wearable such as the Samsung and Apple watches, websites now need to be responsive so they don’t fall behind. Google has recently set standards now involving a rating system with the standard that online commerce needs to be decide for good experience and across multiple devices.
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/
http://www.creativebloq.com/web-design/hottest-trends-2015-11513980
http://www.hobo-web.co.uk/best-screen-size/
This a graphic and web design agency which has used a one page design which has been nominated by Awwwards for its responsive design.
These are some examples of flat design that I like. I especially enjoy the colours and creative, yet not in your face design of a higher plain. I believe it is a design that would appeal to the target audience. It also does the greying out of icons which puts emphasis on the ones they want you to click on.
The ecology centres gets across what is contained in each icon very effectively. Especially their use of colour, without the icon name you know which one represents water. If that water drop had been surrounded by yellow it would have confused the context and wouldn’t be as easily recognisable as water.
The use of white space in both examples is very effective. I have found a lot of flat design like to use all the space possible, and not allow white space which causes confusion and clutter when not used effectively.
https://creativemarket.com/blog/2013/07/31/12-creative-examples-of-flat-web-design
Using a animation function I am considering circles appearing with questions inside and a no/yes box to the side. As the user answers one question they scroll down for the other to appear. All information is retained on the screen, so they can review it. This should be an engaging act that isn’t about making the user seem right or wrong, or even testing their skills, but giving them a realistic idea about what they already know.
These are just the beginning questions. I want there to be more in-depth questions such as involving scenarios but considering they should be kept separately as to not bombard or make the user bored. It is very important that doesn't happen.
An example I found of where they involve a survey as a means to educate the user is the slavery footprint survey (http://slaveryfootprint.org/survey/) which has an engaging interface and clever design behind it but once you delve into it you start to become bored. For example putting specifics on how much you eat cinnamon? Is that truly necessary? it took me a couple of goes before completing it because this long questioning became dull.
An option is for the scenarios to be at the end of the information, to test whether they have taken on board what is being said on the site.