Speaker Website Trends in 2023 and Beyond
Wondering what will happen to websites when Web 3.0 comes into reality?
It is not like Y2K; you do not have to worry about your world ending. But there are some very cool (and necessary) features you are going to want to incorporate into your website in the not-too-distant future.
Chances are that the site you have today won't meet the coming demands of your customers tomorrow.
Let’s look at some speaker website trends.
Design
First, they are called trends for a reason. Design trends like big hair and bell bottoms – they often float in and out of popularity. Whereas disco is firmly dead – at least I hope so. The hard part is knowing if a trend is going to last – or fade.
And not all of the latest website design trends lend themselves to a speaker’s website. Adding design just because it is cool is usually not the best idea for a speaker. Some of the trends out there might work great for a photographer's portfolio, or even for some products, but design effects have to be used intelligently. Remember – everything is permissible – but not everything is beneficial.
Design should be used to emphasize an idea or a point. One great tool here is the use of scrolling or hover effects. Remember – you would never mix them the way I have shown them below. These are examples and ideas.
Here are a few of the trends that I believe could be the most useful in websites for speakers.
Effects for page links within your copy
Links that underline when you hover on them
See the Pen Links / Buttons hover animations by CaleyWalsh (@caleywalsh) on CodePen.
Links that have an animated box around them
See the Pen Button Hover Animation by CaleyWalsh (@caleywalsh) on CodePen.
Effects for Buttons
Animated buttons
See the Pen Wacom button:hover effect by CaleyWalsh (@caleywalsh) on CodePen.
Changing text on hover
See the Pen Change text on :hover and :active by CaleyWalsh (@caleywalsh) on CodePen.
Button hover effects
See the Pen Collection of Button Hover Effects by CaleyWalsh (@caleywalsh) on CodePen.
Animated icon on hover
See the Pen Arrowed link - circle on hover (cf Google Home website) by CaleyWalsh (@caleywalsh) on CodePen.
Direction aware hover effects
See the Pen Direction-aware 3D hover effect (Concept) by CaleyWalsh (@caleywalsh) on CodePen.
Some other cool effects to highlight a product or key areas on interest are:
Text appearing on hover
See the Pen Simple Tile Hover Effect by CaleyWalsh (@caleywalsh) on CodePen.
Zooming in or out on photos
See the Pen Demo: CSS image hover effects by CaleyWalsh (@caleywalsh) on CodePen.
Glowing icon hover effects
See the Pen Glowing Icon Hover Effect by CaleyWalsh (@caleywalsh) on CodePen.
Animating an icon or entire section
See the Pen Cool hover animation by CaleyWalsh (@caleywalsh) on CodePen.
In addition to adding movement to our websites, there are a few other design elements to consider:
- From an aesthetic and accessibility standpoint – white space remains vital. Too much clutter is distracting
- As much as I fought against headers taking up all the space above the fold – this trend is returning with a vengeance. (remember – the whole ‘above the fold’ idea is a moving target with multiple device sizes these days anyway)
- The use of stock photography is very much on the decline. Custom illustrations are gaining popularity, as is the use of unique brand photography.
- Modern websites are using geometric shapes and subtle colour blocking to draw attention to a section break. The days of each idea or action having its own ‘block’ and visible section break is on its way out.
- You are also going to see a rise in asymmetrical design. Meaning items are slightly askew. Just a little off centre. They are arranged in a way that disrupts the way we expect to see them.
- Parallax scrolling also continued to be an ‘in’ trend. Personally, I am not in love with a site that is pure parallax, simply because it offers too many opportunities for the consumer to get stuck and unable to move off the element – especially on mobile devices.
