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.
















Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s