Mocking Up the Chat View

I was playing with Photoshop last night and started tinkering with the Mockup for the Chat View. This is what I have so far after a few tries

Screen Shot 2014-01-03 at 4.34.03 AM
Took this From Teehan + Lax iOS7 PSD Template
Screen Shot 2014-01-03 at 4.06.22 AM
First Iteration
Screen Shot 2014-01-03 at 4.33.24 AM
Second Iteration
Screen Shot 2014-01-03 at 4.42.45 AM
Third Iteration
Screen Shot 2014-01-03 at 2.49.13 PM
Fourth and Final Iteration

Update: I’ve been told that the design is too bland and need more hierarchy and color pop. So far I have something like this but it’ll definitely need a lot more refining to be good enough for production.

Screen Shot 2014-01-04 at 2.46.53 PM
Playing with colors – First Iteration

 

Screen Shot 2014-01-05 at 5.02.11 PM
Playing with colors – Second Iteration

 

Links that helped me out:

How to make round images in Photoshop: http://www.youtube.com/watch?v=oZ7b3HIWW_g

Grids in Photoshop: http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-74cda.html

How to use photoshop for wireframes (I am a noob at photoshop): http://nathanbarry.com/how-to-use-photoshop-to-design-interfaces/

A Youtube Tutorial on Basic Wireframing in Photoshop: http://www.youtube.com/watch?v=YSA7bnAc1PQ

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s