![iphone-xs-max-mockups-scene.jpg](https://cdn.steemitimages.com/DQmXsmpBt6xvB2jdUL6rkGC3ZNdEq1jG5uBCQPxKNTprmGq/iphone-xs-max-mockups-scene.jpg)
![presentation-opt.jpg](https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmZ7cya7NbKM4YzfNRaaLrQ4uxVx3piVtF98e4xsAsXLCt/presentation-opt2.jpg)

#### Repository
[Steemblr Repository](https://github.com/snwolak/steemblr)

#### Details
> Steemblr is a microblogging platform written in javascript. It allows user to post and explore content which is smaller and more frivolous in its nature. Currently app is in development stage and you can see every posts from steemit. In the future it will show posts relative to steemblr app.

After completing [@snwolak's](https://steemit.com/@snwolak) [Task request](https://steemit.com/utopian-io/@outwork/steemblr-improved-dashboard-ui-design-1536526147047) he asked me to do some more inner space designs for him:
* Search result page
* Settings screen/modal
 
As previously i made dark and light version of this screens. My goal was to make the newly created screens, UI elements usable on mobile devices too, so i've created the mobile version too. 

#### Benefits / Improvements
Redesigning simple UIs is pretty challenging in my opinion: there is not enough space to express creativity, ideas. As i have described my goal was to do something different this time. After a discussion with [@snwolak](https://steemit.com/@snwolak) realized he is looking for a really strong, brandable product design. My goal was to keep this on the inner pages of Steemblr.

In total I made 10 screen page designs for desktop and mobile devices.

#### Proof of authorship
![proof2.png](https://cdn.steemitimages.com/DQmc1mZSbcbpfZUUtSEV4qGneQaVTZrGmkvrTMBV3YaaG9i/proof2.png)

#### Screenshots

##### Desktop
##### Search results
![Results - Dark.png](https://cdn.steemitimages.com/DQmXSTvbviECviyuKrcAEreeWZPdQi4QUCNaEivPGqdFkNe/Results%20-%20Dark.png)

![Results - light.png](https://cdn.steemitimages.com/DQmbQM7MKN2d1vR9PWRxXSbpgSo5KNb5yaP9Cf3dPTqHZo5/Results%20-%20light.png)

##### Settings screen
![Settings - page - dark.png](https://cdn.steemitimages.com/DQmaJ8L6vEtgFwJvPiA1tmcbCTjvmd4KfTNT3EYrbPpUJDw/Settings%20-%20page%20-%20dark.png)

![Settings - page - light.png](https://cdn.steemitimages.com/DQmUTYPkj2U1dAiH7Jmd6BEGv5Kdt2XKxxuUNik7bKDQfE8/Settings%20-%20page%20-%20light.png)


##### Settings modal
![Settings - dark.png](https://cdn.steemitimages.com/DQmYf8rSAp9w6WUXjHeCyXD6y5xDy5ShHNy9wkF4uht9QiB/Settings%20-%20dark.png)

![Settings - light.png](https://cdn.steemitimages.com/DQmPukLoP1cffoZswubEXhzDRC3zxxX3XZv5d2SsET9Fzmm/Settings%20-%20light.png)


##### Mobile
##### Search results
![Results - mobile - dark.png](https://cdn.steemitimages.com/DQmfSRxuLe9CmwFDrNTbpJZWCLWYxVeP31RwfTDaX4U7ne6/Results%20-%20mobile%20-%20dark.png)

![Results - mobile - light.png](https://cdn.steemitimages.com/DQmSceyy1igQ8WyV2uCL1cYJdW7mSC3mLaNUuQGMPZAsyDV/Results%20-%20mobile%20-%20light.png)

##### Settings modal
![Settings - Mobile - dark.png](https://cdn.steemitimages.com/DQmV8DXksjrq9ixyhdtAYSgS6MzHyJr56ybR159vxSWeaRt/Settings%20-%20Mobile%20-%20dark.png)

![Settings - Mobile - light.png](https://cdn.steemitimages.com/DQmbebVaLDVLXpkP1whnC1kLyFA7SuzoiWM3vCuvpb6VaQF/Settings%20-%20Mobile%20-%20light.png)

#### Tools
I have used Adobe Photoshop CC.

#### Original files
[PSD file and Screenshots](https://drive.google.com/drive/folders/1k8ETKYDH-wMVpWb_Y71DrOxXS0qYzYUi?usp=sharing)

This work is licensed under [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/)

#### Proof of Work Done
[outwork's Github profile](https://github.com/outwork)

This awesome mockups are made using https://artboard.studio/