Empathy & Enterprise. Video finished.


https://vimeo.com/user45796169 – link to video on vimeo account.

As I am nearing the end of my process and finishing off work for my final summative hand in I struggled on editing my video for submission. I had the much appreciated help of my friend who essentially took over the process and edited the video for me as I was still in the process of making mockup websites. i sat close with the process explaining what I wanted and this was done. The video footage was not of great quality as my camera is old and is not a film camera but i did not have the time to re film all of this so I worked with the footage i had. I had several clips that were not of any use due to the camera shaking, me forgetting to curse on command after the object dropped, the object falling out of shot or the background noise interrupting the shoot. I wanted the tagline for the video to appear at the end of the last video footage but through the editing process we came to the conclusion that the title looked better at the beginning of the video as it gave the video context. The type appeared in fast single edits which were quite punchy, linking very well with the manner in which i dropped the objects in the video. I am not a fan really of using video as a piece as i am completely at a loss with what makes a good camera angle and the editing process seems incredibly difficult. However i did think this of digital design work and i have powered through a week of digitally rendering pieces, so perhaps I will venture into video more so in the future, I won’t rule it out as an option. This video is far from perfect but will have to suffice as I have set no more time for processing pieces now as i am now spending the next two days going over sketchbook checking i meet the learning outcomes head on in preparation for the hand in.  Improving this video would include  using a professional video camera or atlas a more sophisticated version of my own, planned camera angles which would be held at the exact position for each clip-a tripod would be effective in achieving this. Essentially i was focused on capturing this footage and creating a quick video, obviously the video is not a focal final piece as the attention to detail would be to abetter level, the digital pieces i have been working on are in fact the central pieces. I however didn’t want to hand in FMP only in flat  formats, this way I have made a compilation of photocopy prints, hand rendered illustrations, digital mockups and a video.

Screen Shot 2016-05-20 at 6.57.26 PM


Empathy & Enterprise. Website refinement.

Today i realised i wanted to add another page with amore in-depth description of the disorder of Dyspraxia so remembering one template i had seen previously, I made this page giving an overview description of the disorder. Listing the symptoms and what Dyspraxia is in such detail. Dyspraxia is the developmental coordination disorder that affects fine and gross motor coordination in children and adults, it is not just a physical condition but also one that affect the ability to plan, organise carry out daily tasks such as grooming, chores and conversing with others. I wanted to tell this as i felt I had emphasised the physical problems of the disorder which are the most evident whereas the real nitty gritty to this disorder is its ability to completely muddle up the function of the brain to carry out a simple daily task. This is why I struggle with planning journeys, travelling on the london underground, following simple verbal instructions, remembering things such as materials to bring telcos, remembering deadlines and managing my time. I made this page and also more information to the interactive page of Dyspraxia. Screen Shot 2016-05-19 at 4.26.32 PMScreen Shot 2016-05-19 at 4.26.49 PM

Empathy & Enterprise. Mockup website overview.

I made two pages compiling all of the digital website and psd mockups I have done. Only four Psd mockups have been made but with  eight mock up websites. Therefor i have made Four website product mockups, one front page, one information page and one page without a product. I am considering removing this last page as the intentions were to create a sneaker psd mockup for the brand, as i have been unable to do this I feel the page does not warrant anything even after I tried to make it a simple activity page, i feel it lacks concept compared tot he other conceptualised pages I have rendered. I believe I should make a few more psd mock up product. I am still to make a notebook one which I am currently about to work on. I also feel i need another page on the symptoms and information on dyspraxia, I have currently made one which has the word spelt out which activates when the curser hovers over a letter. Despite this i think it would be common sense to have a page that details explicitly the mechanics of the contain using a template I have employed for the first information page. Mm1

Empathy & Enterprise. Website mockup boards in process.

