Articles

In this month’s collection of the freshest web designs from the last four weeks the dominant trend is attention to detail.

You’ll find plenty of animation, in fact, almost every one of these sites uses animation to a greater or lesser degree. Let’s dive in:

Globekit

Globekit is a tool that allows developers to quickly create animated and interactive globes and embed them on web pages. Its site features some exceptional 3D animation.

Yolélé

Yolélé is food company built around fonio, a West African super grain. Its site features a great page transition, and the landing page carousel is one of the few examples of horizontal scrolling we’ve seen work well.

Begonia

Begonia is a Taiwanese design agency with an impressive client list. Its site features animated typography, a super bold splash screen, and some surreal artwork. There’s so much here, it’s almost overwhelming.

Next Big Thing

Next Big Thing is an agency supporting the full lifecycle of start-ups. Its site is clearly targeting tech-based clients, and there are some lovely transitions. The masked hero transition on scroll is delightful.

Proper

We all have every reason for the odd sleepless night right now, but regular sleep is essential for our health. Proper offers sleep solutions from coaching to supplements on its subtly shaded site.

The Oyster & Fish House

The site for The Oyster & Fish House is packed with some delightful details. We love the subtle wave textures, the photography has a nostalgic feel, and the typography is perfectly sophisticated.

Drink Sustainably

Fat Tire produces America’s first certified carbon neutral beer, and Drink Sustainably has been produced to explain the concept. We love the vintage advertising style of the artwork.

Treaty

It seems like every week there’s a new CBD brand launching. What we like about Treaty’s site is the slick fullscreen video, the inclusion of botanical illustrations, and the really brave use of whitespace.

Studio Louise

You’re greeted on Studio Louise’s site by a shot of trees with two random shapes; as you scroll the shapes morph and relocate to the top right corner, and you suddenly realize they’re an “S” and an “L”, cue: smiles.

Wünder

Another site for a CBD product, this time a vibrantly branded sparkling beverage. Wünder’s site features enticing photography, an on-trend color palette, and credible typography.

Seal + Co

Some professions lend themselves to exciting, aspirational sites, and some companies are accountancy firms. However Seal + Co’s site creates the impression of a modern, capable, and imaginative firm.

DocSpo

There is some lovely, 3D animation on the DocSpo site. The company is a Swedish startup enabling digital business proposals, and its site is bold, Appleesque, and packed with nice details.

Motley

We never get tired of particle effects, like the one employed by Finland-based agency Motley. There’s some superb work in the portfolio, and it’s great to see a blog using Old Master paintings for thumbnails.

The Ornamental

The Ornamental sources leather goods for wealthy individuals, and luxury lifestyle firms. Its site is minimal, with some drool-worthy handbags. We particularly liked the image zoom hover effect in the store.

G.F Smith

G.F Smith is one of the world’s leading paper suppliers. Its redesigned site is much simpler than its last, with some lovely touches, like the varied paper photography when you hover over product thumbnails.

Raters

Raters is a new app that lets you discover new movies via reviews from people you trust. This simple site does an exceptional job of previewing the app, across multiple device sizes.

Fleava

There’s a whole heap of nice interactive details on Fleava’s site, from the cursor-following circles when hovering over links, to the way the thumbnails are squeezed when dragging through projects.

The Story of Babushka

A babushka doll is a traditional Russian toy, made up of dolls, nested inside dolls. The Story of Babushka uses the toy as a metaphor for growth in this children’s book, and the accompanying animated website.

Grand Matter

After the uniformity of the 2010s, there are a wealth of illustration styles being explored across the web. Grand Matter is an artist agency that represents some amazing talent, and we love the illustration they chose themselves.

Nathan Young

Nathan Young’s site does exactly what it needs to do: Providing case studies for his design work. The fade-out on scroll is a simple device that elevates the whole site experience.

Source


Source de l’article sur Webdesignerdepot


The Basics

