Friday, 27 April 2018

The New Logo For Trivago Is Not the Public’s Favorite

Trivago recently came out with a new logo that’s a bold approach towards re-branding the entire company. The original logo was simply their name, spelled out, and highlighted in three different colors. Now, we have this ring symbolized right in front of the now mono-colored name. This new design, however, does not replace the iconic tri-color Trivago logo that we’re used to seeing. The new ring style logo will only be used for corporate.

Who knows what the point of this was, or what the intentions of the design team were. It seems to me that they’re going for this sort of three-dimensional logo. it helps identify the company in more than one way. Personally, I really like the way the colors blend together. Other than the fact that it’s clearly a ring, the way the colors come together in such an abstract way is sort of calming. And God knows we all need a little comfort when spending a ton of money on hotels that we won’t even get to spend much time in anyways.


They also took the same new logo and simplified it a little. Instead of the vibrant colors in the ring, they’ve made the lettering all white and added an orange background. I would assume that we’ll see many variations of this logo according to what market it’s in, but only time will tell. I mean, it would make sense to use a blue or something a little less violent than orange for someone shopping for a hotel room in the Bahamas. That being said, it’s a little bit more of a minimalist, modern view for the new design. Which, is refreshing for any company.


A lot of critics aren’t huge fans of the new look. Some people are calling it a bold move, but the visual affect just isn’t there. What do you think?

Don’t forget to visit Webdesignledger daily to stay in-tune with your design needs.

Read More at The New Logo For Trivago Is Not the Public’s Favorite

from Web Design Ledger

Wednesday, 25 April 2018

Best Database Design & DB Engine Books For Web Developers

best database books

Understanding database design is no easy task. It requires a deeper knowledge of the SQL language along with how to structure data. Thankfully some very smart programmers have written countless books on this topic to help beginners dive into database management for websites. I’ve curated the best picks here in this list and they range […]

The post Best Database Design & DB Engine Books For Web Developers appeared first on Vandelay Design.

from Vandelay Design

Tuesday, 24 April 2018

8 Excellent Design Resources for Your Creative Projects

Creativity is an untamed beast. It’s possible to have them in spades one way where endless ideas seem to flow out of your head. There are days when your mind like an empty well that’s run out of inspired ideas.

As designers, you have the responsibility of sustaining creativity at all times. What seems like a simple task for you can be daunting later on especially when the demand for unique design ideas remains high.

Therefore, you need to keep your creativity on your toes at all times. You need to find a way to find inspiration and creativity even if both seem impossible.

Below are excellent design resources to help keep your creativity high and provide high-quality work for your client sites or your own.

1. Co.Design

1 - CoDesign

Owned by Fast Company, Co.Design combines the best that business and design has to offer. The result is an irresistible publication about UI & UX, product design, architecture, and the like.

Co.Design also hosts the annual Innovation by Design Awards that showcase the best talents in the industry that provide innovative solutions to business problems. The handpicked jury will judge all entries according to different criteria for 15 categories.

2. Visual Journalism

2 - Visual Journalism

Visual Journalism pushes the boundaries of how to share and communicate information without outright saying it. As the name suggests, it discusses infographic news and think-tank pieces that encourage designers to take a more analytical approach to design and content.

The publication extensively covers the Malofiej Awards which is an award-giving body for infographic creators. Visual Journalist didn’t pull back punches when it comes to its opinion pieces where it criticized the 2013 gold winner about gun control.


3 - PSFK

To narrow down PSFK as a site about design ideas is insufficient. In a broader sense, the business intelligence platform helps creative professionals foster ideas and critical thinking in industries such as AI, product experience, augmented reality, and more.

PSFK offers two types of membershipPurple and Premium. The former gives you access to the latest and exclusive newsletters and content from the site. It also lets you buy their research reports as you go. The latter includes everything in the Purple membership in addition to instant access to the site’s analysts and researchers as well as workshops and conferences.

4. Hipsthetic

4 - Hipsthetic

If you’re undertaking a creative project and are in need of resources and freebies, then Hipsthetic is for you! The blog is chockful of design resources such as freebies for digital art, fashion, design, photography, and others. For instance, if you’re looking for design elements for a website or digital artwork you’re creating, you can download its free paper texture pack.

