Website design agency Numiko builds stunning and complex websites for some of the most prestigious organizations in the world. So we asked their team of web designers to uncover the latest web design trends for this year and share what their predictions are for 2024. Here\u2019s what they identified as the current top web design trends:<\/p>\n
Bento grid layouts<\/h3>\n
These types of layouts aren\u2019t new. In fact, they\u2019ve been around for decades. However, they have exploded in popularity recently, in part due to their adoption by Apple both in their online presence and iOS.<\/p>\n
The bento grid layout feels modern and playful. It\u2019s also very simple, as it\u2019s a form of grid, making it easy to use. You can see more examples of Bento Grids here<\/a>.<\/p>\n Apple\u2019s decision to use the Bento grid layout for their pages showing the iPhone 14 Pro and Apple Card have propelled its popularity. Apple is probably the world-leading brand in design, so their use of it will prompt many other designs to consider it for their websites.\u00a0<\/span><\/p>\n Website technologies have developed to support the Bento grid designs, making them easier for developers to deliver. This combined with its integration into iOS means we predict this hot web design trend is just getting started and will continue to grow in popularity in 2024.\u00a0<\/span><\/p>\n Fluid layouts are fully scalable and \u2018fluid\u2019 design systems that mean a website no longer snaps to predefined breakpoints and instead proportionally scales to a users\u2019 viewport, ensuring a more consistent experience for users across devices. <\/b>In design terms, this means no-longer using pixel based measurements, but instead using percentages.<\/p>\n Elements within the grid adjust proportionally, so the layout smoothly adapts to different sizes. This is the most effective way to ensure your website looks great on all devices. With the rise of new device types such as smartphones with folding screens, like the Galaxy Z fold, it\u2019s more important than ever to ensure your website is perfectly flexible to whatever device your visitor is using.<\/p>\n The proliferation of AI-generated imagery will explode in the next few years. This will affect website design and imagery heavily. This trend started recently with the launch of MidJourney v5 in March 2023<\/a>, and is set to gain further momentum as AI image-generation tools continue to improve. Dalle-3<\/a> is now out in alpha and is due to be released to all Open-AI subscribers in October 2023.\u00a0<\/span><\/p>\n Below is an example of AI-generated imagery. It\u2019s already on the cusp of realism, it could soon be indistinguishable.\u00a0<\/span><\/p>\n This raises ethical questions, particularly for charities - does using AI-generated imagery of non-existent people diminish the legitimacy of your message?\u00a0<\/span><\/p>\n Despite this, we have no doubt that we\u2019ll see AI imagery as a major trend in 2024, potentially with some pushback. Its ease of use means websites that may have lacked great photography in the past and therefore rely on flatter designs, will now be more likely to use images.\u00a0<\/span><\/p>\n AI-generated video may also start to improve in the same way as AI imagery has over the past year, increasing the use of video and animated content.<\/p>\n Website accessibility is nothing new, but new developments over the course of this year mean it\u2019s receiving more attention than ever. The WCAG standards which set out the official requirements for websites to reach different levels of accessibility and has recently updated its guidance to WCAG 2.2<\/a>.<\/p>\n In the UK, all public sector websites have been required to meet WCAG AA accessibility standards<\/a> since 2018. The updates to the WCAG guidelines mean that web design teams will be looking to accessibility afresh in 2024 and building more accessible websites than ever before.<\/p>\n It\u2019s 2023, and the 90s are cool again.\u00a0<\/span><\/p>\n Fashion moves in cycles, and strange as it may seem, there\u2019s now enough time between us and the early 90s that a current pop star\u2019s music videos are deliberately cultivating a 90s look<\/a>.<\/p>\n Web designs are not immune to this. Certain websites are embarrassing 90s or 2000s fashion trends and applying it to their design. Nottingham Contemporary Art Gallery for example opted for a nostalgic, 90s-inspired design for its new website<\/a>. \u00a0<\/span><\/p>\n It\u2019s fun, quirky, and stands out from the crowd. It\u2019s a great example of how trends can be unpredictable, they don\u2019t always go one way. Sometimes you have to leap back into the past in order to be cutting edge.\u00a0<\/span><\/p>\n The \u2018hero image\u2019 is a classic of web design. A way to showcase your product or evoke a feeling with a single powerful image. The typographic hero image takes this style of design but updates it by switching to using oversized typography to create a memorable impression.<\/p>\n Artist Martine Syms\u2019 website uses extra-large typography in the place of a hero image to make a bold impression on the visitor.<\/p>\n Numiko<\/a> applied this trend to their own website, which uses extra-large typography in place of a hero image, with the addition of masked video, using the typography as the mask.<\/p>\n Microinteractions in web design are subtle interactive elements that enhance user engagement and experience. They provide feedback, guide user behavior, and serve various functions such as loading indicators, form validation, and gamification.<\/p>\n These small design elements play a significant role in brand identity and contribute to user satisfaction and usability on websites and digital applications. The interaction itself may be just a simple animation on a button to indicate a change of status, but these little elements of movement help bring a website to life.\u00a0<\/span><\/p>\n By giving the user subtle clues about changes in status or interactive elements, they can help improve the UX whilst adding to the aesthetic feel of the website, such as in the example below.\u00a0<\/span><\/p>\n A simple but effective micro interaction website is rotating the hamburger menu to indicate when it is opened. Or you can animate it to become a cross, indicating that you tap there to close it once opened.<\/p>\n Bold typography is a trend characterized by the use of large, impactful fonts. It serves to immediately capture attention, establish a visual hierarchy, and convey brand personality. This trend enhances readability, adapts well to mobile responsiveness, and complements minimalist design principles.\u00a0<\/span><\/p>\n Designers often use custom fonts for creative expression, and when combined with animations and interactions, it can create engaging web experiences. However, it's essential to consider accessibility to ensure an inclusive user experience.\u00a0<\/span><\/p>\n For a long time, typography trends emphasized simplicity, serifs were out and Helvetica was king. But now things are going in the opposite direction. Serifs are back. Designers are using typography more creatively, using uncommon fonts to stand out from the crowd.\u00a0<\/span><\/p>\n E-commerce store aiaiai<\/a> employs a typographically driven design to great effect, creating a captivating website that stands out from the crowd.<\/p>\n![\"Bento](\"https:\/\/www.smartinsights.com\/wp-content\/uploads\/2023\/10\/Bento-grid-design-trend-example-700x525.jpg\")
<\/a><\/p>\nFluid layouts<\/h3>\n
AI-generated imagery<\/h3>\n
![\"Example](\"https:\/\/www.smartinsights.com\/wp-content\/uploads\/2023\/10\/Example-midjourney-AI-generated-image-700x392.jpg\")
<\/a><\/p>\nRenewed focus on accessibility<\/h3>\n
Retro \/ nostalgia\u00a0<\/span><\/h3>\n
![\"90s](\"https:\/\/www.smartinsights.com\/wp-content\/uploads\/2023\/10\/90s-retro-web-design-trend-example-nottingham-contemporary.png\")
<\/a><\/p>\nLarge typographic hero images<\/h3>\n
![\"Bold](\"https:\/\/www.smartinsights.com\/wp-content\/uploads\/2023\/10\/Bold-typographic-hero-image-design-trend-example.png\")
<\/a><\/p>\nMicrointeractions<\/h3>\n
![\"microinteraction](\"https:\/\/www.smartinsights.com\/wp-content\/uploads\/2023\/10\/microinteraction-example.gif\")
<\/a><\/p>\n![\"menu-button](\"https:\/\/www.smartinsights.com\/wp-content\/uploads\/2023\/10\/menu-button-microinteraction.gif\")
<\/a><\/p>\nBold and custom typography<\/h3>\n
![\"typographically](\"https:\/\/www.smartinsights.com\/wp-content\/uploads\/2023\/10\/typographically-driven-ecommerce-design-example.png\")
<\/a><\/p>\n