AWS KMS is a Key Management Service that lets you create Cryptographic keys that you can use to encrypt and decrypt data and also other keys. You can read more about it here.

Important Points About Keys

Please note that the CMK generated can only be used to encrypt a small amount of data like passwords, RSA keys. You can use AWS KMS customer master keys (CMKs) to generate, encrypt, and decrypt data keys. However, AWS KMS does not store, manage, or track your data keys, or perform cryptographic operations with data keys.

Source de l’article sur DZONE

In 2019, to keep pace with an interior redesign of its visitor experience, the Empire State Building decided to redesign its website. Blue Fountain Media were engaged to deliver the project. With the new site launching, we spoke to Head of Design, Tatyana Khamdamova about designing for the world’s most famous building.

Webdesigner Depot: The Empire State Building is probably the most iconic building in America, if not the world. Were there any points at which you thought, “Oh God, this is too much pressure”?

Tatyana Khamdamova: Yes, of course, it was a lot of pressure knowing that people all over the world will be looking at your work. But with the pressure, we also felt excitement and pride that we got to work on such an iconic project. Just thinking that we are doing the site for Empire State Building made us feel proud of all that other work we did during our whole life that gave us the opportunity to be a part of this project.

WD: Blue Fountain Media is a large agency. Did you utilize the whole company, or was there a smaller, dedicated team tasked with creating the site?

TK: On a project like this one, you need the expertise of the team members from all departments in the agency. You want people to work together from the beginning to ensure that their knowledge helps to shape the project and produce the best possible outcome. It’s important for designers and marketers, for example, to be a part of the strategy and UX phase to provide their input which minimizes tunnel vision and generates more ideas. You can only achieve the best results if every single detail from strategy to design to development is done right.

WD: That’s a lot of people to coordinate. Did any roles naturally come to the fore, or is design leadership a quality that varies from person to person?

TK: Some people are natural leaders in their fields. But, sometimes a certain project requires people to take responsibility and show their leadership skills within the team. So I would say that it’s a quality that varies from person to person and doesn’t depend on a role or a title at all.

WD: What were the central aims of the redesign?

TK: ESB’s previous website did not reflect the level of design to match their iconic brand, UX was not user friendly, the content was outdated, and they wanted to grow online individual and group ticket sales. In addition to competing with global and NYC based tourist attractions, ESB was also faced with growing competition in the NYC Observatory market with Top of The Rock, One World Observatory, and Edge at Hudson Yards.

While the building underwent a $165 million renovation, BFM was tasked with creating a best in class website that reclaimed their iconic brand identity while providing an intuitive, and enjoyable user experience for both domestic and international visitors looking to learn about the building, exhibits, and the many ticket experience packages that they offer to visitors.

WD: How do you approach researching a unique project like this?

TK: We went to the source! First, we spoke to visitors of the Empire State Building while they were in line. What was their experience, did they use the website, what made them choose to visit the observatory instead of or in addition to some of the other competing observatories in the city. We then looked at other key tourist towers worldwide to see how they are positioning themselves globally to draw inspiration. We did in-depth stakeholder interviews that included folks working at the building every day and the types of interaction and questions they field from visitors. We conducted surveys of international travelers to understand their motivations and concerns. Finally, we dug into the website itself by testing using various protocols and platforms to understand the visitor paths, what they were able to easily do, and what tasks they may have found challenging. Drawing from all of those insights, we planned and designed the site using an iterative process.

WD: ESB visitors come from all over the world; how did you tackle designing for an international audience?

TK: People across the globe speak different languages, have different cultures and needs. Our goal was to learn about the audience and give them a site that looks and feels like it was created for them. Luckily we were working for the iconic building that is well known internationally and capturing the design aesthetic of the building itself already made the site recognizable across the globe. When working on the project we also were making sure that all users can see the information in their local language when they land on the site and have easy access to the language selector in case they want to change it. When you translate from one language to another the number of words and characters is not always the same. It was important to make sure that the site is designed and developed with an understanding of how the content will be displayed in other languages. With the localization help of our parent company Pactera EDGE we successfully translated the site in several languages and tested it to ensure that it looks right for the local and international audience.

