UX / UI
Although I’m working towards becoming a capable Full Stack Developer, my passion still lies in User Experience and User Interface Development (UX/UI). In the world of computer jargon, title’s and nomenclature often become cumbersome. I’ll try to use this section to explain what UX/UI is, and how I’ve used it’s tools to improve my web development.
To build user personas I define sets of abstract users that would be willing to use my app or website. I basically generalize the users in my target market and it's tricky because I often need to do in depth marketing research just to define the potential users. In my opinion creating user personas should not be the duty of a UX/UI designer but I also can't understate its major benefits. A good user persona can help a developer understanding which of the app's features are essential for launch, important for launch, and/or not needed.
Page hierarchies are great for getting basic data architectural concepts across. Although they look similar to ERD diagrams, they contain much less data and simply convey a page hierarchy. This diagram allows for easy changes in page dynamics such when the user is sent to the cart in an ecommerce site, or under which page a user can add friends in a social network.
The Navigation flow takes the hierarchy to the next level by adding more details to focusing on the app or websites navigation functionality.
A wireframe should be absolutely barebones and provide the means to allocate screen real estate for important elements of an app or website. The wireframe can speed up the design process by standardising CSS attributes such as padding and size for every screen. There are often many wireframes that are created to tackle a single project. The following is a simple mobile chat wireframe that I used to develop the CloudLab mobile chat.