Design is not just what it looks like and feels like. Design is how it works.- Steve Jobs
This week is looking at webdesign, which is something I have been working in since I was a teenager, one of my first “real” jobs was a web master for a small local development company, I have built web pages on and off from when they were so text heavy they made your eyes hurt, through the flash era when everything moved and literally assaulted your senses, to now where user experience and design is much better. I am no expert in HTML and CSS by any means but I can get by.
I am building a website for work at the moment, it is just a wordpress site with some custom CSS but it is massively improving the UX and information architecture as well as getting away from the late 2000’s design feel that it currently has. I hope to have this live in May. As I have been the only person working on building the site with some support from IT to trouble shoot bugs and plugin conflicts it has been very time consuming to design from start to finish as I have been wearing so many hats in that project. From information architecture, UX, Layout, design, functionality, content, copywriting, arranging meetings with stakeholders and ensuring the project timelines are on track. Its like herding cats sometimes to get everyone on the same page.
Grids can create a basic structure; a skeleton for your design. They consist of basically invisible lines upon which your design elements can be placed. Doing so ties them together in an overall system and supports your composition – in a rational way.
Grids help you to achieve effective alignment and consistency with little effort. ‘Winging it’ and relying on your gut does not scale so well. If executed properly, your designs will appear thoughtful, organised, neat and structurally sound.
Good alignment, like much of design, should almost go unnoticed by your users. Less is more. Be too clever and you risk distracting the user from their primary goal of searching for specific content and digesting it quickly. That should be your focus – not showing off how nifty you can be with your design skills. Even worse would be reinventing the wheel to prove a point. A lack of alignment is noticeable and creates a sloppy impression. This might well result in a lack of trust from users who consume your design.
Page layout is the arrangement and treatment of elements on a page layout can be summarised in the way we determine what should go on a page and how we organise those elements. Layout can be considered an art form. But there are some basic rules that govern most good layouts.
Layout design is mostly about patterns. You don’t have to be artistic to learn its page layout in the UX , and the UI landscape is informed by UX design. itself is UI design Moving about UI components it might be implemented by a UX designer with some visual skills or a UI designer in collaboration with the UX designer or even a graphic designer. ( of which I have experience in all 3 )
The general anatomy of a web page you have a header which easily includes logo, slogan, etc. some navigation, but might also go in the header content so articles or products and services and call to actions buttons that lead to an action point and generally a footer, which usually contains contact info, links to other pages social media accounts and things like that.
Good layout helps users scan the page. They can easily and quickly find what they want, and they can learn the interface quickly. A bad layout is why users have to work to find what they need. The less efficient at accomplishing their tasks, it takes longer and they may become lost or disoriented and end up leaving the site completely.
Aesthetic principles.
There is an acronym. It’s called crap 😀
Contrast – this guide to the user where you or the business wants them to look through the visually different differentiated items on the page . Size, colour, other elements to achieve this. The elements with the greatest contrast are perceived as the most important.
Repetition – is reusing similar UI patterns, such as shape, and font colour arrangement to help users get acquainted with the content. It gets the user acclimatised to your site more quickly. The interface is much more learnable and users find it easier to navigate around.
Alignment – makes pages easier to scan. It helps guide your eye and reinforce those relationships And it helps users define distinctions between the elements.
Proximity – items that are close together are perceived as being related. the relative proximity of elements conveys the strength of their relationship.
Designing on a grid, alignment is the most foundational of the CRAP elements A grid will provide structure to an otherwise blank screen when you’re writing on just plain paper versus lined paper,which one is going to be best aligned? The others blend more into aesthetics. Having good alignment also sets you up for applying other visual design principles with much more ease For example, if alignment is tight, then proximity is probably going to work out nicely for you.
Columns make up the width of a grid, gutters are the white space between Margins are the white space outside your content and field elements are just the content that goes within the columns. All measured in Pixels obviously.
There’s a 960 grid, there’s a golden grid There’s a responsive grid.
Just like artboard sizes in design tools, there are some conventions for grids.
Grids have 60-80 px column widths.
- Column width does not change between screen size – the number of columns does, the standard is:
- 12 on large screen, 8 on medium screen, 4 or even just 1 on small screen.
- 20 px is a common gutter size.
- Margins on small screen are usually the same or half of the gutter width and can vary a lot between screen sizes.
.
Responsive design makes our websites easy to use and pleasing to look at across devices of different sizes. In this lesson, we explore the basics of responsive design and learn to identify common responsive design patterns in the wild.
Responsive design is a huge thing in the UX design game nowadays. Everyone in the business knows that having a truly responsive design means good usability. It is non-negotiable.
But what does ‘responsive’ even mean? What separates responsive designs from the non-responsive ones out there? Why is it so important now? Let’s take a moment to dive into a familiar name that can often be misunderstood.
What is responsive design?
The idea of responsive design is that the product can adapt itself to any reading device the user may use. It is more or less like transforming the content into water, mimicking the liquid’s ability to fill any type of glass. This shows that the old way of creating websites, using fixed positions, is all but dead and buried.
Why is it important to be responsive?
The rise of responsive design has to do with the rise of mobile devices. Suddenly, users could go from a laptop wide screen to a smartphone. Fast forward a few years, and users expect to be able to access any website with a huge range of mobile devices. Designers officially cannot ignore the importance of mobile devices, not when there are over three billion of them out there.
Users have high standards nowadays. So does Google. And in truth, static websites simply will not do anymore. Responsive design is the now and the future, with new techniques and great examples popping up every year. Designers everywhere are looking at their products in a new light, and they are absolutely right to do so.
When you pull out a mobile phone and load up content on the web, chances are you’ll runinto one of three different experiences. one, you get the desktop versionof a website usually scrunched down, so you have to zoom in and pan aroundto you. A separate mobile site Sometimes this is good, but a lot of times it’s a watered down mobile version that lacks a lot of the contentthat makes the desktop version superior. Or three. A responsive design. A design that flows and repositionscontent based on the width of the browser.
Re flowing content. Relative sizing and break points or mediaqueries. Relative sizing,setting size relative to other things. Set using pixels or set to a percentage width based on the size of its parent element. adjusting the viewport you will see that the image set in pixels stays the same While the image set using a percentage adapts accordingly. Breakpoints or or media queries are a great solution,something that lets us not only reflow but modify the design and the layoutbased on the width of our viewport. media queriesare based on the viewport width. When we hit a certain width,we can adjust styling on these elements to make the layout more appropriate for that particular device with media queries are checkpoints. These checkpoints give us spots to adjust the styling of these elements
The viewport does not meanthe screen size. For example,if somebody is viewing a website in their browser on their desktop,they may have the browser half width. And if you are targeting the screen size,you may show the content that would assume the userwas using the whole of the screen. And obviously, then they’ll get a less than good experience using you should use something like percentages or even REMS or MS. instead of pixels
Some common breakpoints below:
Responsive layouts
We can design layouts for various viewport width
Mostly fluid – The mostly fluid pattern consists primarily of a fluid grid on large or medium screens. t usually remains the same size,simply adjusting the margins on wider screens. On smaller screens, the fluid grid causes the main content to re flow, and the columns are stacked vertically. one major advantage of this pattern is that it usually only requires one break pointbetween small screens and large screens.
Column drop – for full width multi column layouts column drop simply stacks the columns vertically as the window widthbecomes too narrow for the content. Eventually, this will result in all ofthe columns being stacked vertically. Choosing bright points for thislayout is dependent on the content and the changesfor each design that you need.
Layout shifter – the layout shifter patternis the most responsive pattern, with multiple break points acrossseveral screen widths. The key to this layoutis the way content moves about. So instead of re flowing and dropping,below other columns. Due to the significant differencesbetween each major breakpoint, it is more complex to maintain and willlikely involve changes within elements, not just the overall contentlayout itself.
Off canvas – rather than stacking content vertically, the off canvas pattern placesless frequently use content, perhaps navigationor up menus off the screen and only showing it when the screen sizeis large enough on smaller screens. The content then is just one click away.
Tiny tweaks. – simply make small changes to the layout,such as adjusting the font size or resizing images or movingcontent around in a very minor way. It works well on a single column layouts such as one pagelinear websites and text heavy articles. But it’s not normally enoughfor a general responsive web site.
You may have to create prototypes for each of those break points. It really depends on the audiencethat you’re designing for. You should have enough research that will tell you what devices What you need to design for is there any data or analytics that you can refer toto figure this stuff out etc.
Understand context
Prioritise elements
Choose breakpoints
Design wireframes for the breakpoints
Conduct design reviews for usability
Accessibility this is the measure of usability by persons with one or more disabilities – in the real world we make physical spaces more accessible by adding wheelchair ramps or automatic doors, road crossings that talk, that have beeping sounds to alert people when they are able to walk. Many of these features, are regulated by law.
This law was enacted to eliminate barriers in information technology to make available new opportunities for people with disabilities to achieve these goals.
The World Wide Web Consortium. is the main international standards organisation for the internet. So these guidelines apply internationally.
They have four main categories:
Perceivable – information and user interface components must be presentable to users in ways that they can perceive. Some of the guidelines provide text alternatives for nontext content.
Create content that can be presented in different ways without losing information or structure. Make it easier for users to see and hear content, including separating the foreground from the background.
Operable, the user interface components and navigation must be operable, make all functionality available from the keyboard, provide userswith enough time to read and use content. Do not design content in any way that is known to cause seizures. Provide ways to help users navigate, find content and determine where they are.
Robust content must be robust enough so that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
Understandable information on the operation of the user interface must be understandable Make text content readable and understandable. Make web pages appear and operate in predictable ways and help users avoid and correct mistakes.
There are a variety of visual auditory motor, cognitive disabilities and also speech issues and repetitive stress injuries. And let’s not forget temporary disabilities like broken arms. We need to comply with the accessibility standards because its the right thing to do and t impacts 50% of the world’s population. Many companies have problems with their captures (which are annoying anyway) , but they render sites inaccessible to people with visual impairments.
The UX designers role is to Advocate for our users. While many accessibility issues and the solutions are technical and handled in development, the responsibility falls on the UX professionals to raise and support accessibility issues. We are the voice of our users. these are guidelines and not absolutes. There are always constraints. There are always circumstances and reasons that you might not be able to meet some criteria,but you should always do your best provide perform usability testing, inspect your site, use online tools to assess it, document any evidence you might find and make recommendations for how you can improve things.
There are lots of different types of assistive technology out there. When possible you should be including these technologies in your usability testing. that your designs will work for users who rely on them
Find the balance. you can run the risk of going too far the other wayand alienating the majority of your users. So just be careful of that. Accessibility is not a barrier to innovation. Practises that benefit users with disabilities often will benefit all users. Accessibility is not boring, balance inclusive and interesting design.
Tips for designing accessibility
Ask yourself, can you still understand in black and white, there are ways to ensure that your site in the information you’re trying to convey, is colour agnostic. A good example is an error state on a form. The element with the error is generally highlighted in red, but there is also an icon,usually some kind of exclamation point. Otherwise, people with colour blindnessor low visual acuity will have issues in understanding your content.
Ensure sufficient contrast, he World Health Organisation estimates that there are around 217 million people with moderate to severe vision impairment, according to the World Wide WebConsortium The contrast ratio between text and its background should be at least 4.5 to one. That’s the conformance level for the double standard. The ratios do become more forgiving with larger and heavier fonts, as they’re easier to read at a lower contrast.
Design usable focus states. Have you noticed the blue lines that appear around links or buttons? This specifically doest end to happen in Chrome. They’re called the focus indicators. They help people know what element on the screen the keyboard is focussed on nd therefore their location when they’re navigating the site. They used by people with visualor tactile impairments, or people who just prefer the keyboard for navigating the internet. The elements that should be focus of all our links form ields, widgets, buttons and menu items. They need to have a focus indicator that makes them look different from the elements around them. Users who rely heavily or even solely on a keyboard need clear on screen indications of what objects or links are selected so that they can properly navigate your site and access what they need. To ensure this accessibility, you need to make sure that all navigational elements on a page are compatible with the visual focus indicator. Don’t make people hover to find things. Why? Because keyboard users and assistive technologies like Dragon rely on actionable itemsbeing visible on the screen. If a link or a button cannot be seenby dragon, it cannot be clicked. Ways to deal with the hover issueInstead of hiding actions and information behind other states,explore more inclusive alternatives. Place secondary actions inside of menusor non-mobile dialogues without using hover states to hide the trigger. contrast of secondary iconsand darken them on hover. Use tangible items as triggers for largerhovers. An info icon is a better trigger than white space to launch a content filled hover.
What to strive for
Making a site compliant isn’t actually that difficult.What it comes down tois best practise and usability. A web for everyone is a great read We’re looking for making things people first with a clear purpose having a solid structure, easy interaction, help with wayfinding, clear presentation , plain language, accessible media and universal usability.
By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest.
-Confucius
I have refreshed my website knowledge and gained a deeper understanding of web design, web layouts, grids, responsive design, and accessibility and compliance.
I have learned more about the importance of creating a visually appealing and accessible website that can be accessed by a wide range of users. I have also reminded myself of the importance of using a grid system to ensure consistency and balance in the layout of the website. I have gained more of an appreciation for responsive design and the need to design for different screen sizes and devices.
Synthesising my directed learning, self-directed research, and feedback from tutors and peers is essential to enhancing my practice which I do get a lot of feedback in a professional setting but not so much with University so I need to improve this the challenges and obstacles in my reflections should be analysed to identify the reasons for the problem and how to overcome them.
I have researched best practices in web design, web layout, grids, responsive design, and accessibility and compliance. I have learned about the different design principles, such as balance, contrast, and visual hierarchy, and how they can be applied to create an effective and engaging website. I have also discovered the importance of considering accessibility and compliance when designing for the web.
In terms of web layout, I have explored different types of layouts, such as fixed, fluid, and responsive layouts. I have learned about the benefits and drawbacks of each type and how they can be used to achieve specific design goals. I have also gained more of an appreciation for the use of grids in web design and how they can help to create a consistent and balanced layout.
Regarding responsive design, I have learned about the importance of designing for different screen sizes and devices. I have discovered how media queries can be used to adjust the layout and design of a website based on the device being used to access it.
In terms of accessibility and compliance, I have learned about the different guidelines and standards that must be followed when designing for the web. I have gained an understanding of how to design for users with disabilities, such as visual impairments or motor disabilities, to ensure that websites and apps can be accessed by as many users as possible.
my understanding of web layout and grid, responsive design, and accessibility and compliance has improved even just with the work I am doing for the company website but this module has helped too. I have become proficient in designing responsive websites that adjust to different screen sizes, and ensuring that my websites are accessible and comply with web standards such as W3C and ADA. But this can always be improved as I am by no means a web developer.
I have identified several challenges in my practice lately , such as the need to improve my knowledge of emerging web technologies, and to be more consistent in adhering to accessibility and compliance standards as sometimes this can slip
Reflecting on the process of designing a website and currently building a website for work it is quite useful to refresh and confirm what I am doing is the right thing.
I have gained a deeper understanding of the importance of web layout, grids, responsive design, and accessibility and compliance. Through my research, I have learned more about web design not just being about aesthetics, but also involves creating a user-friendly interface that ensures easy navigation, readability, and accessibility for all users.
Choosing the right colors, typography, and visual elements can enhance the user experience and convey the brand’s message effectively which is something I sometimes default to as I have been a graphic designer for a long time and I need to stop myself from designing aesthetics first sometimes.
Designing a responsive website that adapts to different screen sizes and devices is crucial in today’s world where mobile usage is on the rise. Designing a website requires a holistic approach that considers various factors and involves constant testing and iterations.
Moving forward, I plan to continue improving my skills in web design and stay up-to-date with the latest trends and best practices.
I would like to explore more design patterns and techniques, such as parallax as I have been having issues with parallax at work also animation interests me and I would like to do more with that as I have had to pause any extracurricular learning due to time constraints.
Additionally, I plan to focus more on creating more accessible and compliant websites that ensure equal access to all users, including those with disabilities. This will involve learning more about WCAG (Web Content Accessibility Guidelines) and incorporating accessibility features such as alt text, keyboard navigation, and screen readers into my design process, while I know the basics to be compliant I would like to look at this in more detail.
I also plan to explore different tools and frameworks, to improve my responsive design skills. I am excited to continue learning and growing I plan to incorporate more feedback from my tutors and peers as I am currently working in siloh with this entire project.
[~30 minutes]
Take one of the wireframes you made for your UX Prototype. Duplicate the design file (or just the page, or artboard) and redesign it on a grid.
Have a think about the following:
- What was that process like for you?
- What changed?
- What are your impressions of the before and after?
[~60 minutes]
Select one of your screens from your UX Prototype. Either on paper or in your design tool, rearrange the elements to fit a medium screen size (tablet, eight columns) and a small screen size (mobile, four columns, or one).
Did you make any changes in hierarchy? Sizes of elements etc?
[~30 minutes]
Review what you have designed for your project.
- What might you change to be more accessible to users?
- How might you implement that?
- If you have thought of a colour scheme, how would it stand up to accessibility if it was applied to your project?
- Babich, N. (2017) ‘Building Better UI Designs With Layout Grids’ [online], Smashing Magazine, 20 December. Available at: https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/Links to an external site. [Accessed 10 April 2023]
- Gillis, O. (2020) ‘6 Rules of Thumb For Creating Website Grids’ [online], Elementor, 10 September. Available at: https://elementor.com/blog/grid-design/Links to an external site. [Accessed 10 April 2023]
- Responsive layout grid (2020). Available at: https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-marginsLinks to an external site. [Accessed 10 April 2023]
- Soegaard, (2020) ‘The Grid System: Building a Solid Design Layout’ [online], Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layoutLinks to an external site. [Accessed 10 April 2023]
- Tang, C. (2019) ‘Responsive grids and how to actually use them’ [online], UX Collective, 19 April. Available at: https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01Links to an external site. [Accessed 10 April 2023]
- NN Group (2019) Why You Should Use a Grid for Designing Layouts [online video]. Available at: https://www.youtube.com/watch?v=zTVH9ryf5XsLinks to an external site. [Accessed 10 April 2023]
- Sebastian, F (2018) ‘Bidirectional Scrolling is here to save Responsive Design’ [online], UX Planet, 7 May. Available at: https://uxplanet.org/bidirectional-scrolling-is-here-to-save-responsive-design-be1afe53206d[Accessed 10 April 2023]
- Couldwell, A (2018) ‘Responsive Design and the Role of Development in Design’ [online], Owl Studios, 12 December. Available at: https://medium.com/owl-studios/responsive-design-af7a1f14b991Links to an external site. [Accessed 10 April 2023]
- Babich, N (2016) Responsive Design Best Practices [online], UX PLanet, 2 March. Available at: https://uxplanet.org/responsive-design-best-practices-c6d3f5fd163bLinks to an external site. [Accessed 10 April 2023]
- InVision (2015) The future of responsive design standards [online], Invision, 19 November. Available at: https://medium.com/@InVisionApp/the-future-of-responsive-design-standards-2e4d401e7dc6Links to an external site. [Accessed 10 April 2023]
- Khagwal, N (2020) Responsive Grid Design: Ultimate Guide [online], Medium, 23 October. Available at: https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892Links to an external site. [Accessed 10 April 2023]
- Web Content Accessibility Guidelines (WCAG) Overview (2020). Available at: https://www.w3.org/WAI/standards-guidelines/wcag/Links to an external site. [Accessed 10 April 2023]
- Inclusive design toolkit (2020). Available at: https://www.ontario.ca/page/inclusive-design-toolkitLinks to an external site. [Accessed 10 April 2023]
- tStanley, P (2018) Designing for accessibility is not that hard [online], UX Collective, 27 June. Available at: https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94Links to an external site. [Accessed 10 April 2023]
- Yearling Hively, T (2019) Why Truly Accessible Design Benefits Everyone [online], Modus, 1 August. Available at: https://modus.medium.com/accessing-accessibility-in-design-22b73d8046ceLinks to an external site. [Accessed 10 April 2023]
The Design thinking playbook
Lewrick, M., Link, P. and Leifer, L., 2018. The design thinking playbook. Hoboken, New Jersey: John Wiley & Sons, Inc.