Empathy & Enterprise. Brand Guideline printout

I printed my brand guidelines on 200 gsm paper in colour and bound with gold bull dog clips, a theme I have used for binding of all my works for submission. Upon printing everything was laid out straight and correct, after printing and biding I realised how again there was a problem, the pages were all slightly off kilter. This was incredibly infuriating but the more I looked at it, the more I felt this lent itself particularly well to the topic of Dyspraxia and the difficulty those with Dyspraxia have with writing in and on a straight line. The brand guideline consisted of how to make the logo, colour schemes, colours schemes not to use, typefaces and a manifesto.IMG_0977IMG_0978IMG_0979IMG_0980IMG_0981


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 mockup refining.

Screen Shot 2016-05-20 at 3.13.34 PM
Finalising the mockup boards for printing today i corrected spelling and tweaked the annotation for each mockup so that it relates to the conceptual design of the brand and the concept of Dyspraxia. 
Screen Shot 2016-05-20 at 3.13.41 PM
I added square text boxes to add a cleaner look to the annotation and composition of the boards. I have rendered three boards with three website mock ups on each page. I chose to only have three on a page as I knew there would be a considerable amount of annotation for each mockup, and having four images to a page would be too cluttered to cleanly arrange a board. I am extremely pleased and shocked at how my boards have resulted as i never thought i could render something as digital as this and feel content about it as a solid final concept for my FMP.
Screen Shot 2016-05-20 at 3.13.52 PM
As I had only two pages for the last mockup board I included a single image of the artist book product as I was particularly liked this idea and am considering making this as one of the final pieces to display at the end of year show. Although this book will be printed as a traditional binding but also a second copy where it is bound in a way that makes it difficult to open and read the book. 

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 refinement

Screen Shot 2016-05-17 at 2.29.15 PM

Screen Shot 2016-05-17 at 2.29.25 PM

Screen Shot 2016-05-18 at 1.06.50 PM
This is the end rendition after editing the mockup. I feel this is a stronger page than the previous two together as two pages weren’t necessary, and it did not have the same continuity as the previous mockup pages that were all single and without a pre-page.  I added the price and description of the physical book. 

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. Website mockup board

Screen Shot 2016-05-17 at 4.12.31 PM
Having made  majority of my mock up web pages I made one of the display boards to show the individual web pages with annotation as to each part and the specific designed elements to the page. I featured the homepage, information page and a product page. I annotated the interactive quality of the ‘DYSPRAXIA’ page and the elements of the colour scheme specific to my brand. I was unsure of how to lay this out because I  was told I would be printing these out in A2, therefor I had to customise the size of the page because the biggest the page set up went to is A3. I again had a friend do this for me who was more familiar with illustrator than i was. In the lower corner i am going to apply a type of graphic of my brand, such as the brand name slashed in half with vertical type accompanying it. 

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. 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 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.