Other freebies offered by Hipstetic include fonts, mockups, wallpapers, templates, and more.

5. Creative Bloq

5- Creative Bloq

If you’re a designer or a graphic artist, then you should be very familiar with Creative Bloq. It is your one-stop shop for all things design and digital art. It covers a wide variety of topics related to creativity such as illustration, art, web design, 3D, and more. There are different types of content to read from the blog for free as well. You can browse from its hundreds of how-to tutorials, reviews of design-related products and software, and a lot more.

To help connect creatives from all over the world, Creative Bloq holds different events and conferences over the years such as Vertex (for 3D artists) and Generate (for web designers), to name a couple. The commitment of Creative Bloq to help people launch successful design career shows through these events.

6. 99U

6 - 99U

Similar to Creative Bloq, 99U is a great source of information for all levels of professional designers. Aside from the usual articles, the blog serves up a series of interviews with accomplished designers to help inspire you. It also features empowering videos about design delivered by main stage speakers from their 99U Conference which everybody can join and attend.

The Career section of 99U helps prepare people towards a sustainable and profitable career as designers. It has resources on how to get noticed by your target employees and hired by then, as well as get paid on time.

7. Trend Hunter

7 - Trend Hunter

Creativity is ever-present in innovation. It doesn’t matter which industry you belong to – it is impossible not to fawn over products that push the boundaries of imagination and reality. Not to mention, the creativity that oozes from new products trickle down into the consciousness of others, which in turn help flow their creative juices.

Trend Hunter subscribes to this ethos by featuring innovative products from different industries and markets. Whether you’re into beauty, luxury, fashion, and tech, to name a few, the products will pique your interest and help grind your creative gears.

Aside from the products, Trend Hunter offers free assessment aimed to help you understand better what your innovation archetype is. The assessment also includes personal recommendations that help you realize your potential faster.

8. H&Co

8 - Typography

There is inherent beauty in texts. People are accommodated to the written word as a conveyor of messages and ideas. However, looking at the bigger picture like the type designers from Hoefler & Co., texts can communicate beauty in itself.

The typography blog tackles issues that type designers face and ideas on how to share how texts are more than just words. From the blog, you can also get premium fonts for your projects to dazzle your clients and wow your audience with words.

Conclusion: design is everywhere

Judging from the sites featured above, it is safe to say that you can find inspiration even in places where you least expect it. Even for non-design websites from above, you can generate ideas for your upcoming projects. You can’t help but be inspired by the infectious creativity that shines through each site.

As long as you keep your mind open to new possibilities, you can productively channel your creativity with the help of these available resources.

Related posts:

How to Design Creative Websites – 22 Great Examples

Beautiful and Simple Logo Design Ideas for Your Inspiration

The post 8 Excellent Design Resources for Your Creative Projects appeared first on SpyreStudios.

from SpyreStudios

Monday, 23 April 2018

Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after

CSS wasn’t always as flexible as it is today. By using CSS pseudo-elements and pseudo-classes, designers can target elements based on their dynamic states or positioning in relation to other elements.

Pseudo-Elements and Pseudo-Classes

There are two types of pseudo selectors: pseudo-elements and pseudo-classes. Either of these pseudo selectors is intended to select objects for styling based not on their name or attributes but their current conditions. Consider a:visited as a canonical example. This pseudo-class selects all links that have already been visited, but that state changes over time. More links get visited as the users spends more time on the page. The pseud0-class’s selection grows dynamically in response to user actions.

In modern practice, the difference between pseudo-elements and pseudo-classes isn’t obvious. Classes are based on an objects state, while elements are based on the objects position. Classes should be prefaced with a double colon (::) while elements get a single colon. It’s also possible to use a single colon for everything which is also supported by CSS 2. There are also far fewer pseudo-elements compared to pseudo-classes.

Standard Pseudo-elements

The standard pseudo-elements are as follows. Click each to learn more about its functionality:

Standard Pseudo-classes

The standard pseudo-classes are as follows. Click each to learn more about its functionality:

Our Favorite Examples

Using pseudo-elements and pseudo-classes, we can create some interesting styles with CSS. Here are some of our favorite examples.

