Practical Skills

Ex2: Detailed web wireframes using Adobe XD

November 14, 2023

In order to create a successful website that operates well it is important that before any of the design process begins and you start to build the visual identity for the brand you know roughly what the layout of the website will look like and where each asset and component will belong respectively. In the wireframing process the first step should always be to create multiple hand-drawn mock-ups in order to get your ideas fully flowing and onto paper as fast as possible. There are many exercises you can partake in to practice and train your creative mind in order to become more efficient in the process, such as one named “Crazy eights” that involves drawing out an 8 square grid in which you have 8 minutes to fill each square with a unique web wireframe for any intended project. This fast-paced technique forces the user to not worry about second-guessing their design choices and put as many of their ideas into fruition as fast as possible and by the end of the exercise they should have multiple unique and diverse ideas that can be incorporated into one another to create a final wireframe. It is crucial that this is done on paper as opposed to digitally due to it not being possible to simply import lines and squares onto a document as fast as your mind can generate the next idea. Once you have a good base-line of diverse ideas that you can use for your wireframe you can begin to elevate the 1-minute drawn ideas on paper before using that as your foundation for the digitised version.

Digitised Wireframes using XD

Once you have a solidified idea for where you want the elements on your website to be organised you can then move on to using XD to formulate your final wireframe. XD has many prototyping functions and features that allow for an easy designing process such as simple a simple line and square drawing tools to create the boxes and buttons. Despite having planned for designing the digital version of the wireframe it should still be the barebones of what the actual final website should look like and should only be used to see how the visual components will look together on the page. Designing how the navigation box will appear is also imperative as it’ll show you in the future how the user will be able to navigate the website and what button will lead to where. As wireframes contain little information to portray what they actually mean it’s important to know what element on the page signifies what as it can be used as a shortcut to quickly layout where each asset should lie. For example, images are squares and rectangles with a cross in the middle and text is displayed by multiple rows of straight lines. Call to action buttons and any other piece of navigation that you believe deserves a proper name to be given one to avoid any confusion between them all in the future when you get onto fully designing the website.

Responsive Web Design

As well as designing websites for a desktop layout it is equally as important, if not more to resize and rework the design to fit that of a mobile screen. As the world becomes more tech-based and the capabilities of mobile phones are ever increasing people are relying much more heavily on phones than they are desktop computers as users can carry there phones with them at all times and use them for a plethora of different cases. Because of this phones are being used a lot more frequently to access websites than they used to, therefore making it important for the websites to accessible to that area of users. In order to do this the content must be re-arranged accordingly to fit with the limited screen space. Images may have to be re-sized to accommodate for this so its important that this is done in a way to not crop out necessary details. Text will also become larger because of this so the user wouldn’t have to physically zoom in with their fingers to read and content may become more squished together as there is less negative space available to us.

Columns in Wireframes

When it comes to deciding what number of columns should be used in a wireframe for the website its important to recognise what the website will be about and whether that level of columns would be appropriate for the content its providing. The most simplistic level is a website with only one column as there is less thought around the layout and structure as the content is within one fixed scrolling page. This would most commonly be used within blog posts or research articles where the only information needed may be images and long forms of text. Single column website are also mainly found within mobile design as it is built to deliver stacked content in a logical order at a larger size due to the physical lack of space that mobile screens have.

Another way the website can be laid out is by utilising two or more columns to highlight a focal point on the page before the user can look through the hierarchy of visual elements and read the content on the page. The visual weight of all these different components give the user a more positive user experience as the page may appear more dynamic and engaging. These type of layouts used in the initial wireframing can be used more typically for desktop websites and are able to display more information to user above the fold than a website with only one column.

Referances:

  • Yael Levey (2016) How to run a Crazy Eights exercise to generate design ideas. Available Online: https://www.iamnotmypixels.com/how-to-use-crazy-8s-to-generate-design-ideas/ [Accessed 11/12/23]
  • Nick Babich (2017) 11 Website Layouts That Made Content Shine in 2017. Available Online: https://medium.com/thinking-design/11-website-layouts-that-made-content-shine-in-2017-e12b26ffac7f [Accessed11/12/23]
  • eventbrite (2023) Best Events in San Francisco. Available Online: https://www.eventbrite.com/d/ca–san-francisco/events/ [Accessed 11/12/23]