WD: The famous view of the ESB is the external view, but your design feels more in keeping with the experience of the building’s interior. Was that a conscious decision?

TK: It was a conscious decision to create a site that makes you feel like you are visiting the building. Our goal was to make the visitor excited to buy a ticket and see all that beauty with their own eyes. But, if someone doesn’t have an opportunity to come to NY we wanted to make that online experience as close to the real one as possible. We understand that nothing will replace the actual visit to the Empire State Building but we wanted the website to feel real and by using the great photography and amazing Art Deco design elements, we were able to do so.

WD: How did you interpolate such a complex style as Art Deco into a functional site?

TK: Fortunately for us, our office is located a couple blocks away from the building and we had the opportunity to go there and see some of the details. We also had access to the great photos of the renovated hallways, exhibits, and observatory decks, which gave us the idea of how the Art Deco elements were used in the interior design of the building. We all know that interior design and web design have different needs and goals so it was an interesting challenge to design a site that makes you feel like you are inside the building without overwhelming users and that content is easy to read and the ticket purchasing process is simple and clean. We re-created a lot of design elements used on the ceiling, walls, and floor of the building simplified those elements and made them part of the website design. A lot of those elements were used in the background, call to actions, icons, and maps, and combined with the brand colors used in both interior and web designs we were able to give the site the Art Deco look.

WD: There’s been speculation in the design community recently that Art Deco may re-emerge as a trend in the 2020s. Having worked with the style, do you think it could benefit the wider web?

TK: This was a very specific design approach for a very specific project that takes us back to the 1920’s and emphasizes that era through modern twists in web design. I do not see how it can be applied on the web in general unless the client specifically asks for it, for example, architecture website, real estate, or furniture site. Every project is unique and has its own goals and style and there is no one solution that will fit all. As of today, The ESB is Art Deco in a sense and it truly owns that style.

WD: Can you share some details on the technology stack you employed?

TK: The site was built on the Drupal CMS, integrates with Empire’s partner Gateway Ticketing System, and is hosted on Acquia.

WD: Why Drupal? Does it have qualities that suit a project of this scale, or is it simply the case that BFM had the pre-existing expertise of Drupal to facilitate the build?

TK: BFM is a dev-agnostic production team and we always ensure we’re making the best recommendation to our clients. In this case, the previous website was built on Drupal, so in order to decrease the effect of a new platform rollout that would be unfamiliar to the internal ESB teams, we decided to keep the site on the Drupal platform. Luckily, Drupal is an extremely flexible CMS and the needs of the site perfectly align with what Drupal provides.

WD: With visitors from around the world, the range of browsers and devices you had to consider was vastly larger than most projects. Did you draw a line for support? If so, where was it?

TK: BFM constantly updates our list of supported browsers and devices to stay in line with changing technology trends and device usage around the world. We’re extremely lucky that our larger organization, Pactera EDGE, has deep roots in globalization and localization, so we leveraged their team to help us with all aspects of website visitors from the many regions around the world, including translation services and testing. Since this was a complete overhaul, we ensured the baseline standard for all devices was met and will continue to enhance as the future technology needs become apparent.

WD: The Empire State Building gets millions of visits each year, what sort of server resources do you need to throw at it to guarantee uptime?

TK: BFM is a partner of Acquia, and Empire State Building is hosting their new site with them. Acquia is a wonderful ecosystem built specifically for high performing drupal websites and provide many tools for their hosted sites to be able to handle fluctuations in visitors, traffic surges, and with the 24/7 support offered, they can easily manage the changing needs of worldwide visitors.

WD: Now it’s live, how does the new ESB site relate to its real world presence?

