Categories
best web sites Community & Inspiration design ideas design inspiration fresh web designs web design ideas web sites

20 Freshest Web Designs, August 2020

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…

Read the rest 20 Freshest Web Designs, August 2020

Read at the original Source: Web Designer Depot.

Categories
Blue Fountain Media Community & Inspiration Empire State Building Empire State Building Website NYC design Tatyana Khamdamova

Interview: Redesigning the Empire State Building’s Website

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,…

Read the rest Interview: Redesigning the Empire State Building’s Website

Read at the original Source: Web Designer Depot.

Categories
Community & Inspiration design ideas design inspiration design trends typography trends web design inspiration

3 Essential Design Trends, August 2020

Do the lazy days have you longing for a new design technique to try? You are in luck. This month’s collection of essential design trends is packed with functional ideas to spruce up design projects. And all of them are fairly easy to accomplish and will give your project a modern – or intentionally old-school – look. Here’s what’s trending in design this month: Angles There are so many ways to add and use funky angles in design projects. An angle with a color-block can be a great way to help add a place for a text element on top of an image or video to help ensure readability. Use a color for the angled element that contrasts with the background and text overlay for a striking visual or use a color that matches the background for a more subtle feel. Another bonus for using angles in the design is that they can help create a distinct eye-tacking pattern from one part of the screen to another to help create visual focus. On a smaller, more vertical screen (such as a mobile device), large angles can even serve a pseudo-split screen purpose and create a way for text and other elements to stack in more vertical orientations. Angles can come in all different degrees and sizes. There aren’t a lot of rules with how to use them. The common factor is that they make the design easier to understand. Alternatively, angles can be an independent design element that really has nothing to do with function or adding a text layer. That’s exactly what Aviaja Dance does with their design. The main use of angles comes from the fun “A” in the logo. It’s the main visual on the homepage above the scroll and is rotated in other locations throughout the design. The next two examples use color-blocked angles. Dantia uses a small blue angle in the top corner to anchor the logo against video that uses a lot of different colors. This way the logo is always visible. Small triangles are used as bullets throughout the design to further emphasize this shape. Adige Design uses a large angle in a color that almost fades into the background to almost split the screen in half – part text, part visuals. This is a popular and effective use of an angle to enhance readability and add visual finesse. Overprint Effects While overprinting…

Read the rest 3 Essential Design Trends, August 2020

Read at the original Source: Web Designer Depot.

Categories
Community & Inspiration diversity in tech diversity in web design ethnic minorities who code girls who code women who code

Diversity Initiatives in Web Design

Web developers have been the bedrock of any company’s business strategy for some time, and the industry is continuing to thrive and grow at a rapid pace. This is why it’s surprising that it is so lacklustre when it comes to diversity.

A recent study revealed 80% of those in the design industry are male, and more specifically 79% within the field of web design. According to WISE, just 23% of the people working in STEM roles (Science, Technology, Engineering and Maths) are female and women currently account for just 15.8% of the UK’s current generation of engineering and technology graduates.

Why the Lack of Diversity in Web Design?

The main reason for this, as cited by the Organisation for Economic Co-operation and Development (OECD) found that women still lack the confidence to pursue these careers, despite their school results being as good as (or better) than their male counterparts. Research has found that the professional and technical services sector has the fourth-highest gender pay gap of all UK industries. If more women were to join these higher-paid sectors it could help reduce the gender pay gap as a whole, as well as help female economic empowerment.

This division is seen in ethnic minority groups too. The numbers for BAME (Black, Asian, Minority Ethnic) employees in the British tech industry are unknown but is estimated by the British Computer Society to be at 1-2%, a ridiculously low number in this day and age. This is why groups and organisations are cropping up designed to promote an industry that reflects all of society rather than one part of it. Here are some of the organisations to pay attention to who are bridging the diversity gaps in web design.

Girls Who Code

Girls Who Code are working to create opportunities for women within tech, aiming to deepen their computer science skills and confidence. They run a range of programs designed to equip women with the necessary computing skills to pursue opportunities in the field and to give chances that are often shunned due to society. Founder Saujani states that women are socialized to seek perfection, and this is something that needs to be overcome. One way to break that mentality at an early age, she says, is coding:

[Girls] walk into these classrooms and they feel like they will never be good at it, and when they learn how to create something, whether it’s a website or app, it changes their mindset and they stop giving up

Adobe Design Circle

Adobe Design Circle is another initiative aiming to introduce all members of society to design. They want to create more visibility for design as a viable career path for anyone that might be considering it, and to help with youth entering the field. This is opening the opportunities of working in tech and web to aspiring designers at a young age who aren’t necessarily yet conditioned by the pressures of society and showing them it can be a realistic career path.