Placing Content with ::after and ::before

After and before are used most effectively to place and generate content. With a snippet of CSS, you can place elements either after or before your selected object. Then, style and place the element to achieve the appropriate effect. It can be used to add contextual icons to text, print HTML next to links in your printing style sheet, or cleverly get around other styling problems. You can also style list numbers or create styled tool tips.

As example, consider placing text delimiters between navigation list elements:

.nav li:after {
  content: " * ";
  position: relative;
  top: 2px;
  left: -1px;

Creating Drop Caps with ::first-letter and :first-of-type

To produce interesting text styling effects, you can use the ::first-letter pseudo-element to select the first letter in a given element. But you don’t want that to apply to every instance of a paragraph in your text. You could apply a special class to your drop cap paragraph, but that’s hardly semantic and also annoying to code. Use :first-of-type to target only the first paragraph element on the page, ensuring your drop caps only appear in the first paragraph

p:first-of-type::first-letter {font-size: 1.5em;}

Styling Lists with :nth-child()

pseudo-element nth-child

The nth-child selector is extremely flexible, capable of selecting an arbitrary number of child elements and following user-defined patterns. The selector takes a formula within its parentheses, allowing for an extremely specific method of determination. It follows the format (an+b) which isn’t as cryptic as it appears at first.

  • a is a multiplier, multiplying the value of n by its own value.
  • n counts up from zero. The first child element has an n of 1, the second has an n of 2, the third has an n of 3 and so on.
  • b is an integer that adds to or subtracts from the result of the an multiplication.

Alternatively, the specifications odd and even can be used in place of an+b to select odd and even children of the parent element.

For example, :nth-child(2n) will select every even element. :nth-child(2n+1) will select odd elements, and :nth-child(3n) will select every third child element. Specifications can also be made directly: :nth-child(4) will select the fourth child element.


To learn more about pseudo-elements and pseudo-classes, visit Mozilla Developer Network’s robust list.

Coding Buttons in CSS

How to Change Default Text Wrapping with HTML and CSS

3 Features Every CSS Navigation Menu Must Have


The post Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after appeared first on SpyreStudios.

from SpyreStudios

Friday, 20 April 2018

The Colorful World of Marta Cerda Alimbau DOTW#4

Marta Cerda Alimbau is that type of designer whose work is appreciated not only by the expert eye but also by the uninitiated people who simply stumble upon her work. You’ll find yourself scrolling through her pieces of work, trying to understand hidden messages and genius ideas. The talented designer combines personal fonts, complex shapes, and vivid colors in a way that lets you recognize her work from afar. This is why we believe that Marta Cerda Alimbau deserves a place in our Designer of The Week Series. Without further ado, we invite you to get to know Marta better by reading our interview with her.

WebDesignLeger: Tell us about you (a short bio).
I am an Amsterdam based independent artist, type designer, illustrator and art director. At the end of 2008, after working in agencies and studios between Barcelona, Düsseldorf, and Munich, I won the ADC Young Guns and decided to found my own studio. Since then, I work for arts, culture and advertising clients abroad, and my main body of work is focussed on the boundaries between typography and illustration. I also lecture about design at creative conferences and universities internationally.

WebDesignLeger: How would you describe yourself in 3 words?
Marta Cerda Alimbau: Expressive, awkward, persistent.

WebDesignLeger: When did you discover your passion for design?
Marta Cerda Alimbau: Well, this is something that came little by little, at least in my case. Since I was a kid that I could isolate myself by drawing. Hours went by so quickly and it allowed me to express things I couldn’t say. Now it’s different, but the final effect on me is kind of similar.

WebDesignLeger: Where does your inspiration come from?
Marta Cerda Alimbau: Depending on when my inspirations are organic and change with time. But I usually look backward at the history of design for inspiration.

WebDesignLeger: What do you think are the most important 3 skills for a designer?
Marta Cerda Alimbau: I think it’s more about the attitude than the skills. The skills, you can learn them with patience. The attitude is something deeper, and harder to change. So for me, the three more important attitudes are being curious, hard worker and perseverant. All these mixed with a good eye for the type and art direction. the

WebDesignLeger: How do you stay updated with what is new in the design world?
Marta Cerda Alimbau: Instagram is now for me the best source to know what’s going on right now.

WebDesignLeger: Who are your favorite 3 designers?
Marta Cerda Alimbau: Herb Lubalin, Takenobu Igarashi, and Roger Excoffon.

WebDesignLeger: What kind of people do you love to work with? 
Marta Cerda Alimbau: I love to work with great art directors and to team up with them, it’s the best way to learn and move forward. They give good references but also give room to develop yourself, and have a good knowledge of the direction their client needs to take.

WebDesignLeger: How do you handle stress and pressure?
Marta Cerda Alimbau: I start working really early in the morning, around 6 am. There’s silence and I can focus a lot. And I can look at my day with no rush. Also, I don’t accept new projects if I am not sure I will be able to give them my 100%.

Marta has worked with many influential brands, fact that made her name notorious among the important contemporaneous designers. If you’d like to contact her or to check more of her amazing work, make sure you follow Marta on Facebook, Twitter, Instagram, Pinterest, Youtube, and Behance.

Make sure you stay updated with our DOTW series and latest posts by visiting our blog daily.



Read More at The Colorful World of Marta Cerda Alimbau DOTW#4

from Web Design Ledger

Thursday, 19 April 2018

Tips For Using Images in Web Design: 20 Examples

Web designers know that images can have a huge impact on viewer experience.  An attractive image, placed on a well-designed site, can engage your users and send out a message. 

How do you find the best images for our site?  How do you use your images to the very best effect?

When creating a website, you’ll put a lot of energy into creating a user interface which is intuitive and easy to use.  You will focus on creating a good structure, on using great fonts for headlines and for the copy, on using great color combinations but, most importantly, on your site images.

Your UX will ensure that your site responds when your viewers take action.  There will be so much thought going into your site that neglecting imagery and or using overdone visual metaphors will reduce the effectiveness of your site.

If you want to think outside of the box, here are some tips for adding striking images to your web design project:

What do users look for when adding images to a site?


When your user sees images on your site, you’d like that image to communicate a message.  As a result, you need the image to be relevant. 

Your user would like to engage with the image and the message you are sending out, so if that image is irrelevant, it feels incoherent. 

Your viewer would rather have a webpage that doesn’t include images than one which feels chaotic.

Image Quality

Focus on the image itself:  ask yourself is the image good quality, does the size or composition work with your site and does the exposure assist you with creating contrast?  These factors will make a huge difference in adding harmony or chaos to your site.


When you add an image to your site, consider whether it will add excitement or interest.  If it does, then your image works.  If it does work, it will have the following characteristics:

  1. Your image has emotional appeal.  It makes the viewer want to use a product or service.
  2. Rational appeal.  The image shows the benefit of using this brand or product.
  3. Brand appeal.  The image suits the message conveyed by your brand.  This could be about relationships, creativity, power or even ethics.
  4. Transmitted message.  An image communicates with your viewers, sending them a message or meaning.  A helpful image sends the message you want your viewer to receive.
  5. User response can be hard to work out of assessing but means that your image will help your viewer make the choice to use your product or place it on their wish list.

That human touch

Our brains tend to focus only on information which is seen to be relevant, filtering out anything we believe to be superfluous. 

Photos of people or products are seen to be important, and our brains will focus on them and assess them. 

If you have a website or blog, your viewer will pay more attention to a photograph of a person than a cartoon sketch.  A person who communicates with them is seen to be trustworthy or reliable.

If you are designing a business, showing the people behind the brand often gives a human touch.  This prevents your company from being a faceless entity. 

A good photographer who can add a personal touch will be more valuable than stock image photographs when adding images to your site.

Studies which use eye tracking to monitor engagement show that the more detail you have in an image, the more your user will engage with it. 

This will bring you better results.  Although a fairly standard image of a product might be fine, it is the detailed image of a product in a setting which will engage your user.


With digital screens increasingly improving in quality, a stellar image on your landing page will create a massive impact on viewer experience.

Your landing page image is crucial as it is your chance to get your users to emotionally resonate with your brand.  Look for an image with relevance. 

If you can’t get an image custom-made for your brand, create an excellent outline of what you’re looking for.  From here, a stock photo will give you an excellent result.

When looking for a stock photo, delve beyond the surface to find a unique product.  Anything overused or too generic will reduce user engagement and make your site seem less authentic.


Once you’ve selected your images look at cropping.  This will help you to focus your user’s attention on important aspects of an image.  When cropping your image, plan your image around different screen sizes. 

Your image might be viewed on a notebook, tablet or mobile phone.  Adjust your image so that you keep the focus you want on a variety of devices.

Boosting your site’s conversion rate using images

Emotional Impact

The majority of people make purchases for emotional reasons.  We purchase because we believe a product resonates with who we are or would like to be. 

When choosing images for your site, search for an image which evokes a positive emotion.  Your image could use humor, bring delight or create the feeling of power.  Emotions are powerful, and they create a massive impact.

When you are searching for imagery, don’t use stereotypes or cliché.  Your viewers will feel as though these messages are inauthentic and see through them. 

Instead, make them feel happy, good about themselves, proud or wanted.  This will help them to connect with you.

When you evoke emotions, focus on creating warmth or belonging.  This will keep your viewers coming back.


Although viewers do identify with a human face, a mascot is often a playful way to engage your viewers. 

We can relate to them because they are bubbly and full of personality.  These days mascots are a popular choice for many websites. 

They form part of a brand and because they are larger than life, they keep the message of the brand alive in viewers’ minds.

If you are looking for a mascot, there are many creative designers who will assist you.  Let them know the personality behind the image.  You’ll bring our site to life.


There are so many new ideas which will help you bring your images alive.  Your imagination is unlimited when you set it free to roam. 

With the digital tools available to bring your ideas to life, there is a whole new range of possibilities to choose from.  Create something new for your website.  This will help it to stand out.

Validate your product

TV commercials make a lot of noise and have a huge impact.  They show people feeling overjoyed because they can eat cornflakes in the morning or greeted with flowers while walking to work. 

People praise products and show how they bring such benefit that it would be horrible to be without them. 

Why does this work?  Customers are seeing the product endorsed.  This convinces them that a product offers value. 

When customers are selecting a product, they want to know they are making the right choice.  When they know that others are happy with a product, it increases their confidence. 

When your website offers images of happy customers, you will increase your conversion rate.  You could add testimonials from past clients along with their photographs and your site will automatically appeal to new customers.

Make it about THEM

When you are searching for images for your site, make it about your viewers and their needs.  Your client doesn’t care about your company, only about how a product will make them feel. 

Branding offers an emotional resonance which goes beyond the product itself.  Your goal is to make your clients feel powerful, ethical, intellectual or creative.  Once you’ve done this, you’ll create magic. 

Use branding to show your visitors that they will find what they are looking for when using your product.  Nike’s adverts always show images of an athlete showing mastery over a game. 

The shoes are not the athlete but the message works.  Show your visitors they can achieve the results they want.  Make them feel comfortable that this is the product for them.

Use imagery to help them transcend their day to day lives, and you’ll open doors to commitment.


This can’t be said often enough.  We live in a digital world, where highly educated clients use the internet as a part of their daily lives.

Customers are very familiar with different websites and they learn to assess the quality of those sites and the images they use. 

They become familiar with overused photos and generic images, and they pay no attention.  Instead of cutting back on quality, it is worth spending time delving into a unique photo which will convey your image perfectly.  It’s worth paying for quality.

In order to convert customers, your site needs to sell.  Bad stock photos won’t have the impact you need to get your viewers to become clients. 

Your aim should be to create resonance with your audience.  Spending time on finding unique and effective photos is crucial in order to achieve this.


Taking the time to select images which will create interest and impact is crucial to the success of your website. 

This is particularly important when you want your viewers to convert into clients.  Generic images will feel irrelevant and your viewers will disengage or ignore them.

However, if you are able to find a bold and effective image which can add to your site’s composition, the result will be magic.

Showcase of images in web design

Timothy Achumba



Death Wish Coffee





Polaroid Originals

Ryan Brant


The post Tips For Using Images in Web Design: 20 Examples appeared first on SpyreStudios.

from SpyreStudios