5-tips-on-making-your-website-content-reflect-your-brand-identity

Coca Cola, Apple, Tesla, IKEA. These four companies all operate in different industries. One is in the soft drinks industry, another in the tech, third makes electric cars and fourth sells read-to-assemble furniture. 

So why are we talking about these four companies in the same sentence if they are so different? Because, despite all their differences, they still have one thing in common that connects them.

They all have a clear and unmistakable brand identity. 

There’s almost no person in the world today who hasn’t at least heard of these four companies, or even bought something from them. When people think of refreshments, they grab Coca Cola; when they want a new computer, they buy Apple and when they need new furniture, they buy and assemble IKEA.

People don’t simply buy their products for taste, quality or design, although they certainly don’t lack these. They buy their brand.

Of course, these four were quite easy examples of brands. But what of the millions of other companies that are trying to develop a brand identity for themselves? For instance, how can you showcase your brand identity on your website?

Well, this article will give you some tips on how to create website content that reflects your brand identity.

What is Brand Identity and Why it’s Not the Same as Brand or Branding?

Before we get into how you can make website content that reflects your brand identity, it’s important to understand what brand identity is in the first place.

Fortunately, for something like this, we don’t have to look very far and a simple Google search reveals the answer we are looking for. 

For instance, Crowdspring defines brand identity as “everything visual about a brand, including color, design and a brand’s logo”. In other words, what the customer can see.

Although “brand identity” often gets mixed up with “brand” and sometimes “branding”, these three terms are different. 

The brand reflects the name, design, symbol, logo or some other feature that differentiates one company or seller from another in the minds of their customers and prospective customers.

Branding, on the other hand, is a process of creating a brand. This includes what the customer can see (logo, visual design, name…) and what they can’t see (loyalty, awareness…).

How to Create Content that Reflects Your Brand Identity

With that out of the way, let’s take a look at how you can create website content that will echo your brand identity.

1. Understand how your brand stands out from the rest

This is perhaps a no-brainer, but it’s still crucial to understand how exactly does your brand differs from its competitors. What is your unique selling point and why do customers trust your brand?

This is often difficult to do with content, as it’s very easy to fall into the trap of making generic content. However, while it may be easier to just churn out content like everyone else, keep in mind that for 80% of people, the “authenticity” of content is the main deciding factor in following a brand.

2. Can you identify the company from its content?

Every time you create content for your company, I want you to do a simple text. Remove any visual characteristics that can be used to identify the brand, like logo or name and leaving just the bare content, ask yourself: can you identify the company from its content?

Visuals are still important for separating brand A from brand B, but it’s easy to become too dependent on them and neglect the content you write itself.

If you or another person consuming that content can’t tell it from the competitor’s website, start again.

3. Connect with your audience

Brand identity doesn’t happen without an audience to follow that brand. That is why your focus should always be on connecting with your audience.

You need to deliver content that your target audience finds informative and useful and you need to be consistent with it. It doesn’t help your brand identity much if you do this from time to time.

If you deliver content periodically every month, it will be much harder for the audience to connect with you. However, that doesn’t mean becoming a content production factory either. You also need to put serious thought and plan your content that the audience will want to engage with.

4. Use different types of content

Website content isn’t just articles and blog posts. It’s not enough to just write a 1,000-word blog post every week and call it a day. 

Content comes in many forms, and text is just one of them. For instance, perhaps your message would be better served to your customers as a short 1-2 minute animation, or a 10-minute video, or perhaps an infographic?

While the text is often easiest to make, you shouldn’t ignore other content formats either.

5. Use social media wisely

While not directly on your website, content that you create or share on social media should work together with your website content to reflect your brand identity.

Of course, you need to be strategic with social networking as well. Although there are plenty of social media platforms out there, ask yourself this: “does this work for my brand?”. Is this somewhere where your audience hangs out?

Social platforms will often have quite different audiences and trying to cover them all is not only difficult but can also dilute your message.

The same goes for timing. Finding out where your audience hangs out is only the first step. To engage with them, you also need to be there when they are as well. If you’re not there when your customers and prospects need you, you are missing a big opportunity to engage with them.

Conclusion

Producing content that displays your brand identity clearly and concisely is very important. However, as you can see from thousands of online examples, it is also difficult to do. 

The most important thing from the consumer’s perspective, however, is whether that content is useful to them. According to TextMagic, 91% of users opt to brand’s text messages because they see it as “somewhat useful” or “very useful”.

Hopefully, these 5 tips will help you create content just like that.

are-you-making-these-mistakes-with-your-metrics?-here’s-how-to-avoid-them

As a marketer, you are keenly aware of how important it is to monitor your website performance. It’s why Google Analytics and Adobe Analytics are so prevalent and have become integral to understanding the health of any online business. The widespread adoption of data analytics and the user-friendly reporting interfaces of Google and Adobe have led to a general familiarity with data among marketers, along with the confidence to interpret website performance using common metrics. However, while many of these metrics seem straightforward, some of the most widely used ones are trickier to interpret than they first seem. Below are three common mistakes marketers make when deciphering the results, along with advice on how to avoid them. 

Mistake #1: Using time on site/page to make decisions

Content producers, ad agencies, and many other marketers love to mention higher time on site as if it is a clear indicator that visitors to your website are more engaged and a justification that you should pay them more to continue creating such excellent content. Conversely, lower time on site is generally regarded as a bad trend and to be avoided. After all, shouldn’t people be spending more time on your site and taking the actions you want them to take?

