Exercise 2
A web designer wants to achieve a well designed website as the end goal, to do this it can be beneficial to lay foundations for the process. When wanting to incorporate interactivity within the user interface it will be helpful to plan out and roadmap the direction that everything needs to run in, Wireframes can help achieve this by offering a skeleton like view of the website in design. To build a website or app design there needs to be an architecture or structure to the overall design. Wireframes can be considered the blueprints that highlight the elements of the product in design. With that Adobe XD provides a way to digitise this process and incorporate that planning into your design document. Beginning into this exercise the goal was to incorporate the Freedom Festival as the subject of all the designing inspiration for these wireframes. Firstly it becomes important to note that the key to good wireframes comes down to its ease of understanding, the clarity of the visual representation, and the pushing of the design boundaries that can be subconsciously placed by the designer.
During the process of designing the wireframes for this exercise, an informative tutorial and video was loosely followed in the process. The content explained and suggested that a drawn version of wireframes was the best way to start, by doing this, it should allow a more streamlined and fluid process into digitising these wireframes for the design. In this the some conditions were placed into each design, the first one was allowed an unlimited time limit in total thinking and iteration, and each further design would be given a time limit that would decrease with each version, as a way to encompass the spirit of the information given by the tutorial. The main goal is to be trying to push past different design standards and boundaries; In each design focus is implemented onto the primary navigation while trying to encompass a different layout structure that can also be adapted to different devices through adaptive design. The designs follow a standard of representation across each one to maintain easy recognition in a hypothetical scenario of working as part of a team. The videos and images are all marked with an x through the boxes to highlight they should be different content from text based components. The same has been applied for other logos, social media, and heading designs throughout.
Using adobe XD to digitise these wireframes is a simple process that offers a multitude of benefits, for this exercise two of the paper designs were chosen to be brought into XD the first is the more serious of the two options, with the vision of this being a website landing page for the Freedom Festival, the incorporation of what would be most beneficial to this style was key. Remembering the key is to provide a strong architecture to the final product, the focus on the primary navigation menu being the first thing that is key towards this design. On a fixed position during scrolling it will remain readily accessible for all viewers, there is a hierarchy of priority of the information that wants to be displayed here which is the aim of the wireframe design. The other digitised option is one to highlight the functionality of using software for designing wireframes, through this a more dynamic approach is taken with the goal of the arrows providing primary navigation, using clear iconography and messaging to guide the user, the target page can be applied as an overlay to provide a more simpler feel to the overall design. The importance of ensuring responsive design in a modern environment is high, which is adaptive design to fit across multiple channels. During the wireframe process ensuring this is kept in mind is key to implementation, the initial design of this wireframe has been adapted and designed from a mobile perspective. Obviously the design of the two has been kept identical with only adjustments needed to be made. This is easy enough to achieve by using standard practices of grids and guidelines in the initial and overall design process.