I have continued my work on my website layouts and have completed three of them. I believe i will be making a few more of these but as of yet I am unsure. I need to print out a contents page of all  the mock websites and then plan what is need from there. In the mean time i have completed three of these mockup boards, with my brand logo as a design element to these concept boards. I made annotation on the design elements such as what parts of the website would activate other parts, what information would be displayed on which page, the product details and such. As of yet I am pleased with the concept boards and am currently considering how to print them. It was said to me to print them on A2 300 gsm paper, i have decided against this simply for money costs as I don’t have the funds for this. I am considering A3 size and possibly the same gsm or maybe 200, but the boards must be durable to be picked up and viewed so most likely the thicker the better.  I am also printing them at the university to save valuable time.  Over this past week I had begun creating website mockups quite unsure of what they would turn out like and how I would engage with the digital process. I have had my problems, such as working photoshop efficiently, without my fellow colleagues helping me I would not have been able to complete some of the product mockups. I also had moments where the design elements began to confuse me as i was thinking of so many components at once, such as the quotation marks became very irritating to keep placing within the website as I had to juggle around the text and move the large letters around because I wanted to stay within a grid system i had cretated. I worked in illustrator to create these mockups which a few colleagues advised against but as I was on  strict time limit I opted for the programme I was most and only familiar with and in the end the process came along well, using photoshop would have caused much more problems time wasting of me sitting around dumbfounded on how to work the software.

Screen Shot 2016-05-18 at 11.51.55 AMScreen Shot 2016-05-18 at 11.17.27 AMScreen Shot 2016-05-18 at 11.42.56 AM

Empathy &Enterprise. Continuing website mockup

Today i carried on making my mock up website pages and made a page about dyspraxia and  a page about a collaborative artist print book as a product. The processes today were bit slower as I was spending a long time trolling through the web looking for suitable PSD mockup files that were also for free. I managed to find a few but unfortunately could not find on for a pair of sneakers for an idea of branded shoes for the brand. I was very excited about this idea because it correlated to the characteristic symptoms of  clumsy footing and tendencies to trip over a lot. I imagined a white sneaker with the brand name written on the tongue and with a catchy phrase or special design on the underneath of the shoe, marking like the eco footprint but would be called the dyspraxia footprint. I however could not find suitable psd mockup so am unfortunately having to put this on hold indefinitely unless i find one or come up with a new solution. I had a few troubles with making some psd mockups because I am not familiar with photoshop and how it works, which made the process increasingly difficult. I overcome this from the help from a fired and playing with it until i managed to remember how to work with each layer.

Screen Shot 2016-05-17 at 2.28.43 PM
The letters when hovered over by the curser will then display a symptom or anecdote about the mechanics of dyspraxia. I essentially wanted to have a characteristic or symptom of dyspraxia each beginning with each letter of the word. I was struggling a lot to find something to do with X so have decided to have a combination of the symptoms and general information about the disorder. This page comes second to the homepage. I also used a template for this design similar to the one I am working off of for the main theme of the website mockups. 
Screen Shot 2016-05-17 at 2.29.01 PM
Initially I wanted to do a photoshop mockup of a pair of sneakers as a bespoke product with he brand logo and illustrated design on them. However I could not find a psd file that didn’t charge a lot of money so I had to forget this idea and do a simple quote and explanation page. This doesn’t fit in with the pages I have been doing about products but may still be another part of the website. 
Screen Shot 2016-05-17 at 2.29.15 PM
This was the pre page before the collaborate book page was shown. This still needs work- correction like the S being highlighted in pink instead of the T, which was a minor mistake. I also believe i may have to add some more filler text but i don’t want to over burden the website with loads of information. 
Screen Shot 2016-05-17 at 2.29.25 PM
The art book is probably one of my most favourite psd mockups for a few reasons, firstly the process wasn’t complicated and it didn’t frustrate me as it was simple enough to do. The artist work I chose worked beautifully when applied to the book mockup and it sat well with the composition of the page as a whole. This really excited me. I placed a text underneath explaining the limited edition of the book and what it contains, also that the proceeds go to charities for Dyspraxia. 