The problem here is that nobody, and I mean nobody, can interpret time on site correctly. Why? Consider these three examples:

  • Person A visits your website looking for product information and wants to download a specification sheet for a few similar products. She is also are interested in reading about new upcoming products. She spends six minutes on the site.
  • Person B visits your site and knows exactly what she is looking for, which is the name of a specific part for one of your company’s products, so she can order it via her local reseller. She knows the specific page she is looking for, where the information is located on the page, and ultimately only spends 10 seconds on the page before leaving and taking no other action.
  • Person C visits your site but has 20 tabs open in Chrome and only one of those is your page. He isn’t especially interested in your product or brand, but one of your links showed up in a search results page so he opened it to compare your product to others like it. After 15 minutes of browsing other open tabs, he makes it to your site where he views two pages quickly, clicks on a couple items on the page, then moves on again to a different tab. Eventually, the cookie for his visit times out and he is logged as having spent 45 minutes on your site.

Using typical time-on-site logic, Person A is a “good” visit, Person B is a “bad” visit and Person C is a “great” visit. That obviously makes no sense whatsoever, as both A and B are desirable visits, but C was clearly not. Unfortunately, by using time on site, you cannot determine what type of visit you’re really getting, which makes it virtually useless in decision making. 

Solution: Instead of using time on site, consider using a combination of bounce rate, page views per visit, scroll depth, CTA clicks and overall traffic volume to get a sense for whether your visitors are truly engaged. Most of these metrics are already included in basic versions of Adobe Analytics and Google Analytics, however, scroll depth may require some light instrumentation work in Adobe and similarly it must be manually activated within Google Analytics

If you use time on page because you don’t have much click-centric content for visitors to interact with, consider breaking up your text into sections and hiding some of it behind a “see more” click so that you can better understand if people are interested in reading the full breadth of your content. Some visitors may find this format less friendly for easy reading, but if you’re struggling to find ways to measure engagement, then this minor inconvenience to your visitor may be worth the risk.

Mistake #2: Relying on a single metric with no other context

Another common scenario is when the marketer uses a single metric as the sole indicator of success, without considering any other context. You might think an easily understandable metric like sales or revenue would make perfect sense. But, even with a measure as straightforward as revenue, there may be other factors at play. Maybe revenue looks good in isolation ($10 million dollars, awesome!), but you still missed your target for the quarter, and investors will not be pleased, causing your company’s stock value to tank. Perhaps all your revenue is from one customer, but what if that customer is Sears, they just went bankrupt, and you don’t have any other substantive revenue sources after Q2. Not good!

Although revenue is an extreme example, many marketers use metrics in isolation like this, holding them up as amazing successes, when they are far from it. Traffic volume is one example that pops up frequently. But without the bounce rate and conversion context for that traffic, there is no way to determine if it was good quality traffic or if the ideal intended audience was on the site.

Solution: To avoid making ineffective business decisions, always consider the correct context for your metrics before acting. Often, you can confirm that you’re headed in the right direction by making a quick verification that clean data is coming through or by triangulating your findings with an additional metric. 

Mistake #3: Continuing to report on metrics just because they’ve been used in the past

This mistake could certainly apply to more than just metrics: the often-irresistible tendency to perpetuate a business practice simply because “it’s what we’ve always done.”  Many brands insist on using low-quality site metrics for no other reason than they were used in the past. I once worked with a marketing executive who wanted to continue summing daily unique visitors across the company website in Adobe, because that is how the old Coremetrics platform worked (it did not offer de-duplication like today’s more advanced tools do). In doing so, the actual number of unique visitors was over-counted across the site by roughly 30% during the year. That error had a net negative impact on expected revenue and growth targets, which were unachievable due to inflated visitor counts.

Solution: Sometimes legacy metrics make sense, particularly for benchmarking purposes, but it is critically important that you perform regular audits to ensure that all the metrics and reports you’re using to make site decisions are still appropriate, given the changing business environment.

While analyzing metrics is an essential component for making informed decisions about your website strategies, it is imperative that you audit your analytics practices and maintain flexibility in your tactical approach. Be sure you examine a broad and varied set of conditions and metrics. And be adaptable to changes in market conditions and technology that could affect not only your perceptions but your results.  


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

making-the-leap-to-multi-touch-attribution:-how-to-get-buy-in-from-sales,-tech,-leadership

“As a marketer if you’re not using a MTA model, it’s challenging to prove your impact on the business and improve the customer experience by continuing to invest in what works for you and the customer,” said Adam Kirby, director of marketing at MediaCurrent, an open-source development and digital marketing agency that works with enterprise brands, when asked if companies should be moving to multi-touch attribution (MTA).

“MTA is more than just another piece of martech because the insights gathered impact every area of the business including lead gen, the customer experience, ROI, to what event your sales teams get to attend next year or what technology you choose to renew or cancel,” said Kirby, who will be speaking on making the leap to multi-touch attribution next month at our MarTech East conference in Boston.

He believes most companies should be adopting MTA. These solutions aren’t inexpensive or perfect and the process to get there is often time-consuming and complex, admits Kirby, but when done right, the upside is better understanding about your customers and, ultimately, getting more revenue from your marketing investments.

What are the signs you should be considering a MTA model?

If your organization invests in multiple channels throughout a customer’s buying journey, that’s a sign you should consider a MTA model,” said Kirby. For example, in SaaS purchasing decisions, there may be up to a dozen people involved in the process, all engaging with your campaigns and content. Withoug an MTA model “you’re likely over and underestimating different touchpoints along the buyer’s journey,” said Kirby. “Misinterpreting the data results in over- and under-investing in key areas, which equals wasted time and missed opportunities.”

