Description of Design Choices (visual and technical) - Juhok/todo GitHub Wiki
Hello! I would like to make few points when I was designing and developing this app. The importance of simplicity plays important role when designing web services and application. This application is build with Responsive design for desktop and mobile.
Technology# Technology behind this application was:
- React.js
- Node
- Twitter Bootstrap for React
- JavaScript
- HTML5
- CSS3
- Git deployment to https://juhok.github.io/todo/?#home
First of all, the design happens using Twitter Bootstrap and is designed with extreme simplicity. Bootstrap also helps with the responsive design. In that way the future collaborations can easily suggest more components and features to the application. Less is more.
The current application used: https://react-bootstrap.github.io/components/alerts/ documentation to design the react code to use Bootstrap. The outcome is clear and simple.
DESIGN:
Design plays very important role in designing software. The application has a simple NAV bar with tested usability and user attention to the upper left corner. The users will automatically recognize that this app is about Task-List. There is just basic functionality for testing the prototype with the correct user group. The colors are subtle and there is space to implement logos and graphical elements easily. The code is designed so that the collaborators can easily start building and collaborating. The design follows Jakob Nielsen's Heuristics and can be user tested.
If you look at the application you see that there are two input fields. The upper one is used for the first tasks and the lower one is used when there are many items. The idea of using two fields is because there is a need for collaboration tool, where two people could collaborate within same application.
Design Tools:
- Axure prototyping
- Photoshop
- Bootstrap documentation
The old iteration without styling