TK: The Empire State Building defines the New York City skyline. The world’s most magnificent Art Deco skyscraper, it’s a living piece of New York history and an instantly recognizable symbol of city culture today. The old site did not reflect the amazing interior and exterior design of the building and we had a chance to showcase the redesigned interior and bring more attention to the beautiful Art Deco design elements. We wanted to create the site to make you feel like you are visiting the building. By showcasing the exhibits, renovated halls, and observatories through compelling photography and architectural details, our goal is to make the visitor excited to buy a ticket and see all that beauty with their own eyes.

We’d like to thank Tatyana for taking the time out of her day to talk to us.

Source


Source de l’article sur Webdesignerdepot

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Stroke Text CSS: The Definitive Guide

 

Code Snippets for Easier Coding

 

Textdb – A Simple Way to Share Small Amounts of Data

 

10+ Favicon Generators to Make your Brand Stand Out

 

12 CSS Grid Layouts

 

Applying Disney’s Basic Principles of Animation to UI Design

 

Curiosity Creates

 

Previewed – Beautiful Mockups & Graphics for your Next App

 

We’re in a Golden Age of UX. Why is Video Chat Still Stuck in the ’90s?

 

18+ CSS Book Effect

 

How to Promote a Mobile App with an Animated Explainer Video

 

Hyperlog – Portfolios for Developers

 

Site Design: Looks like You Need to Let it Out

 

Doing Stupid Stuff with GitHub Actions

 

Is it Good Design? Well, Yeah.

 

15 Free Adobe XD UI Kits for Web and Mobile App Designers

 

The Office as You Know it is Gone

 

How Interactive Content will Increase your Visitor’s Time on Page

 

What do Web Design Clients Need from Designers?

 

Truthmark is a Photography Database Aiming to Stop Misuse in Fake News

 

200+ NoCode Tool List by WeLoveNoCode

 

Designing for ‘Why?’

 

10 Tips Before You Buy a Domain Name

 

Making Memories to Last (August 2020 Wallpapers Edition)

 

Design Constraints are not Restraints – They Stoke Creativity

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source


Source de l’article sur Webdesignerdepot

As a web designer, you’re constantly being bombarded with messages that tell you to acquire new skills, try new tools, and keep on hustling.

But if you’re constantly changing things up, does it do the opposite of what you originally set out to do? In other words, if you always have to start over, is it possible to ever really achieve anything?

I think it ultimately depends on why you’re making the change.

When Change Is the Right Move for Web Designers

One of the reasons I despise New Year’s resolutions is because it’s change for the sake of change:

It’s a new year, so it’s time to get all hyped up about this one thing I need to change about myself!

There’s a reason why so many resolutions fail by February. When you force a change, it’s really hard to stay invested in it, especially if it’s something you’ve chosen to do because everyone else has.

Change should be driven by necessity.

That said, when it comes time to make changes as a web designer, is it ever really necessary? Or are you learning new skills, trying new tools, or switching up your client list simply because it’s what you believe you have to do?

It’s important to be open to change, but you should only invest your time, money, or effort when it’s the absolute right move for you. Here are some ways you’ll know when that’s the case:

Learn New Skills To…

…Round Out the Basics

If you’re a new designer and there are gaps in your education and training (and I don’t mean formally, just in general), then there’s no reason to hesitate in spending time to acquire those skills.

This doesn’t just go for basic skills as a web designer or as a coder. This also goes for skills you need to become a successful freelancer.

…Add Evergreen Skills to Future-Proof Your Position

As you move up in your career, you’ll eventually find other skills worth learning. Just make sure they’ll help you move the needle.

The best way to do that is to focus on acquiring evergreen skills that’ll always be useful to you, no matter what stage you’re at in your career or how the design landscape changes. They should also go beyond the average skill set of a designer, so they help you stand out further from the pack.

… Create a Better Situation for Yourself