Overcoming buy-in barriers from stakeholders

Getting stakeholders on board for an MTA solution isn’t always easy. You might hear, “We already have too much martech,” or “It’s too expensive,” or “We already measure KPIs,” said Kirby.

“To gain support for stakeholders outside of marketing,” said Kirby, “you’ll need to share how moving to MTA will benefit their team. In short, for sales it means more leads and revenue, for technology it means cleaner data, less reporting, and better allocation of budget, and for your C-suite it’s all about ROI and reducing waste.” And, as marketing channels expand, you’re going to be missing pieces of the customer journey without this kind of solution, added Kirby. 

Earlier in his career, Kirby found success gaining support from sales for MTA by setting up casual meetings and demonstrating common goals. “I approached a sales leader to say we want more information about the customer journey and asked, ‘Who would be a good person on your team to talk to over the phone for 30 minutes?” explained Kirby. “Have the leader explain to a sales rep what the expectations are. Explain that the overall goal is to generate more revenue — not to claim more marketing-influenced revenue. Start the conversation by saying, ‘We need to understand what’s most effective to get you better leads and help close them.’”

Get granular, anecdotal

“If you need help convincing an executive sponsor, I recommend leveraging data and stories,” said Kirby. He suggests learning about some of the recent deals that person has closed and talk about their customer’s journey. “Try and connect with that client directly to learn the specifics. What you’ll find is multiple engagements with your brand that aren’t being tracked by your current process. It’s likely our organization isn’t assigning the proper credit to these touchpoints and is assigning too much to others,” said Kirby. “This information is very compelling to leadership that you are likely not investing in the right areas or measuring the true ROI of a given marketing tactic or technology.”

While there are less expensive and tech-intensive ways to go about it, Kirby recommends investing in an MTA solution. “You can do multi-touch attribution in Excel, but you spend so much time manipulating and maintaining it, you lose time to actually act on the results,” he said.

Getting your data in one spot — a data warehouse, CRM, customer data platform — is critical “so the vendor can apply their technology,” said Kirby. “Getting all the technology to talk to each other and getting the data clean and organized is a huge undertaking, but worth it. Then you can measure better.”

Questions to ask when evaluating multi-touch attribution vendors

When you’re looking at MTA vendors, it’s important to know the right questions to ask so you don’t end up regretting your choice. Kirby says the first key is to have your goals clearly outlined to be able to see if the vendor’s solution aligns with them. Then ask these questions:

  • How do you integrate with other technology? Can you integrate with ours?
  • What types of models do you have? Make sure their models align with your goals. For example, account based marketing attribution is key for B2B. 
  • What does support look like? 
  • What does the onboarding process look like?
  • Do they cover all of your channels? 
  • What are the reporting capabilities? Make sure they are robust and consumable — and preferably prescriptive with insights.

Kirby cautions marketers to set expectations. “It’s a long journey to MTA,” he said. “With so many influencers in the customer journey, multiple channels, and usually large martech stacks it’s a big undertaking to tie all of that together for a single version of the truth that you can model. But it is worth it in the end.”

More about the MarTech Conference



About The Author

making-apple-music-more-social

PROJECT | APPLE MUSIC

Client | DESIGNLAB

Role | UI/UX Designer 

Duration | FOUR WeekS

_____________________________________________________________________________________________

As part of the Designlab program, one of my projects involved designing a new feature within an existing product. The project I chose to work on was for Apple Music, which focussed on increasing social interaction among users. Socialisation has always been a subject of debate amongst many music streaming users and services alike. Spotify, an industry giant, recently pulled out their in-built messaging feature due to low user engagement. I wanted to do an empathetical approach and understand the exact needs of social communication in the interest of ‘ music streaming users’ that would be solved with the ingression of a social feature.

Apple Music’s mission is to help people stream music, videos, radio from their immense music collection across all devices without any interruption, in a legal and accessible way. Majorly an on-demand music service with access to 45 million songs that can be downloaded for offline use based on subscription, Apple Music still lags behind industry favorites like Spotify, Pandora, Google Play Music and Amazon Music in terms of user engagement, retention and popularity. For all these reasons they want to expand the social capabilities of their iOS application which is currently very limited to the creation of a profile; following other users and sharing public playlists. An interactive and engaging feature that let’s their current users stay socially connected in favour of music is much needed to retain existing users. 

‣  Design a new social feature that embeds within the current Apple Music platform for iOS devices. 

    It has to embed well and seemlessly with the rest of the app.

‣  Design additional and complementary feature that could enhance the main feature.

Understanding the need for social communication in music applications | Process of identifying user’s problems and empathising on vital issues

In order to completely understand the problems that can be addressed by developing a social communication system, I fleshed out a research strategy that helped me determine, 

who am I developing the feature for? (demographics of Apple Music’s target audience/existing users).

what do I need to know? (user’s behaviour, usage, motivation and preference by understanding their current method of social engagement for discovering and sharing music including frequency, app preference, context of use). 

what problems should I be addressing? (the needs and pain points of Apple Music users that could be solved with the introduction of a social feature).

what are the existing solutions that has worked or failed? (competitors strategy and services surrounding social engagement).

I started out by conducting a secondary research to identify trending features in music applications that are most preferred and used by music app users; examine the development and success strategy of social communication features in music apps through the years; understand the target audience’s psychographic characteristics to develop a social feature in favour of their behaviour, interests and attitude. 