They have their own scholarships and mentoring initiative to support these goals too. The faces behind the team of Adobe Design Circle range through multiple ethnicities and have a fairly even male-female divide. This equal representation alone is inspiring. One of Adobe’s core missions is to offer youth the opportunity to learn and express themselves through creativity and technology, regardless of their economic or cultural backgrounds. With this they specifically encourage applicants of all backgrounds to apply and offer many other opportunities from mentoring to internships.

Ladies that UX

Ladies that UX are a collaborative community of women in UX aiming to “support each other, push the UX boundaries and promote female skill and talent.” It is a European-based initiative where each city involved runs slightly different events and groups decide together what they would like to get from their meetups. They assist each other with UX challenges, discuss topics, and brainstorm ideas. Ladies that UX was created in 2013 by Georgie Bottomley and Lizzie Dyson with the aim of bringing together women in the industry, offering support and creating connections around the world.

Xuntos

Xuntos is aiming to create the largest community of ambitious and talented individuals from under-represented groups in the technology industry. It works to nurture university students and recent graduates that are often overlooked in the tech industry by the means of educational workshops, university hubs, events and an active community. The very name “Xuntos” is a Galician word which means “together” and this is their most important factor. They want people to realise they are not alone and just because the representation isn’t there, doesn’t mean their capabilities aren’t.

Colorintech

Colorintech is a non-profit organisation that was founded in 2016. It aims to close the gap and shorten the learning curve, with a strong community designed to help each other. The company was founded by Silicon Valley tech executive Dion McKenzie and ex-Googler Ashleigh Ainsley after they became frustrated at the few black individuals in the field. Since its inception 30,000 students, professionals, volunteers and tech companies have been impacted by their work, and over 450 minorities graduated from their programs in 2019 alone.

UKBlackTech

UKBlackTech are on a mission to create the most diverse tech sector in the world. Their aim is to encourage more ethnic minorities to enter the UK’s technology workforce and make an impact. To help with this, they design and implement different initiatives to help them get employed and retain employment, put on bespoke events that target aspects such as specific job roles or tech topics and promote different opportunities for members to apply to.

Witty Careers

Witty Careers was created with the aim to support women from black and ethnic minority backgrounds in the UK and equip them with the skills to build a career in the tech industry. They run different practical skills workshops and events which in the past have included visits to a Microsoft store, Uber, and Pivotal. They open doors for communications, networking and future career prospects for those in the minority. They also have a handy range of resources designed to help you get into the career you want. From CV writing advice to industry insights, they are all free of charge.

 

Featured image via Unsplash.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Source: Web Designer Depot

Categories
Community & Inspiration design ideas design trends modern web design text highlighting web design trends

3 Essential Design Trends, July 2020

The biggest trend we’re talking about this month started at WWDC as Apple provided a glimpse of what’s coming next for their operating systems. This time around there’s a distinct design element. Did you catch it?

Here’s what’s trending in design this month.

1. Text Highlights and Underlines

There’s always been an unwritten rule in website design that text uses more plain styles. Bold is acceptable, italics are OK from time to time, but underlining is seldom used.

This design trend bucks that concept with text elements that use highlighter or underline elements to emphasize key words. And it works rather nicely.

What it takes to make this work is plenty of contrast and a design style that fits with underline or highlighted elements.

This design trend works thanks to clear intention. The words are obviously important to the overall meaning of the design or what visitors should take away from the content.

Pepper It uses a nifty underline that the letters seem to rest inside of to highlight a key phrase. The shape and color also mimic that of the larger button below, helping the eyes move from one element to the next. It’s an effective use of an underline (or maybe you could call it a highlight) effect in conjunction with brand colors.

Zappos Kids uses a fun highlight in a colorful scheme to highlight a key text element. It almost looks like a button and helps website visitors understand that the entire hero image area is clickable. The highlight serves to make the text more readable and the interactive element more functional.

Zeus Jones uses a variety of text treatments on the homepage, but arguable the underline is most noticeable, likely because it is the most unfamiliar in the context of website design.

2. Distinct Geometry

Geometric shapes in website design have popped up as trending elements in a variety of forms. This iteration is pretty simple: Use of distinct geometry as part of the overall aesthetic.

Geometry might pair with illustrations, photos, text, or in the background or foreground. What’s great about shapes is that they are versatile and work with a lot of other design patterns.

What can be the most challenging about shapes and design is that distinct geometry requires some space and thought. Just tossing a few triangles or rectangles in a design without reason can look rather strange.

So how can you add geometric shapes to a design so that they look intentional? These examples do it well (and in three different ways).

