About a year ago I was actively participating in a project called 100 Days of UI. Which was a project that a designer created to challenge himself to 100 Days of 100 interfaces and elements. The designs were to be completed within a 2 hour period. The project sounded neat and I thought that this would be an excellent exercise for delivering ideas quickly and under pressure.
It was also around this time Dribbble was getting a lot of mention for designers just producing pretty pictures and not creating designs that were actually functional. Not wanting to be one of those designers and feeling like I might be participating in this pretty picture conundrum I halted any progress forward.
Until now. Out of a spontaneous burst of excitement and desire to work on something fun I decided to pick back up where I left off. Except with a twist. The twist was to focus on creating designs that actually improved the interfaces I was creating concepts of. Except still within the 2 hour period. And still creating a nice visual.
Therefore my newly defined approach was to focus on the user experience and create a design within a 2 hour window. As well as produce a nice visual composition. Plus a quick write up about the thoughts behind the design.
By doing so I hope to improve the speed at which I can produce design ideas and concepts towards solving problems within a product or application.
So, here we go. Picking back up with Day 43 — Text Edit.
Day 43–Text Edit
Today’s challenge was to create a text editor screen (original shot). For this design I thought about my personal experiences with text editors and writing apps on the web. Some of my favorite apps were simple in their design and did not have a lot of clutter. While many of the elements hide or disappear when not in use. In keeping to the time constraints I decided to focus on this type of a user and create a very minimal and purposeful interface.
One of the things that I focused on within this design was giving this type of user control of their workspace. Since new technologies are changing and the ability to move elements around dynamically within containers is possible I thought to add a unique Web 3.0 touch to the interface by affording the user the ability to close or move the text/format control widget.
If the user chose to move the widget to either the right or left side of the container the main column area would shift appropriately. People have different preferences as to how they adjust the windows or apps on their screens when writing. Giving the user this flexibility lets them adjust their area of focus and layout the container in a way that suits their needs.
This design also allows the user to close the text/format widget for a distraction-less writing environment. Doing so would cause the main column to shift to the center of the container and give the user an unobstructed view of his or her workspace. This is perfect for those that just want to get cranking and worry about formatting later.
In keeping with my motive of a simple and minimalistic design I kept the color choices to white and a few shades of grey. I chose a lighter grey for the controls as to continue to put focus on the text area. By reducing the visual clutter the users cognitive load can be reduced and their energies can be focused on their writing.
While only a concept and a tiny scratch on the surface of what’s possible the simplicity of the interface with the reduction of all visual distraction allows the user to focus on what they came to do, which was write. Thus improving their writing experience.
Checkout my rebound shot on Dribbble.
Now that I’ve knocked one of of the way I plan on keeping the momentum up and using this as an exercise to continue to build my skills and improve at my craft. Each new one I create will be within the same constraints.