With the knowledge from preliminary investigation I conducted user interviews to identify target audience’s motivation, needs and issues when using these services; understand their emotional and environmental triggers to music and the need for social bonding. I developed an interview and survey guide to help answer significant questions, such as

‣  How users discover new music?

‣  What they liked/disliked the most using the application?

‣  How much did they identify with their friend(s) interest in music? What type of knowledge transfer fuelled discussions surrounding their interest in music?

‣  How do users currently recommend or share music with others? What are the biggest concerns that they face when doing so?

After conducting empathy research, it was clearly evident that the target segment were serious ‘music addicts’ who had a different outlook, habits and preferences when it came to listening to music in comparison with ‘casual listeners’. They had different drives, motivations and gains from listening to music which were dependent on their surroundings, attitude and exposure. A unanimous concern was the inability of sharing music which they deemed was rudiment and how it affected their need to socially connect with their friends and loved ones over a shared interest. 

The overall research findings helped establish the needs, gains, pain points of music app users and helped identify key areas of improvement which when addressed can help develop a social integration feature in Apple Music app that promises a sustainable user retention growth over time.

Once the problems that needed to be resolved were defined, I set about to establish premise of the project by creating an user experience strategy map to define the guiding principles, challenges, aspiration, focus areas, activities and measurements for success.

Synthesising user research findings

Upon conducting user interviews, I came across users with interesting personalities whose ideologies did not match with the masses. In India, the segment that Apple Music tries to provide for is a very niche, upscale audience and presumably users who prefer listening to international over regional music. I created a persona and an empathy map based on the identified target user segment. The demographics, music preference, personality, goals and frustrations of the persona reflects the interviewees lifestyle; as it should be relatable to the presumed end user.

Since most of the findings from my research overlapped with one another, I needed to identify the right challenges to be addressed with the right solution. Creating a POV problem statement helped me define the problem in question in an empathetic manner to be able to come with possible solutions that will address the needs of the users. I formed HMW questions for each of these needs which acted as a guide in the ideation phase to solve design challenges. This was followed up with a brainstorming activity where I came up with multiple possible solutions for each of the identified need and narrowed down on features that will have the maximum value with the minimum effort to implement.

The ideas that stood out from the ideation session are:

‣  The introduction of ‘Mixtape’ as a form of collaborating playlists and sharing music with friends. A method of sharing music that slowly died with the advent of technology is reminiscent to late Gen-X and early Gen-Y music fanatics. 

‣  Sharing music with followers within the application for easy accessibility. Privacy to the users was an utmost priority and hence a more relaxed version of a messaging system can be built that would help users who wish to be social. It would also help users interact more often thereby increasing the use of the application.

‣ ​​​​​​​ Several pain points concerning ‘personalisation’ was identified during research. An updated onboarding which will let the users provide inputs for their music preference can help build a better recommendation system by understanding a user’s likes and dislikes.

The ideas generated in the brainstorming activity led to the creation of a feature matrix quad which helped narrow down ideas for product features that would generate maximum gain for the user within the feasibility of project timeline. 

I created an Application Map of the existing app along with the newly ideated features to help lay out user flows for each of the identified need and for seamlessly integrating the features into the existing flow for better usability.

After I developed the user flows, I began to flesh out wireframes for each of the observed tasks. At each and every stage of design I had to ensure that the microcopy and chat interface of the application should be familiar to the user, which will enable quicker interactions. 

Once the base framework was ready for prototyping I started to work on the user interface design. Since Apple Music is an existing product, I concentrated more on designing the interface for the chat feature, along with other newly added elements which were a part of the redesigned onboarding section and mixtapes.

I created a working prototype of the screens using Invision. The task flows observed in the prototype are,

a. Sharing music with a friend using ‘Music Share’. 

b. Updated profile page of a user and a follower.

c. Forming a group and creating a Mixtape. 

d. Alternate flow for viewing, creating and sharing a Mixtape. 

e. Changing artists and music preference (onboarding).

High Fidelity Prototype 

(Created using Invision)

Stage 5 | Test & Iteration

A usability testing was conducted using a high fidelity prototype of Apple Music’s application using Sketch Cloud. The test was designed to assess the success of the newly developed ‘Music Share’ feature; its efficiency and usability when performing the designed tasks flows; identify errors and gain user’s feedback on their preferences and recommendations and assess the overall success of the prototype. The overall test findings helped identify key areas for improving user interaction and identity error states. 

An affinity map was created based on errors and issues observed during usability testing. The affinity map is segregated into groups of findings in navigation, interface and usability; content and call to action, preferences from participants and recommended course of action to address the issues. The prototype was further updated to accommodate the changes rolled out in affinity map.

As a music addict myself, working on this project was more interesting and engaging than I expected it to be. Working on a product idea that doesn’t exist in the market and with no references in research to act as a guide, I learnt the different ways of approaching and finding solutions to a problem. At each and every stage of the design thinking process, I had to constantly validate ideas and findings with solid reasoning before proceeding with the next steps. Way forward, the updated prototype needs to be tested with the target segment for uncovering errors and possible improvements in usability and interaction.

Back to Top


spec.fm:-making-waves-in-design,-one-podcast-at-a-time

If you’re a podcast junkie like us, you might be familiar with Spec.fm — a top-rated podcast network for designers and developers at every stage in their careers. The Spec network is currently comprised of thirteen different podcast shows, with more than 100,000 downloads per week — a pretty amazing feat considering Spec started out as a side project only a few years ago.

