Wireframes, Page Layouts, and CSS Design

Wireframing is an essential step in the design process. This allows the web designer or developer a chance to get a more comprehensive view of the final webpage or web application. A wireframe is essentially the prototype of a web application's front end and how different information will be presented in the layout. There are many tools at the designer’s disposal in this process. Everything from a pen and paper to automated editors which generate the final CSS and HTML code can be used to create wireframes. Through a little bit of research, I was able to find quite a few useful tools for creating wireframes. In addition, I discovered some new wireframing features of programs that I was already familiar with. It is important to note that wireframes can be as minimal or interactive as the designer would like. Tools such as Adobe Photoshop can be used to create a static wireframe of a website or application, which only present the basic structure. These static wireframes are specifically for developing a rough draft of the web application's layout and appearance. The drawback to this approach is that the actual interactivity of the web application is limited. If the designer needs to create a more interactive layout, then tools such as JetStrap can be utilized. JetStrap allows the user to create mock up layouts based on the BootStrap framework. The user can simply drag and edit various buttons, boxes, and widgets. Once the final prototype has been established, the user can export the corresponding CSS code. This can be more useful if the client or end users would like to interact with the prototype during the early stages of design. I personally prefer using JetStrap to develop wireframes because the software is free and online. In addition, the final result can easily be exported and utilized in a website or web application.