Empathy & Enterprise. Hand in prep.

In preparation for my final submission i spent two days arranging work into piles by brief categories, arranging in order of development where each set of work lead onto another. Each pile i bound with a gold bulldog clip as a design theme and to also keep all the loss pieces together in piles. Each brief came with a contents page on the front and with each section having another accompanying card with a brief description of the work inside. I found that the Look Mum No Hands brief had a significantly large amount of work, with Brandflip being the lesser of the two piles. I wouldn’t say this was because Brandflip had less time spent ton it as this is untrue, but that the brief was more concise for me to accomplish and didn’t need any improvements after a review with my tutor like the Look Mum No hands brief did. The FMP had a decent pile of work to it not to the same thickness as the previous No hands brief but inside this pile was a larger array of iterations surrounding my final major project concept. All of my adobe digital files of my website mockups, mock up boards and PSD mockups are compiled onto a memory stick, along with my video, poster prints and other imagery associated to my FMP. I am ready and prepared


Empathy & Enterprise. Other works.

I had this idea of creating poster imagery using my old prescription medication I was given during my late childhood to early teenage years, Ritalin and concerta. I had the prescription bottle for my concerta still in my bedroom, although out of date the bottle was kept as I was supposed to complete that bottle and get another one however I hated taking them as they made me feel tired and as if I was not really awake, like sleepwalking. But as I began this FMP that was significantly personal to me I felt using the bottle would render some interesting visuals.

I however wanted to make the visuals all the more personal and I remembered distinctly how my mum was speaking on the phone to my Auntie as she peaked through the living room door watching me as I sat practically comatose after a day at school and having had my medication. She said how I was sat in the living room, still as anything, not moved for over an hour and how I appeared to be like a zombie. What I love is that I can remember this as if it was yesterday and this has remained with me for a very long time. The way my medication affected me was that it worked to inhibit the behaviours of ADD, the fidgeting and impulse behaviour that I suffered with. I didn’t like taking the pills as after a while they made me feel so tired and blank faced. Creating a series of posters I achieved by using the very words my mum spoke to my auntie and the visual image of the medication. In a sense I am making a propaganda poster but not promoting the medication for its benefits but for its side affects. I don’t believe the medication should not be used, my experience with concerta was not great but was not as bad as Ritalin. Ritalin was the worst of my medications and I strongly disagree with that medication being prescribed to young children even if it does work to inhibit behaviour, it comes with a long list of behavioural side effect. when I took Ritalin it made me more agitated, quiet to a point of comatose and incredibly fatigued, on few occasions I was ill from this medication which is why my mum stopped giving me it. So within these collective pieces of work they carry a heavy personal message of my experience with an impulse control drug. Printing the quote onto A3 page I cut up and stuck to the photocopies I made of the medication bottle and box in varying compositions. Some shots had the pills open and out on the counter, bottle close, outside the box, inside the box, both the box and pill together, I also threw the box across the screen as it copied which caught it just in time in a morphed bizarre image. I photocopied the side of the box that had the ingredients an d my name on adding fir that personal value.


I particularly liked the graphic on the lid of the bottle and flipped this over onto the screen.
IMG_0986 (2)
I also played around with landscape for the composition and placing the  quote overlapping on itself.
Enter a caption
I focused on plain graphic shots of the medication itself as it created a clinical tone to the image.

IMG_0990 (2)FullSizeRender (10)FullSizeRender_1FullSizeRender_2FullSizeRender_3


Empathy & Enterprise. Website Mockup printing.


Closer inspection shows how the layout appears smaller than the other two mockups , something I didn’t realise until I had brought the prints home.


After the page came out I saw that the ink depleted on the logo in the corner and therefore I couldn’t use this print for a final mock-up for submission.

FullSizeRender_5After spending a week on website mock-ups and making them into a series of display boards of the components to each part of the website, I printed them onto 175 gsm paper and then intend to mount them onto display card. The printing process had a few problems when the ink ran out on one print and then smeared across the edge of another, ruining two pieces of paper. I had only two more pieces to work with and if the printer ruined these two then I would have to resort to using the low quality printer paper. Thankfully I went to a different printer and they came out perfect. I went over the text meticulously checking spelling and believe I corrected all mistakes. Each board I placed the brand logo on the bottom right of the page which was supposed to be cut off the page but when I exported this it came out fully rendered on the page. I did not realise this until I had printed each of the mock-ups. I also realised that one mock up was smaller in its layout with the website pages sitting closer in the middle of the page, I do not know why this happened after I exported this. I believe that if these are to be exhibited at the summer show this particular board mock-up will need to be re done. I completed this digital collection of work to the best of my ability and am surprised at what I have managed to create as I had never seen my visual communicating being achieved through digital means. Since using digital means to create I am now determined to gain a sound knowledge of programmes such as Photoshop, illustrator, InDesign and even premier and after effects. As I do not want to limit myself in any field of creating. The more I know the more diverse my creative skill set and the more platforms my designs can reach.


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

Screen Shot 2016-05-18 at 3.03.00 PM
Working on the notebook product psd for another website mockup. When making this psd I managed to render a quick digital illustration on  illustrator then  added a slogan text to it, then uploaded this onto my website mockup. I however did not save the file first in a high enough quality, i saved it as a jpeg and this was the grainy half rubbed out image I got. I quickly changed the saving presets to a png and the file came up perfect when placing it into illustrator.  
Screen Shot 2016-05-18 at 3.16.37 PM
This notebook works on the characteristic symptom of pressing down hard onto pens and pencil when writing. This was common thing for me to do during my primary and secondary school education, I would write my sentences in very big lettering and  press down real hard onto my pen. I always preferred pencils which were usually a 2B and would only prefer the pencil when it was semi blunt as it made the lettering bigger. The process for this mockup took little time as I am now quite fluent in my own work process from making a new illustrator file. setting out the capitol type, the accompanying text, design element, url bar then uploading the psd, editing the psd, saving the psd, uploading it onto illustrator and finishing a mockup.This process has taken awhile for em to become used to as I’m not used to a lot of digital work, I have had several migraines from sitting at the computer doing these digital mockups which took some getting used to as well but the more i look at the pieces I am rendering, the more confident i feel with my FMP than i initially did a few weeks ago. 

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