Today, we’re joined by Spec Co-Founder Sarah Jackson to hear how Spec got started and quickly turned into a passion project success story for the books. Read on for an important reminder of what truly makes your design community so special and unique. After hearing Spec’s story, we couldn’t feel more proud to be a part of such a generous, supportive, and passionate bunch of creatives. We’re confident you’ll feel the same after this tale!

  1. podcasts roundup

  2. Podcast

  3. Cassette   Podcast

Tell us about yourself and your background in design.

Hey there, my name is Sarah. I’m a Minneapolis native but I moved to San Francisco in 2013 with my partner and my dog in hopes of a brighter future in tech. I ran a small website design studio with my partner before moving to the Bay Area. I couldn’t get a job in the San Francisco tech scene for the first year, so I took a job at a bakery (B-Patisserie) as a front-of-house during the day, and worked on writing, side projects, and going to as many meetups as I could by night.

I couldn’t get a job in the San Francisco tech scene for the first year, so I took a job at a bakery.

Eventually, I was able to snag a job at Mule Design studio as their office manager and assistant project manager, but continued to feel a pull to create something at the end of the day. So during the evenings and weekends, I volunteered to edit and produce the Design Details podcast.

Where did the idea for the Spec network come from?

Spec started with Design Details
 and Developer Tea
. All of us — Brian, Bryn, and Jon were from areas that didn’t have a lot of community at the time. Moving or working with companies in the Bay Area exposed us to an overwhelming amount of people who were like us. We wanted to expose some of that to other people like us from cities with a small or non-existent design and development community.

We never expected it to be anything more than a fun side-project that we could work on during nights and weekends, that shared some stories and hopefully helped one person feel a little less alone. All of a sudden, we had companies that wanted to be sponsors, fans who wrote in asking for more, and other people who wanted our help creating content they could give back to their own communities. So, we said, OK — I guess we’re doing this for real, and made the network official.

Why do you believe podcasting is important to design?

I have a background in PR, Marketing, and Business Development. In those professions, at least in my experience, everyone is so guarded of their techniques or sharing their process with anyone in the immediate circle. Nobody has time to help a fellow teammate and they feel no need to help you when you’re struggling in those fields. It can be a real battle to get your foot in the door.

Product Design and Development is very different. Everyone is willing to and wants to share their process, techniques, and expose what’s under the hood. They’re proud of what they are working on or struggling with and want to share that with anyone who’s interested in hearing it.

I think the reason the design and development community is so open is because the profession is still so young.

To be honest, at first, it really freaked me out. Why would someone take time out of their own day to get coffee with us nobodies and tell us all about how they solved a problem we’re also running up against with no clear benefit to them?

It blew my mind, but I realized there was something special about this profession. I wanted to get more exposure to it and share that exposure with the rest of the world, who was maybe feeling like they had too many battles to face.

I think the reason the design and development community is so open is because the profession is still so young. There’s no time for secrets or guarding process for the sake of a raise. Everyone in Product Design and Development is together, learning together — and I think it’s important that we share those stories for incoming generations.

In your opinion, what are the qualities of a good design podcast?

Design is visual, and a podcast is audio. The trick to a compelling podcast is triggering a listener’s imagination. If you can do that without having to show the audience what you’re talking about and encourage someone to build or create something, you’ve got one heck of a show.

Our number one goal is helping designers and developers level up in their careers. We do our best to showcase the folks who are out there building and creating to anyone interested in learning a skill or language. We hope they can be inspired to build something or start a community in their home towns.

At the end of the week, if we can share a story or have a guest on and they can get connected to someone who needed help fixing a bug or solving a problem that week, we’ve done our job.

Do you have any pointers for designers interested in sharing their own insights through podcasting?

Start with the content first and then share your ideas with your friends and other folks in the community. The community will help you make it better and keep you motivated when you’re feeling like you can’t do it.

You can always invest money into fancy gear and things later on, but if the content isn’t there, or you don’t like doing it over and over again, it won’t be worth it. Let the community help you.

Find the Spec network on Twitter and at spec.fm.

For more side-project success stories, check out the story of Color Hunt and how Joanna Behar turned a passion project into a full-time job.

Find more design podcast recommendations: 10 podcasts for every kind of designer and 5 podcasts every UX designer should listen to.


Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

making-a-realistic-glass-effect-with-svg

I’m in love with SVG. Sure, the code can look dense and difficult at first, but you’ll see the beauty in the results when you get to know it. The bonus is that those results are in code, so it can be hooked up to a CMS. Your designers can rest easy knowing they don’t have to reproduce an effect for every article or product on your site.

Today I would like to show you how I came up with this glass text effect.

The word Kyoto that is translucent and stacked on top an image of the city.

Step 0: Patience and space

SVG can be a lot to take on, especially when you’re just starting to learn it (and if you are, Chris’ book is a good place to start). It’s practically a whole new language and, especially for people who lack design chops, there are lots of new techniques and considerations to know about. Like HTML, though, you’ll find there are a handful of tools that we can reach for to help make SVG much easier to grasp., so be patient and keep trying!

Also, give yourself space. Literally. SVG code is dense so I like to use two or three new lines to space things out. It makes the code easier to read and helps me see how different pieces are separated with less visual distraction. Oh, and use comments to mark where you are in the document, too. That can help organize your thoughts and document your findings.

I’ve made demos for each step we’re going to cover in the process of learning this glass effect as a way to help solidify the things we’re covering as we go.

OK, now that we’re mentally prepared, let’s get into the meat of it!

Step 1: Get the basic image in place