The web is constantly evolving, which means that your responsibilities and skills as a web designer will have to change in order to adapt. Whenever one of these shake-ups occurs, you should either be ready to master the needed skill right away or, better yet, have been working on it beforehand.

Take, Google’s mobile-first indexing, for instance. It announced it was going to be making this shift years before website rankings were impacted. Designers had plenty of time to not only learn what was needed to design for the mobile-first web, but to get all their existing clients’ sites in shape for it.

Adopt New Tools When…

…Your Existing Ones Are Slowing You Down

If you’re doing a lot of things from-scratch (like writing emails to clients or creating contracts), that’s a good sign your toolbox needs some improvement.

As a web designer, you should be focused on creating, not on the tedious details involved in running a business or communicating with clients. That’s just not a good use of your time. A lot of this stuff can easily be automated with tools and templates.

…You’re Turning Down Business

In some cases, it’s the right thing to say “no” to prospective clients — like when they’re a bad fit or can’t afford your rates. However, there are other times when you desperately want to be able to say “yes”, but you don’t have the capacity for the job or you’re unable to cover the full scope of what they need.

This is where new tools come in handy. For instance, let’s say you’ve been approached by a ecommerce company that not only wants you to build a new store, but also needs it fully optimized for search (it’s not the first time this has happened either). Rather than turn something like that down, you may find that the addition of an SEO tool to your toolbox is all you need to be able to say “yes”.

…You Have Extra Room in Your Budget

Obviously, you don’t want to throw away money on a bunch of tools simply because a ton of people are talking about them. But you’ll eventually get to a point where the tools that served you well in the first year of business need to be replaced.

If you get to a point where you have extra time to experiment and there’s room in your budget for upgraded tools, go ahead and assess what you currently have and test out replacement solutions that will help you work better, faster, and smarter.

Look for New Business Opportunities If…

…You’re Not Doing Well

“Well” here is subjective. For instance:

  • If you’re not doing well financially, you probably need to look for more clients;
  • If you’re not doing well in terms of how you get along with clients, you should explore a niche that’s a better fit;
  • If you’re not happy with your job because burnout and stress have overtaken your life, then you might consider exploring other avenues of work.

When something has been amiss for awhile, the last thing you should do is lean into it and hope it gets better.

…The Web is Changing

Notice a trend here? Each of these changes (skills, tools, and now business opportunities) is often driven by the fact that the web is always changing. And as the web changes, you have to be ready to evolve.

In terms of business opportunities, what you’ll realistically need to do is look for new kinds of design work as technologies make your job obsolete. Take website builders like Wix or Shopify, for example. As business owners and entrepreneurs take it upon themselves to build their own websites, more and more web designers will need to find other kinds of clients and jobs to take on.

…You Want to Diversify Your Income

This is something many web designers are doing already as they’ve discovered how beneficial it is to have predictable recurring revenue streams.

But even if you’ve already found one way to diversify and stabilize your income (like by offering website maintenance services), you may become interested in exploring other opportunities along the way. If you have the capacity to pursue them, then go for it.

Is Change a Good Idea?

As you can see, change can be a very good thing for a web designer, their business, and their clients. However, there should be a very good reason for the change and you need to prepare yourself for how it’s going to impact what you’re doing now before implementing it. No amount of change can happen without some level of sacrifice.

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

After six months of uncertainty 2020 is finally beginning to find a style of its own. There are nods to Brutalism, a delightful blending of 80s pastels with 90s primaries, and the font style of choice is anything but geometric sans-serif.

In this month’s collection of the freshest sites from the past four weeks you’ll find tons of new portfolios, from big agencies to freelancers, and some amazing primal scream therapy. Enjoy!

Looks Like You Need Iceland

Looks Like You Need Iceland is an incredible site that asks you to record a scream, that they’ll broadcast for you into the wide open spaces of Iceland as therapy. And then perhaps you’ll visit Iceland for real. It’s brilliant marketing for the Iceland tourist board.