Screen Shot 2016-05-17 at 12.43.40 PM

Screen Shot 2016-05-17 at 12.41.26 PM

Screen Shot 2016-05-17 at 12.35.44 PM

Screen Shot 2016-05-17 at 12.38.52 PM

Screen Shot 2016-05-17 at 12.18.19 PM

Empathy & Enterprise. Website mockup.

Screen Shot 2016-05-16 at 11.20.44 AM
I tilted the pen at an angle to make the composition not look so flat which complimented to page much better than before when i had the pen flat. 

Screen Shot 2016-05-16 at 11.58.52 AM

Screen Shot 2016-05-16 at 10.49.21 AM
I wanted to add the turquoise as a continuing element throughout the page design so i made one of the quotation marks that very colour, as well as adding the two thick rectangles shapes from the homepage, to the rest of the website mockup to add continuity to the brand theme. I also added some filler text to fill out some of the blank space on the pages that was left after i added the quotes, description and the product. It also helps the page to look much busier. and more interactive in that on each page this filler text will vary from telling of the symptoms, the purpose of the products and general knowledge of the condition as well as anecdotes commenting on what it is like to live a life of dyspraxia. I am doing this because I am really trying to hammer home this concept of a positive frilly attitude, creating a sense of community. 

Empathy & Enterprise. PSD Mockups.

Screen Shot 2016-05-16 at 11.45.59 AM
Using one of my poster prints for my FMP, I tried my hand at psd mockups. This was to show my campaign in ‘real’ life platforms such as bus shelters. I was really pleased with this end result as i have always believed anything photoshop to be out of my capability, I did experience problems but i had help from my fellow student and friend Marta. Since i ahdnt used photoshop for the best part of a year I had completely forgotten the purpose of layers and who to work them. It came back slowly after a few trials and errors. This piece serves as a possible final outcome print for the summer show as i feel it would particularly great in showing my campaign as an actual movement of sorts. 
Screen Shot 2016-05-16 at 11.39.08 AM
A product mockup for one of the product pages for the website, I used a enamel camper cup with the brand logo on top. This is one of my favourite psd mockups as the logo worked particularly with the clean sleekness to the enamel cup. I did consider that these products would probably fare better with actual designs on them instead of just the designed logo. These I will quickly mock up as well as i only intend to develop three A2 website mockups.

Empathy & Enterprise. Website mockup development and process.

Screen Shot 2016-05-16 at 10.24.57 AM

So taking the advice i began altering the website front page by changing the colour of the type, using a minimal amount of pink s this is a lot heavier throughout the mockups. Instead of the word enter i opted for let us show you, i felt it more personal and this speaks heavily to my project as hole for me and how I want to communicate a message surrounding an under recognised condition such as dyspraxia.



Screen Shot 2016-05-16 at 11.22.27 AM
I felt the front page looked quite bland so I employed the use of the turquoise colour for design element as explained in my brand guidelines. Im still debating as to wether to add a small tagline under the header title, a little something quick and catchy about dyspraxia that gives a hint to the content of the website to the audience. 

My tutor did express his uncertainty surrounding the colour pink as part of my brand identity colours. I however am not changing this, I have stated quite clearly the reasoning for this colour, from its igniting poster work ‘on Wednesdays we wear pink’ to my iteration ‘on Wednesdays we sit on the spectrum’. I also believe firmly that this colour suggests a playful, fun and positive attitude and this is exactly I am aiming for my  FMP. I am however aware of its use for charities and campaigns commonly and heavily associated to women, which is why i employed the use of turquoise as a balancing colour to my colour scheme in my brand guidelines. I believe my choice of colours hold a conceptually sound reasoning  and as I am the driving force of my project, I shall take on advice gladly but will decide for myself as to wether I believe in these suggestions myself.

Empathy & Enterprise.Website mockups.