Rui Ma uses square and rectangular containers in a modular grid with portfolio projects inside each. This is one of the most common and applicable uses of geometry – as a container element. What makes it stand out is the circle, smiley wheel (also a geometric shape) that never leaves the center of the screen. The black background for the grid is also a nice contrast element for content blocks.

Thompson Stenning uses shapes in the background and with illustrations to create a stunning homepage visual. It’s big and bold and has just enough going on that you want to look at it and figure out the scene. Maybe what’s most intriguing about the visual concept is that it uses lots of geometric shapes – rectangles, squares, triangles, ad circles – whereas most projects pick one shape to focus on.

Romain Penchenat uses three-dimensional style angles to draw you into the portfolio website. They use a simple animation that “floats” on the homepage and follows the scroll with other geometric elements.

3. Shadow and Gradient Icons

Did you notice all the gradients and subtle shadows in icons in the images previewing iOS 14 or were you just looking at other changes (such as widgets) on the iPhone screen?

We’ve been seeing more designers incorporating more shadows and depth into icons for a while, but this move by a major player in design will push it to the forefront fast. Each of the icons moves from a flat style to one with a background gradient color as well as more shadows within icon elements for depth.

Don’t worry, the design still looks very much like Apple, but is a little more reminiscent of the skeuomorphism style icons from earlier versions of iOS.

It’s nice that the color and shadow elements are contained within each icon. This creates more visual interest and depth for each element without getting cluttered or junky. The gradients are also super simple, using a darker version of the main color in a monotone element.

It’s an iconography style that others are already using. DG Studio has a collection of icons on its homepage with subtle gradients and shadowing in the designs. Again, what’s nice about this trend is that it adds depth to visuals without tricks that get in the way of visual comprehension.

Guillaume Gouessan uses gradients in image icons in much the same way as the previous examples but with a little more color variation. Here, you can see what the gradient looks like when using a color change that’s not super drastic, but more dramatic than a monotone option. You can find some use of the more monotone gradient on his site below the scroll in the large desk image. (It’s definitely worth a few clicks to check it out.)

Love it or hate it, gradients and shadows seem to be here to stay for a while.

Conclusion

How often do you find yourself looking to major brands and companies for design inspiration? While a lot of web design trends start as experiments with smaller sites, the big players can really shape what gets popular (or not).

The example of Apple moving to icons with more shadows and gradients is a prime example. We’ve been seeing more of these elements creeping in for a while, but this style is about to get very big again.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Source: Web Designer Depot

Categories
best designers best web design agencies best web designs best web sites Community & Inspiration design inspiration web design inspiration

20 Freshest Web Designs, September 2019

20 Freshest Web Designs, September 2019




This month, there’s tons of color, and some elegant transitions. Video is huge this month, with a number of sites opting for video front and center. You’ll also find some delightful animated illustration. Enjoy! Bon Iver Visualizer This impressive site, built with Spotify data, visualizes all of the people currently streaming Bon Iver music, including key details of their location like elevation, and weather conditions. It’s a fascinating attempt to make streamed music a collective experience. Jia Szeto Paris-based stylist Jia Szeto’s portfolio site is a joy to browse through, with colorful frames that bring out the best in the photography, and stylish transitions that move you from one project to the next. It’s deceptively simple, and very high-class. Headless Horse Headless Horse presents a…


Read the rest of the post 20 Freshest Web Designs, September 2019

Categories
best designers best portfolios best web design Community & Inspiration design inspiration fresh new portfolios portfolio inspiration

20 Best New Portfolios, September 2019

20 Best New Portfolios, September 2019




Every month we roundup the best portfolios launched by agencies, freelance designers, and other creative professionals, into one easy-to-digest collection. And now we come to September. The kids are off to school (the poor dears), the teachers are off to school (the poor dears), and you’re free to spend some time thinking about the most important holiday of the year. You’ve got to get ready for it emotionally, spiritually, and financially. That’s right, I’m talking about Halloween. But before you get the pumpkin spice out of the cupboard, why not have a look at these fancy new portfolios? Enjoy.…


Read the rest of the post over at: 20 Best New Portfolios, September 2019

Categories
Community & Inspiration design trends style trends web design inspiration web design trends web fashions

3 Essential Design Trends, September 2019

3 Essential Design Trends, September 2019




This month’s collection of design trends focuses on a bit of a slow burn – design techniques that appeal to millennials (maybe) and Generation Z. Gen-Zers are those born between 1997 and 2012, meaning part of this generation is in grade school. This generation is impacting design trends already because they are the most digital savvy generation yet. And they start using digital tools at even younger ages, making it no surprise that they have a significant influence on website design. Here’s what’s trending in design this month. 1. Youthful Appeal Content and design with a more youthful appeal…


Read the rest of the post over at: 3 Essential Design Trends, September 2019