First things first: we need an image as the backdrop for our glass effect. Here we have an element and an within it. This is similar to adding an in HTML. You’ll notice the dimensions of the viewBox attribute and element in the SVG element are the same. This ensures that the is exactly the same size as the actual picture we’re linking to.

That’s a key distinction to note: we’re linking to an image. The SVG file itself does not draw a raster image, but we can reference one in the SVG code and make sure that asset is in the location we point to. If you’ve worked with Adobe InDesign before, it’s a lot like linking to an image asset in a layout — the image is in the InDesign layout, but the asset itself actually lives somewhere else.

See the Pen


SVG Glass Text Effect – basic image in place
by David Fitzgibbon (@loficodes)


on CodePen.

Step 2: Distort the image

Straightforward so far, but this is where things get complicated because we’re going to add a filter to the image we just inserted. This filter is going to distort the image. If you look closely at the difference between the demo in the last step and the one in this step, you’ll see that the edges of objects in the image are a little rough and wavy. That’s the filter at work!

First, we create another to hold filter. This means that if we ever want to reuse our filter — for example on multiple elements on the page — then we totally can!

Our first filter (#displacement) is going to distort our image. We’re going to use feTurbulence and feDisplacementMap, each explained by Sara Soueidan much better than I can in this post. Beau Jackson also wrote up a nice piece that shows how they can be used to make a cloud effect. Suffice to say, these two filters tend to go together and I like to think of them as when something needs to appear “wobbly.”

With our filter container in place, we just need to apply that filter to our image with a filter attribute on the , magic!



  
  
  
  
  
  
  
    
    
  

  

See the Pen


SVG Glass Text Effect – image distorted
by David Fitzgibbon (@loficodes)


on CodePen.

Step 3: Clip the text

We don’t want the entire image to be distorted though. We’re going to clip the shape of our distorted to the shape of some text. This will essentially be the portion of the picture seen “through” the glass.

To do this, we need to add a element in a and give it an id. Calling this id in the clip-path of our now restricts its shape to that of our . Wonderful!

See the Pen


SVG Glass Text Effect – text clipped
by David Fitzgibbon (@loficodes)


on CodePen.

Step 4: Reveal the full image

OK, so it’s bueno that we have the distorted clipped to the , but now the rest of the image is gone. No bueno.

We can counteract this by adding a copy of the same but without the clip-path or filter attributes before our existing . This is where I like to add some nice comments to keep things neat. The idea is like placing a transparent layer over what we have so far.

Illustration showing one image overlaid on the other.

I know, I know, this isn’t very neat, and we’re repeating ourselves. Ideally, we would set our filter straight on the element and use the in="BackgroundImage property for feDisplacementMap to warp what’s behind the text, without the need for extra elements. Unfortunately, this has poor browser support, so we’re going to go with multiple images.



  

  
  
          
  
  

  

See the Pen


SVG Glass Text Effect – warp complete
by David Fitzgibbon (@loficodes)


on CodePen.

Step 5: Place the text… again

Next, we’re going to duplicate our text just as we did for the image in the last step. Unfortunately, because the text is in a clip-path, it’s now not available for rendering. This is the last time we’re going to duplicate content like this, I promise!

Now we should have something that looks like a normal image with black text over it. If the distortion filter on the we’ve already made is what we can see “through” the glass, then our new is going to be the glass itself.



  

  
  
    KYOTO
  
        
  
  KYOTO



See the Pen


SVG Glass Text Effect – text in place again
by David Fitzgibbon (@loficodes)


on CodePen.

Step 6: Creating the dark edge of the text

This is where things start to get exciting, at least for me! 🤓

We want to create a dark edge along the text element which, when paired with a light edge (we’ll look at that next), will add depth to the appearance of the text against the image.

We want a new filter for our , so let’s create one in our filter’s SVG element and give it an id="textFilter and link it to the filter attribute of the element.

SVG works from the background to the foreground, so the first thing we’re going put in our filter is the shadow that the glass would have, as that is furthest back. I’m gonna level with you, this one is pretty complex, but we’re going to go through it one step at a time.

For this effect, we’re using four filter primitives: feMorphology, feOffset, feFlood and feComposite.

feMorphology is first. We’re using this to make the text fatter. In the demo below, comment out the next three primitives ( feOffset, feFlood, feComposite ) and play with it. I have the value radius="4" to achieve the glass effect, but see what happens if you set it to 1… or 100!

feOffset is used to move all the “pixels” in the previous primitive ( feMorphology ) across the x- or y-axis. The values dx="5" and dy="5" move the “pixels” right on the x-axis and y-axis, respectively. The higher the number, the further they move. Put in negative numbers for dx and the “pixels” will move left. Negative dy and they’ll move up! Again, the is the sort of thing you start to learn as you play around with them.

The reason I have quotes around “pixels” is because they’re not screen pixels like you might expect in CSS. Rather, they refer to the dimensions we set on the parent . I think of them as percentages. We have used these settings viewBox="0 0 1890 1260" in our example. This means our is 1890 “pixels” wide. If we set dx="189" it means we’ll move our element 10% of the way across the SVG (1890 divided by 189).

feFlood is great. If you want to fill the screen with color, this is the primitive you need! You might wonder why we can’t read our text now when we apply it. That’s because you can only see the result of the last filter primitive that was created. The result of each of the previous primitives was related to our element. The result of feFlood is just like its name: a flood of color. It doesn’t know what you did before and it doesn’t care — it’s merely going to fill an area with color.

This is where some people start getting frustrated with SVG. It’s hard to work on something when you can’t see it! Trust me, as you work with SVG more you’ll get used to this. In fact, the next few steps will need us to rely on this and trust that everything is still in place.

feComposite is going to solve this issue for us. What does it do? MDN describes it as:

The SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, and lighter.

That to me is jibba-jabba. I think of it as affecting the alpha layer of in with the color/alpha of in2.

With this in place we can once again see our text spelled out and, because the color we used is slightly transparent, we can even see the distorted “glass” effect coming through. Great!



  
    
  
  
    
    
    
    
    
  

  

See the Pen


SVG Glass Text Effect – dark edge
by David Fitzgibbon (@loficodes)


on CodePen.

Step 7: Let’s do the light edge

This is essentially the same as what we literally just did, but we’re going to shift the shape up and to the left using negative dx/dy values. We’re also setting a slightly white color this time. We’re aiming for a nice depth effect.

We’re again in a position where what we can see is the most recent result from a filter primitive, but we can’t see our dark edge! feComposite isn’t what we want to use to bring them together because we don’t want the alpha of the dark edge colored by the light edge… we want to see both! Which leads us to…


  

    

      
      
      
      
      

    
  
  

See the Pen


SVG Glass Text Effect – light edge
by David Fitzgibbon (@loficodes)


on CodePen.

Step 8: Combine the edges

feMerge! It’s a hero. It lets us take any number of primitive results and merge them, making a new image. Woohoo, we can now see both dark and light edges together!

However, we do want them to be edges rather than both filling up the entire text, so we need to remove the space that the original takes up. What we need next is another feComposite to chop out the original SourceGraphic. Because we used feMorphology to fatten the letters for our edges, we can now chop the original letter shapes out of the result of our feMerge.


  

    

    
      
      
    
    

  

See the Pen


SVG Glass Text Effect – edges combined
by David Fitzgibbon (@loficodes)


on CodePen.

Now we’re starting to look like glass, with just one piece missing.

Step 9: Yes, a bevel

We have a pretty good 3D-looking glass effect. However, the letters look flat. Let’s add one more effect and make them look more rounded.

To achieve this we’re going to create a bevelled effect.

First we’re going to use feGaussianBlur. This will blur our existing filters slightly. We’re going to use this blurred result as basis to add some feSpecularLighting. As usual, feel free to play with the numbers here and see what effects you can get! The main one you might want to change is the lighting-color attribute. The image that we’re using here is slightly dark, so we’re using a bright lighting-color. If your image was very bright, this would make the letters hard to read, so you might use a darker lighting-color in that case.


  
  
    

    
    
      
    
    

  

See the Pen


SVG Glass Text Effect – bevel
by David Fitzgibbon (@loficodes)


on CodePen.

Step 10: All together now!

Finally, with all the pieces ready, we do one last feMerge to get everything in place for the finished effect!


  

    

    
      
      
    
  

Here’s everything together, nicely spaced out and commented:



        
  
  
    
  
  
    
  
  
    KYOTO
  
    
  
  KYOTO
    




  
    
    
  
    
  
            
    
    
    
    
         
            
    
    
    
    
    
          
    
    
      
      
    
    
          
    
    
    
      
    
    

    
    
              
              
    

  

See the Pen


SVG Glass Text Effect
by David Fitzgibbon (@loficodes)


on CodePen.

4-do?s,-and-4-don?ts-of-making-a-graphic-design-portfolio

A graphic design expert like yourself has to be aware of the fact that there are millions of graphic designers in the world. And they all want the same thing you do: to get hired.

And it’s not uncommon that a graphic designer from Spain gets hired by a client from the US. Or Japan. Or Morocco.

Yes. The whole world seems like a nano village stacked with excellent graphic designers, that are just a click away. Clients don’t have to put much effort into finding the right man for the job.

That’s why being an expert in your industry is just not going to cut it.

You need to do everything in your power to get the potential clients’ attention and spark their interest. You need to brand yourself and set yourself apart from your peers.

To do so, for starters, you have to build a stunning, flawlessly designed portfolio that represents you and the work you’ve done in the right light.

Your online portfolio needs to be original, and it should be able to make you relevant.

It needs to make the potential clients say “Damn, I wanna work with that designer!”

And it’s not an easy task.

So, to help you wow all the recruiters and potential clients, we have decided to write down the do’s and don’ts of making a graphic design portfolio. Here they are:

Do: “Spy” on Other Graphic Designers

Face it 一 you’re not the first graphic designer that is looking to build an online portfolio. Nor will you be the last.

That’s why the first step of making a graphic design portfolio should be doing some research on how your peers built their online résumés.

What platforms did they use to create their online portfolios? What type of projects did they include? How did they design the About page? Did they provide an explanation of each project, or did they just include the graphics?

By checking your “competitors’” websites, you’ll get an idea of what is in trend now and in which direction you want to go.

Perhaps you want to build a minimalistic online portfolio, that’s not so feature-filled, and that’s entirely black and white. Or, you want to include some ‘90s inspired gradient, which will enhance your homepage’s flat design. Who knows?

To find your style, search for other graphic designers’ portfolios, and we are sure you will be inspired by their breathtaking work.

Bonus tip: The quickest way you can find other people’s work is by typing in the awwwards.com search bar “graphic designer” and wait for the results to pop up. It’s that simple.

Don’t: Skip on Adding Social Media Handles

Potential clients browse your site to see your work and get to know you professionally.

But, the truth is, a portfolio website serves not only as a CV but also as a tool that can save you the trouble of going to an interview.

How?

Well, as you probably know, in the interviews, recruiters ask all kinds of questions. Some of the questions have to do with the work you have done, while some of them are more personal.

When making a graphic design portfolio, the projects and the notes you have provided about the projects cover your professional side. Your personality, however, can shine through only if you include links to your social media accounts 一 Instagram, Facebook and Twitter (Behance and Dribble are a must!).

If you decide to show off a bit of your personality by including social media handles, be sure not to share each and every situation you go through when working with a client. For example, sharing frustrations, and rants you’ve had with previous clients is a big no-no. You want to come off as a person that is easy to work with, but also discreet and professional. 

Do: Channel Your Inner van Gogh

Allow us to explain the title.

Do us a favor and type in the Google search bar “van gogh”.

What are the first few results that appeared?

The first one is probably Wikipedia, and below Wiki, you can find sites that write about van Gogh’s life, his eccentric personality, and the most famous paintings of this Dutch post-impressionist.

Not just any paintings. The most popular ones, like “The Bedroom” or “The Starry Night”.

As you probably know, van Gogh created multiple drawings, sketches, and paintings. However, out of all of them, people have heard about up to 10 paintings, which are considered to be van Gogh’s most prominent work.

Only 10! Out of several thousands of drawings, sketches, and paintings!

If you think about it, it’s perfectly understandable.

Sure, van Gogh’s immortal legacy will inspire artists for decades to come, but you have to agree with us that no one except Art students wants to analyze and admire all of van Gogh’s masterpieces.

Although you most likely can’t call yourself “the van Gogh of graphic design”, what you can learn from this brief story is that people, especially potential clients, can’t and will not try to remember all of your work. They won’t even bother going through all of your graphics and sketches. They’ll only focus on the projects they found the most interesting or beneficial for their company.

You’ll need to list ONLY the projects that describe the best your design style and how quickly and effectively you can adjust to clients’ and projects’ needs. When making a graphic design portfolio, be sure to list up to 10 recent projects. It’s more than enough.

Bonus tip: As we mentioned in the post in which we explained how to make an impressive online portfolio, be sure to separate all your projects into categories, so it’s easier for a client to find them.

Super bonus tip: As a graphic designer, you probably haven’t signed up only for paid client projects. But, just because there was no money involved, it doesn’t mean you should skip mentioning this sort of projects. Be sure to include the comics, editorials you have sketched, as a volunteer or to help a friend in need. This tip works amazing for less experienced, graphic designers that are looking to build their career.

Don’t: Forget to Make Your Contact Information Visible

Your name, phone number, and email address should NOT be hidden on the Contact or About page.

Make recruiters’ lives easier by adding all this information in the footer. So, once they decide to reach out to you, they can find the information in just 2 seconds, no matter what page of your portfolio they are on.

Do: Write Notes About the Projects

Better yet, include a 200-word description of each project.

The reason why we encourage you to write notes about projects is that some of the work you have done is self-explanatory, some of it isn’t. But, no matter how easy to understand a project is, you should always name the client, and explain a bit the work you made.

So, when making a graphic design portfolio, and including project descriptions, we would suggest you include in the note who the client was, what the goal of the project was, who the target audience was and what skills/techniques you used. If the project was a success, you could explain how it was marketed and how the results were measured.

Bonus tip: When writing project descriptions, you can really let your personality shine through. For example, by adding a humorous comment at the end of each project note, you will be perceived as someone who is highly experienced, but easily approachable and has a positive attitude towards work.

Don’t: Forget to Give Credit to the People that You Have Worked with

Team projects are great to participate in 一 they allow you to develop your soft skills and gain experience. But, that doesn’t mean that you should take all the credit.

So, if you plan on including team projects, be sure to credit every single person that was a part of the team. You can also add links to their portfolios. By doing this step, you’ll show recruiters that you are a true team player that respects other people’s abilities, skills, and expertise.

Do: Research Web Design Trends and Include Them in Your Portfolio

No experienced, high-skilled designer should be lazy to invest time into making a graphic design portfolio.

Definitely not!

A graphic designer’s portfolio must be well-built, high-performance, and responsive. Above everything, it should make the clients’ jaws drop. 

One of the ways you can achieve all of this is by doing research on web design trends before you start making a graphic design portfolio.

For instance, one of the biggest trends right now is an animation that makes an image appear when users hover over the text. If you are not sure what we mean, you can check Sara Marandi’s portfolio. This DP seamlessly included the animation to her website’s homepage. Believe it or not, we had added this option, when we were creating Bottega, our portfolio WordPress theme. You can see it in the theme demo, on the About page 一 when users hover over the word “jaw-dropping”, a skeleton dinosaur head appears on the screen. (It’s not as creepy as it sounds, we promise!)

Don’t: Go Overboard with the Number of Menu Items

Reducing the number of your menu items is a must if you want to stop potential clients from bouncing off.

Why?

Because for 94% of website visitors, easy navigation is the most useful website feature and because half of all visitors use the navigation menu to orient themselves on a website.

When it comes to your online portfolio menu, simplicity is the way to go 一 add the About, Contact and Projects pages, and you’re good to go. It’s that simple.

You Have Reached the End!

And that’s it! There are all the tips we wanted to share regarding making a graphic design portfolio.

Now, it’s time you get to work and create the best portfolio a graphic designer can make. Fingers crossed!

Are there any tips we forgot to include? Do you have some tips up your sleeves you would like to share? If you do, be sure to write them in the comments below.