Riverlane

The abstract 3D animation on Riverlane’s site is a stunning introduction to a topic that’s hard to visualize. The rest of the site is equally well done, with great typography, slick brand assets, and a professional engaging tone.

Monokai

Wimer Hazenberg’s site features a simple pixelated text column. But scroll down the page and keep an eye on the awesome text dissolve effect, it transforms this simple design.

I Weigh Community

The I Weigh Community is a non-profit community activism initiative helmed by Jameela Jamil. It’s devoted to radical inclusivity, and it promotes its message on its site with striking graphics and bold, expressive typography.

WAKA WAKA

Waka Waka is a design studio specializing in wooden furniture. The noise effect and the mid-century typography evoke the radical design of 60 years ago. The random rotations on the thumbnail hovers are delightfully disruptive.

Dataveyes

Dataveyes is an information design studio that works with large datasets to give meaning to complex information. Its site features beautiful, full-screen animations that illustrate the type of information it specializes in.

Year & Day

Year & Day is an ecommerce site that sells ceramics, glassware, and other choice pieces of tableware. It’s a colorful collection that perfectly complements your food and the stunning site takes its cues from the collection.

Dunderville

Dunderville is a motion design studio with an impressive portfolio of animation and live action films. Its site features a tactile paper fold detail, and as you would expect, some superb text, and vector animations.

André Venâncio

It’s been months since we last saw a creative developer’s site with a liquid effect. André Venâncio revisits the idea with a cool oil bubble effect, hover over the thumbnails to see it.

Thomas Prior

It’s not all 60s revivalism, pastels, and cute animations. There will always be room for minimalism, and nothing suits this style as well as portfolios for photographers; Thomas Prior’s site is a prime example.

Serra

Serra’s site features a really beautiful high-contrast typeface that sits apart from the usual sans-serif. The product page is all colored product photography. It exudes luxury and distinction in a saturated marketplace.

VYBES

VYBES is a CBD drink made in LA. Its site evokes the Californian spirit with baby pink brand colors and sun-bleached photography. It’s a cool, and ever so slightly Brutalist look for what is essentially a health drink.

Karina Sirqueira

We love the simplicity of Karina Sirqueira’s portfolio. The desaturated rainbow leads to a simple slideshow of projects, and it’s refreshing to see a minimal site that uses bold serif-based typography. The content feels fresh and honest too.

Smalls

Smalls produces healthy food for cats. The site, is packed with adorable pictures of kitties, which if you’re a cat person, is guaranteed to draw you in. There’s a definite Brutalist style to the site, and lots of color too.

Wildist

There’s a clear aesthetic beginning to emerge in 2020, with pastels creating a soft background for desaturated primaries, and Wildist gets it exactly right with this youthful, site that features just enough animation to bring it to life.

Kristen Kwong

We’ve seen a lot of OS-style sites recently, but Kristen Kwong’s is one of the slickest. It manages to take a simple metaphor for interaction and transform it with a vintage color scheme.

Stojo

Continuing the Miami-meets-Brutalism trend this month is the site for Stojo, a collapsable cup and bottle. The pastel shades block out a disrupted grid, but for our money it works better on mobile. The vintage typeface is a nice touch.

Hoang Nguyen

Hoang Nguyen’s site features a surreal 3D scene with mountains, a spinning planet, floating islands, a waterfall, and a floating dragon-boy. Click around the site and the scene transforms.

SMTH / Sam Smith

Sam Smith’s portfolio has a cool magazine style to it, with a nice blocky background on the text and a personality packed animated avatar taking centre stage.

Then I Met You

Then I met You is a site promoting a range of skincare products. In this case, the usual pastel colors are replaced with an 80s-style gradient. Watch the products as you scroll, the lighting changes creating an awesome, subtle 3D effect.

Source


Source de l’article sur Webdesignerdepot