Meta has spearheaded an open letter calling for urgent reform of AI regulations in the EU. The letter, which garnered support from over 50 prominent companies – including Ericsson, SAP, and Spotify – was published as an advert in the Financial Times. The collective voice of…
Beautiful Poster Art Created with CSS & JavaScript – Speckyboy
Posters are among the most common art forms. You probably had a few of them on your wall as a child. They cover the full spectrum of people, places, and events.
They also serve as an inspiration for web designers. Their use of color and typography is part of how we see the world. We can see the impact all over the web.
What’s more, we can recreate and enhance the experience online. Goodies like 3D effects and animation bring posters to life. There’s also an element of interactivity. That can be just as powerful as a bold layout.
We wanted to see how designers are using their creativity. So, we perused the archives of CodePen for beautiful poster art. Here are some examples that use CSS, JavaScript, and other technologies. Enjoy!
Furiosa 3D Animated CSS Poster by Olivier 3lanc
Talk about a poster that’s brimming with life! This 3D rendering places the movie’s characters in a cut-out. The entire presentation looks like a diorama. Everything is powered by CSS – no JavaScript in sight.
See the Pen FURIOSA 3D Animated Poster by Olivier 3lanc
Replicating & Animating Zürich Tonhalle’s Poster by Jon Yablonski
This snippet is part of a project that recreates iconic posters. The beauty here is in the minimal layout and bold typography. Animated lines add a modern touch to this classic.
See the Pen Zürich Tonhalle (1955) by Jon Yablonski
CSS Grid Poster Exercise by Victoria Bergquist
A combination of Flexbox and CSS Grid fuels this example. The variation of shapes would seem nearly impossible to do without these tools. The included splash of color makes for a compelling result.
See the Pen CSS Grid Poster Exercise 1 by Victoria Bergquist
Donkey Kong Poster Collection by Daniel Fontes
Here’s a fun tribute to the past. Gamers will instantly recognize this series of images from Donkey Kong. The classic video game posters feature a fun lighting feature. Tug on the chain to illuminate your favorite poster. Bonus points for the flicker effect!
See the Pen Donkey Kong – a small poster collection by Daniel Fontes
PPL MVR CSS & SVG Poster Designby Kristopher Van Sant
Band posters are a common theme among designers. Perhaps that’s because so many of us have them on our walls. This animated sequence takes inspiration from print artwork. And it’s another example of what CSS is capable of.
See the Pen PPL MVR by Kristopher Van Sant
Grid Duotone Gradient Poster Design by Cassie Evans
The power of CSS Grid is real. The poster is beautiful and complex. Most impressively, the styles consist of less than 200 lines. A little code and a lot of imagination can go a long way.
See the Pen Grid Poster by Cassie Evans
Grunge Poster with the Wave Motion Effect by ilithya
Who can resist the retro vibes coming from this poster? It captures the look of the 1990s – complete with raining triangles. Move your cursor to change the perspective of the photo. It’s a far-out experience, for sure.
See the Pen Grunge Poster by ilithya
The Matrix Resurrections Digital Poster by Sparklingman
The Matrix movie series is known for a different kind of rain. This digital poster may appear simple. However, clicking on it shifts the green and black pattern. The effect is subtle – but fits beautifully with the movie’s aesthetic.
See the Pen The Matrix Resurrections | Sparklingman digital poster #026 by Sparklingman
A New Take on a Classic Art Form
The examples above combine classic print sensibilities with online capabilities. It’s a fun exercise that goes beyond what’s hanging on your wall.
We may think of posters as being simplistic. But they also open a world of possibilities for designers. Thus, we can take this inspiration and run with it.
For example, posters may help us rethink traditional web layouts. Elements like vertical text and unique container shapes come to mind. They can serve as a launching pad for ideas.
Want to see more examples of online poster art? Check out our CodePen collection!
Related Topics
Top
Here’s how niche AI assistants are helping unlock the technology’s true capabilities – AI News
With artificial intelligence continuing to permeate a growing number of sectors, there is no telling what this market will be worth in the next decade or so. Amid this expansion, AI assistants have particularly experienced huge growth, both in terms of their scope of operation and…
Aspects of the Early Web I’d Like to See Come Back – Speckyboy
The early web (we’ll define it as 1995 – 2005) was an adventurous place. The narrative was that anyone could participate in this new medium. Thus, it attracted an eclectic mix of creators.
We tend to look back to these days with some cringe. Yes, the design and technology of that era were lacking. And there were very few standards to speak of. But there were also plenty of positives.
I’m biased – my web design journey began in this era. Therefore, I have a lot of nostalgia. I’ve written about it a time or 10.
But there are things I miss about those days. Practices and ideas that defined the enthusiasm of the time. Things that have long since faded.
As such, here are some parts of the early web I’d like to see come back – even if only for a day!
The Absence of Big Data
So-called big data wasn’t prevalent in the 90s. Google would plant those seeds in the decade. However, the web was yet to be controlled by trackers and algorithms.
Perhaps we didn’t have the same level of personalization. So what? The side benefit was a lack of manipulation.
We still saw this in the early days of Facebook and Twitter. Remember when your feeds were all in real time? It provided a sense of witnessing things as they happened.
Early search engines had similar perks. You were likely served the same results as someone on the other side of the world. Less convenient? Sure. But also less intrusive.
What we see now is ultimately controlled by companies. We don’t necessarily see the best search results. We see whatever Google’s algorithm deems appropriate.
Social media companies make it harder to view your feeds in chronological order. And advertisements are a little too personal, in my opinion.
It’s easy to understand why things have changed. Manipulating users is a profitable business. Plus, advertisers want to target specific audiences.
Still, I miss the days when the web had more randomness. Stumbling upon something new seems like a lost art.
The Simplicity of Website Design & Structure
“Things were simpler back then.” That’s a common refrain when adults talk about their childhood. I think it also applies to web design and structure.
There’s a good reason for that simplicity. HTML was basic. CSS didn’t even exist for part of this time. And there was only so much we could do with the day’s technology.
I can’t deny the prevalence of poor design. Web design was new. We were all amateurs in a sense. I played a role in making the place a bit unruly!
Even so, the limitations were often a good thing. The dangers of overcomplicating things became apparent. Designers eventually learned that simplicity was better for everyone.
On the other hand, we had very few standards or best practices. Things like performance, security, and accessibility received little consideration.
Today, we tend to overcomplicate things as a default. We use heavy content management systems (CMS) for brochure sites. We make a mess of security. And we use DIY tools without much thought about portability or ownership.
Perhaps the good parts of modern design can stay. But how about a resurgence of simplicity?
The Impact of the Solo Entrepreneur
Entrepreneurship is still possible on the web. It’s the idea that an individual can make an impact with their creativity. That could be a product, service, or even great content.
I think it has become harder for individuals to succeed, though. There are too many mountains to climb.
Those algorithms make it harder to gain visibility. And there are so many people (and bots) competing for attention.
Not to say it was easy back in the day. But originality tended to shine through. Oddities like the Million Dollar Homepage are a prime example.
Early bloggers also had an opportunity to find a core audience. They built niche online communities dedicated to a shared interest.
Tools like WordPress make it easier to self-publish content. But reaching people has become a full-time job. Creators must often rely on sponsors and product placement to gain traction.
It used to be possible for content to spread organically. Search engines weren’t prioritizing big sites over small ones. Thus, anyone had a shot to be seen by potential followers.
What started as a side gig could turn into something more. That’s still possible in theory.
YouTube and TikTok are the flavors of the minute for this. But they are walled gardens. Doing something similar on an open platform is daunting.
The Freedom to Create and Connect
I love to think of the early web as uncharted territory. We couldn’t look to the past when populating this new medium. So, we made it up as we went along.
There were positives and negatives about this. Even then, some used the web for nefarious purposes. But they seemed like dark corners that were avoidable.
The bigger picture was all about freedom. Anyone could create and publish content. And the web would be a vehicle to make positive connections with others.
There was talk of the great potential it held for society. People without a voice suddenly gained one.
The biggest impediment at the time was access to technology. But that could be resolved through cheaper devices and widespread internet. The sky was the limit.
I believed in the web as a change agent. And that the world would be better for these newfound connections.
We haven’t quite gotten there. Repressive regimes have stifled free speech. Bot farms spread misinformation and create division. Large corporations make the rules with little oversight.
The web didn’t become a whole new world. It instead became a reflection of the one we already had.
Say it isn’t so, Tim Berners-Lee.
Letting the Past Guide Us
Here’s the good news: We now have a past era to look to. We can use it as a guide when building the web’s future.
I don’t expect Google, Facebook, or Twitter/X to change their ways. Not without the mandate of a governing body. But we also don’t have to follow their lead.
Those of us who build and publish can keep the ideals of the early web alive. Think of them as small pockets of resistance.
How do we do it? We can start by embracing open tools and platforms. Use a browser that focuses on user privacy. Publish with a CMS that gives you ownership. Support decentralized systems like the Fediverse.
Most of all, pass these lessons to the next generation. They haven’t experienced a truly open web. Show them why it’s worth having.
Perhaps the web was bound to be changed for the worse. But we can still use our little corner of it as a beacon of light.
Related Topics
Top
xAI breaks records with ‘Colossus’ AI training system
Elon Musk’s xAI has unveiled its record-breaking AI training system, dubbed ‘Colossus’. Musk revealed that the xAI team had successfully brought the Colossus 100k H100 training cluster online after a 122-day process. Not content with its existing capabilities, Musk stated, “over the next couple of months,…
UK adjusts AI strategy to navigate budget constraints
The new UK Government is developing an AI strategy that prioritises public sector adoption over direct industry investment, as part of broader cost-cutting measures ahead of the autumn budget. Since taking office, the government has been reviewing AI-related expenditures and has already cancelled £1.3 billion worth…
Making a measurable economic impact
How do you measure the value of an economic policy? Of an aid organization’s programming? For Saeed Miganeh, who completed an MITx MicroMasters in Data, Economics, and Development Policy and is now enrolled in MIT’s master’s program in Data, Economics, and Design of Policy (DEDP), these are key questions he is determined to answer.
“Enrolling at MIT fed my interest in investigating the political economy questions surrounding the development of African countries,” he says. “It boils down to promoting pro-poor, evidence-based policymaking in the developing world.”
Miganeh earned a bachelor of business administration from the University of Hargeisa and completed coursework in Open University Malaysia’s master of business administration program. Before enrolling at MIT full time, he spent 14 years as an accountant with the United Nations’ International Organization for Migration. His work with the IOM fed his curiosity about intent and impact, particularly how political agendas can affect policy adoption, how safeguarding human rights strengthens peace and prevents conflict, how climate change adaptation policies affect the poor, and how promoting intra-African trade spurs economic growth in the continent.
“My journey to DEDP began when I earned a certificate in Monitoring and Evaluation offered by the International Training Center of the International Labour Organization,” he recalls. “Our course coach recommended taking MITx courses, which led me to the MicroMasters program.”
Saeed grew up and completed his early education in the self-declared Republic of Somaliland during the reconstruction period after a decade-long civil war with Somalia. He was inspired by his country’s development of a functioning democracy and economy after conflict. Miganeh’s work is all the more impressive for someone who has lived almost exclusively there — with the exception of four years as a child spent in Ethiopia due to the civil war in Somalia — and whose studies have taken place entirely in the republic.
“Africa is the new battleground for fighting global poverty in the 21st century,” he says.
Practices and progress toward measurable improvement
Before pursuing graduate study at MIT, Miganeh worked in youth development programs with the Somaliland National Youth Organization. “I was the coordinator for one of their youth networks that worked on health,” he says. “After completing my undergraduate study, I assumed the position of finance officer for the organization.”
Later during his tenure with IOM, Miganeh learned that, while the organization has a central evaluation function that evaluates projects and programs, Somaliland’s governmental institutions lacked the capacity to effectively evaluate public policies and programs effectively. His work with the IOM helped him discover the practice areas where he might benefit from partnering with others possessing expertise he’d need to make a difference. “During my work with IOM, I was involved in development projects’ administrative and accounting functions,” he remembers. “I was interested in knowing how projects were impacting beneficiaries’ lives.
Miganeh wants to dig deeper into understanding and answering developing African countries’ political economy questions, noting that “development projects can consume lots of resources from design through implementation.” Ensuring these programs’ effectiveness is crucial to maximizing their impact and societal benefit. “Every country needs to have the necessary human capital to undertake evidence-based policy design to avoid wasting resources,” he says.
He returned to Somaliland to complete a capstone project that will allow him to put his newly acquired skills and knowledge to work. The project is an important part of his master’s program. “I’m [working] with the Somaliland Ministry of Education & Science, assisting in institutionalizing evidence-based policymaking in the education sector,” he says.
A unique vision to drive effective change
Miganeh is already planning to use the skills he’s acquiring at MIT to facilitate change at home. “I must discover and produce policy insights using my research and, with the guidance of the top academics and professionals at MIT and other institutions, translate them into effective policies that can make a demonstrable impact,” he says.
Miganeh reports that MITx’s MicroMasters and DEDP master’s programs help students develop the unique blend of skills — including the ability to leverage data-driven insights to design, implement, and evaluate public policies that improve societal outcomes — that can help them become effective agents of social change.
“My early enthusiasm for mathematics in high school and my later work in development organizations gave me the right combination to excel in the rigorous developmental economics coursework at MIT,” he says. “Once I’ve completed the program, I will establish a consultancy to advise government agencies, nonprofits, and the private sector’s corporate social responsibility departments on designing, implementing, and evaluating policies and programs.”
Miganeh lauded the faculty and students he encountered while continuing his studies. “I have developed professionally and personally,” he reports. He saved his highest praise for the Institute, however.
“Pursuing this master’s degree at MIT, where modern economics education has been reinvented and is home to faculty including Nobel laureates and other distinguished professors and scholars, was an enriching lifetime experience, personally and professionally,” he says.
“Looking back on discussions of how to tackle the world’s development challenges is a memory that will stay with me for the rest of my life.”
Sovereign AI gets boost from new NVIDIA microservices
To ensure AI systems reflect local values and regulations, nations are increasingly pursuing sovereign AI strategies; developing AI utilising their own infrastructure, data, and expertise. NVIDIA is lending its support to this movement with the launch of four new NVIDIA Neural Inference Microservices (NIM). These microservices…
OpenAI delivers GPT-4o fine-tuning
OpenAI has announced the release of fine-tuning capabilities for its GPT-4o model, a feature eagerly awaited by developers. To sweeten the deal, OpenAI is providing one million free training tokens per day for every organisation until 23rd September. Tailoring GPT-4o using custom datasets can result in…
How Client Requests Can Undermine Web Performance & Accessibility – Speckyboy
We know the importance of website performance and accessibility. Or at least we should. There’s no shortage of content dedicated to these subjects.
That creates awareness. Hopefully, awareness leads to learning. And learning leads to implementing best practices. There, we’ve made the web a better place!
Not so fast. There’s one factor the tutorials didn’t warn us about – clients. Yes, a client can lay waste to our plans for a fast and accessible site.
The question is: why? Why would a website owner get in the way of progress? Why would they insist on features that diminish the user experience?
There are a few possibilities. Let’s look at some common conflicts and ways to resolve them.
A Desire to Impress Users
First, let’s state the obvious. Our clients’ hearts are in the right place. They want a successful outcome as much as we do.
Clients also want to impress users. Sometimes, this puts them at odds with best practices.
The use of massive images is one example. Full-screen photos can be attractive. However, they also bog down page loads. An HD or (gasp!) 4k image is like strapping an anvil to a slow internet connection.
Sliders can produce even worse results. Sure, let’s add a few hundred kilobytes of JavaScript. What could go wrong?
People think that these features will promote conversions. The page will be so attractive that users can’t help but click that call to action. Websites used Flash intros for the same purpose back in the day.
They have good intentions. They may be looking in the wrong place, though.
The Belief That Competitors & Peers Are Right
Competition is a great motivator. So is the status of one’s peers. Both make us want to keep pace with those around us.
It’s a common theme when building a website. Web designers can fall for it as much as clients. You see something shiny and want to replicate it.
Perhaps the company across town uses a video background on every page. It may look cool. But is it the right thing to do?
Clients don’t want to be outclassed by someone in the same industry. They may not consider the consequences of adding such a feature.
A client may also fear that they’ll look bad to potential customers. As in:
“Company A has this feature on their website. They’re clearly superior to Company B.”
The reality may be different. The web’s novelty wore off many years ago. Looks are important. But so is usability. And what good is a video background for someone using assistive technology or a cheap mobile device?
That Their Preferences Are All That Matters
As the saying goes, “The heart wants what it wants.” We can say the same thing about our clients.
A client can become an immovable object when it comes to design. They’ll insist on an inaccessible color scheme. Or a font that is difficult to read.
Some won’t sign off on a design unless it includes all their demands. They’re the customer, after all. And they’re always right.
This thinking also impacts existing websites. A client might want to change a hero section. The reason? They’re sick of looking at the same thing every day.
It may make sense to them. However, they’re once again ignoring users. You know, the people they’re trying to serve.
Change for the sake of change could be a negative. It could confuse visitors and lower conversion rates.
Not everyone can see the bigger picture.
How to Help Your Clients See the Light
Yes, all of the above can be frustrating. There’s no need to lose all hope, though. A good conversation or two can make a difference.
Here are a few pointers for discussing performance and accessibility concerns.
Give an Honest Assessment of Your Concerns
The first step is to provide an honest assessment. Point out the potential problems you foresee.
From there, it’s about explaining each item of concern. Lay out the benefits and drawbacks. Give examples of how a feature impacts users.
For example, a slider could make site navigation more difficult for a visually impaired person. Your client may not have considered this possibility.
Clients will most often do the right thing in these situations. Being informed could be all it takes.
Offer Better Alternatives
It’s one thing to argue against a client’s idea. But what should they be doing instead?
Our job isn’t to merely dismiss a feature. We should also offer an alternative or two. Things that provide a similar effect – but without the hit to performance and accessibility.
We could suggest a hero area instead of a slider. It will grab a user’s attention while reducing load times. Perhaps it features a background pattern or a photograph that’s optimized. It stays on brand but doesn’t hinder usability.
It’s one way to guide a client toward better solutions. The idea is to improve the product and strengthen communication.
Be Patient
Clients aren’t always receptive to our ideas. We can warn them about the impact of a feature. But they sometimes need to see the results for themselves.
They might notice an issue when the feature launches. Or they may get complaints from other users. The shortcomings will become apparent either way. Or not.
We’ll need to be patient and bide our time. We can hold out hope that they’ll see things our way, eventually.
Educate & Encourage Good Choices
There will always be some give and take when working with clients. That’s part of the design and build processes. Web designers must balance client preferences with user needs.
Accessibility should be non-negotiable. It’s worth fighting tooth and nail for. If a client insists on something that goes against this pillar – the consequences are on them.
Performance offers more wiggle room. Odds are the result won’t be perfect. However, it’s our job to make the best of any situation.
Education is a valuable tool for web designers, though. We can help clients understand why these subjects are worth their investment. That can lead them to make better choices.
The benefits of performance and accessibility aren’t apparent to everyone. Thankfully, we have the power to change that.
Related Topics
Top