Arriving early this morning I began my first series of mockups for my website pages for my FMP. Following a template i found in a large compiled book.Using illustrator I began the process of making the first page mock up where I used an ellipse tool and simple rectangle box to make the design elements top house the text. After this i began on the second page which features the proposed products and such for the website. As i left the book idea behind I took the intellect with me and applied it onto this website mockup. Meaning the activities and tasks I created in the book drew from difficulties i have with using certain objects and performing tasks. I used the pen mockup for the first page of products, whilst still using a template for my design, I added the text surrounding the presuppose of the pen plastered above the product.

Screen Shot 2016-05-16 at 8.48.21 AM
Front page design, obviously graphics or something is needed to show how to enter the site through a contents bar perhaps.
Screen Shot 2016-05-16 at 8.56.39 AM
Adding the quotation marks of the task written by me.
Screen Shot 2016-05-16 at 9.00.33 AM
Following the template for Zembla magazine online, I also made the capitol letter of the first letter and last letter of the product a design element on the page. Doing this makes these page layout more engaging, as I initially thought website mockups would be very dry in creative design. I am however proving this assumption wrong. 
Screen Shot 2016-05-16 at 9.06.34 AM
I then played around with the placement of the pen, choosing underneath the P as i thought this aligned with the composition better. To be added would be a price next to the product and a more detailed description for the pen, which will not be about the physicality of the pen. It will explain the concept behind the pen by explaining the difficulties with pressure those with dyspraxia experience when using pens, pencils, markers etc. 
Screen Shot 2016-05-16 at 9.07.03 AM
The last letter is half cut off the page, again another design element inspired by the Zembla template. As I have never done website mockups before i needed a template to work from to better help a faster working process which aids my time management much better then going into this with a free for all approach.















Empathy & Enterprise. Brand Guidelines.

Screen Shot 2016-05-13 at 12.00.14 PM


After another quick talk with Adrian , it became a lot clearer on the direction of my project and what actual deliverables I was to create and I am now feeling more certain and positive about my FMP. The deliverables I am to create are a series of concept boards of website mock ups for the brand ‘DON’T DYS ME’ . Before I could begin this line of work properly I had to firstly create my own brand guidelines which i was initially completely at a loss for, after some research and conversations with my peers i came to understand that a brand guideline is almost like a how to and why book about my brand. My brand guideline contains how to make the brand logo, the manifesto, colour scheme, colours not to use and type choices. Initially I made the pages for the guideline in Illustrator and then realised it was to be a printed book so I went straight over to indesign and made my first Brand guideline. It was very beneficial to me to make this guideline as it served to make me answer questions about why i chose the colour schemes, also why I chose certain colours over others and defend my reasoning. The chosen colour pink for the brand logo was partially influenced by the wordplay poster ‘On Wednesdays we sit on the spectrum’ taken from ‘on Wednesdays we wear pink’, it then became a permanent fixture for the brand as this colour projected the positive attitude the brand stood for in that it supports and celebrates Dyspraxia.I chose an accompanying colour of turquoise as well as black for the type and white for the backdrop, the turquoise was specifically chosen to add another component colour for the graphics such as enlarged type and shapes,but also to show that the website was not targeted towards women as pink is a heavily associated feminine colour. I chose the type Haettenschweiler as it is a very bold type and picking a type was a real struggle as to me all type either looks the same when its not drastically different. The logo, brand name and the text for the website are all written in capitol letters as i feel this is a style element to my brand and also that capitol letters by default are used for important words, with the concept of my FMP being to highlight an importance of creating awareness for a common disorder such as Dyspraxia, I felt this decision was just. The process became easier than I anticipated as I went along, I’m usually quite uneasy with digital work. The brand guidelines will most likely need something added to it that I have currently not thought of after another review with my tutor, now I am to start the mock up of my websites. Screen Shot 2016-05-13 at 2.09.10 PMScreen Shot 2016-05-13 at 2.09.17 PMScreen Shot 2016-05-13 at 2.09.24 PMScreen Shot 2016-05-13 at 2.09.30 PMScreen Shot 2016-05-13 at 2.09.37 PM