Webdesigner Depot

syndicated content powered by FeedBurner

...

Reset this favorite; show all Subscribe options

Subscribe Now!

...with web-based news readers. Click your choice below:

...with other readers:

(Choose Your Reader)FeedDemonNetNewsWireNewsFireNewsGator Outlook EditionRSSOwlShrookUniversal Subscription Mechanism (USM)

Get Webdesigner Depot delivered by email

View Feed XML

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

• Diversity Initiatives in Web Design

  Posted:Fri, 03 Jul 2020 10:45:05 +0000

  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

• Show Them Your Assets – Tips for Handing Off Designs to Developers

  Posted:Wed, 01 Jul 2020 10:45:36 +0000

  You’ve been working away at your latest design project, and the client has given the go-ahead on your lovingly created digital concepts. Now it’s time to bring those designs to life, and you have a developer queued up to do just that.

  So your part’s done, right? Not quite. You’re going to want to make sure your developer has the best head start they can in order to create the site as you imagined.

  Below are a few tips to make that handover process a little easier.

  Communicate to Make It Great

  Get Talking

  Scheduling a face-to-face meeting with your developer to talk over your project’s specifics and ambitions will help align your expectations and make the intent behind your concepts more clear. It’s quite likely they’ll even ask questions and request assets you haven’t even thought of yet!

  It’s not just a one-and-done thing either, your developer’s going to have questions or requirements that arise as the project progresses. Deciding on a communication channel to allow easy discussion will help you both immensely.

  Annotating Your Concepts

  Developers might seem like magicians with the way they bring your websites to life, but they’re not clairvoyant! Annotating your concepts where advanced functionality is required reduces ambiguity and makes it more likely that your cool, quirky idea is going to make it to production. If it’s a feature that’s particularly unusual, you might want to find an example of a website or code sandbox that does something similar.

  

  An example of Figma’s comment tool in use to make developer notes.

  Figma and Sketch both have comment functionality in order to make annotations a little easier, also allowing multiple parties to comment. If dealing with PDFs, there is also an annotation tool available through Adobe Acrobat.

  

  Specify the Basics

  The basis of modern front end development revolves around DRY thinking. Some might argue thinking about code can be pretty dry, but we’re not talking about that – in this case, DRY stands for Don’t Repeat Yourself.  Most developers will tackle a project by starting with defining variables: what colors, font sizes, grid columns… anything that can be reused! Good, consistent design follows this same principle – although it’s a habit that can be hard to get going at first.

  Tip: It’s always easier to define variables if this mentality is approached towards the start of the project!  

  Colors

  Make a style guide that specifies the colors you’ve used in your designs. Think about their logical applications to help signpost how they might work as a variable – for example, what colors did you use for paragraph text, hyperlinks and backgrounds? Did you consider colors to convey status messaging, such as successes, warnings and errors?

  Typefaces

  Which fonts have you used for your project? Is there a consistent set of font sizes you used throughout? If you haven’t already, maybe consider a ratio-based type scale – I like to use ModularScale to help with this.

  Basic HTML Elements

  Think about general styling for these basic html tags:

  • Paragraphs <p>
  • Headings <h1–h6>
  • Bullet lists <ul> and numbered lists <ol>
  • Emphasized text <b>, <strong> and <em>

  Buttons

  How about buttons and links? What should they do when they’re hovered over, focused (using the tab key on a keyboard) or disabled?

  Forms Fields and Inputs

  What should form fields look like? Is there any validation checking that should occur when a form is submitted?  How about checkboxes and radio buttons?

  It’s unlikely that you’re going to be able to cover absolutely every single eventuality – allow your developer to use some common sense to fill in the gaps, and be available to them if they have any questions. In the words of John Maxwell and your aunt’s home office wall sticker, teamwork makes the dream work.

  

  Get Your Favic-on

  Favicons are widely recognized as the small icon that appears to the left of the site title on your browser’s tab bar. Nowadays, the application of your site’s favicon is much further reaching, showing up in Google search results and app tiles. There’s also extra theming options available, such as the ability to customize the color of Google Chrome Android’s browser bar color for your site.

  Using a generator site such as realfavicongenerator takes the pain out of much of this decision-making, allowing you to upload specific graphics as desired, creating silhouettes of your icon for Windows Metro tiles and macOS Safari pins, and packaging everything into easy-to-use files and code.

  

   Compress Your Images

  Nobody wants to load a 20MB image when they’re on a slow connection or a data plan – it pays dividends to plan ahead and downsize your images so that they’re production-ready for the web. If you’re worried image compression is going to harm your image quality, fear not – you can go a long way with image compression before quality is seriously compromised.

  1. Start by reducing the image resolution – for batch jobs, I use Adobe Photoshop’s image processor script to downsize images to fit 1920 x 1200 pixels
  2. Alternatively, if you’re working on a static project – where specific images will be used only in specific places – you could use your design software (nearly all mainstream UI software allows you to do this now) to export your images at 2x size to support devices with high pixel densities.
  3. I also convert my image color profiles to SRGB to ensure consistency across most modern display types (this one’s optional)
  4. I then take my newly downsized images and run them through imageOptim at 80% quality. Generally I would aim to get my images under 300kb – if there are any that are still significantly over this target once compressed, I’d run these through again at 70% quality (I wouldn’t recommend going lower than this, though).

  

  Don’t forget you can also do this for PNGs! Enabling PNGCrush in imageOptim will let you significantly reduce the size of PNGs… just be ready for it to take a while.

  Make Your Vectors SVG-Easy to Use

  If your design contains graphics or illustrations you created using vector software, it can be used on the web as an SVG file. Usually, these files will be a lot smaller than JPGs or PNGs. You can export graphics in most (if not all) vector software in this format.

  Optionally, you could use imageOptim or SVGOMG to compress the SVG code without sacrificing quality. Your developer might already use a script that does this automatically when processing the site for production, so it may be worth asking ahead.

  Get Your Licenses in Check

  If you’re using premium fonts, make sure you’ve purchased a webfont license so you can hand over the correct files to the developer. I’d recommend doing this sooner rather than later – although not often, occasionally web versions of fonts can have slightly different bounding boxes to their desktop counterparts, making it a real pain for developers to work with further down the line.

  If you’ve been using samples of stock photos (or if you’ve been going crazy lifting whatever you can find on Google Images), make sure everything is kosher before you go live. Make sure you purchase licensed photos, and if certain photos you want to use require attribution, make the developer aware of this.

  Source

• 3 Essential Design Trends, July 2020

  Posted:Mon, 29 Jun 2020 10:45:57 +0000

  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

• Popular Design News of the Week: June 22, 2020 – June 28, 2020

  Posted:Sun, 28 Jun 2020 10:45:11 +0000

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

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

  Elevator.js – A “back to Top” Button that Behaves like a Real Elevator

  

   

  Redesigning Airbnb for the New Normal – a UX Case Study

  

   

  My Experience Making an App Using a No-Code Tool

  

   

  Simple Design is Dead. Welcome to Apple’s Era of Customization

  

   

  Making the Brand: Redesigning Spotify Design

  

   

  Neon Mode: Building a New Dark UI

  

   

  The Return of the 90s Web

  

   

  Design Roundup June 2020

  

   

  Google Quietly Launches an AI-powered Pinterest Rival Named Keen

  

   

  Apple’s Siri Gets First Major Redesign in Years

  

   

  Perfection will Kill your Design

  

   

  Using 6 Google Analytics Features to Improve UX and Website Metrics

  

   

  Yale Rebrands for Warmth and a Digital Future

  

   

  3 Awesome Digital Marketing Strategies to Boost your Web Presence

  

   

  Onboarding is Dead, Here Comes Noboarding

  

   

  User Experience (UX) Testing: 4 UX Best Practices

  

   

  8 Ways to Promote your Business Without a Marketing Budget

  

   

  10 Interaction Design Rules You Must Never Break

  

   

  On Racism and Sexism in Branding, User Interface, and Tech

  

   

  Staying Creative During Hard Times

  

   

  Serious UX Mistakes that Might Be Sabotaging your Sales

  

   

  10 Key Things a Small Business Website Must Have

  

   

  22+ Horizontal Timeline CSS Examples

  

   

  How to Write an Effective Design Brief in 9 Easy Steps

  

   

  Creative Exercises to Help You Through your Anxiety

  

   

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

  Source

• Case Study: Storytelling Through Brand Design

  Posted:Fri, 26 Jun 2020 10:45:55 +0000

  A successful rebrand goes far beyond flashy graphics and high-res photos. It tells a story. It positions a product to fulfill the wants and needs of the consumer. Following the rebrand journey of Lettuce Grow, take a look at how visual elements can enforce the mission of your brand, engage your consumer and cultivate incredible results.

  Lettuce Grow introduced a sleek, revolutionary, hydroponic growing system that makes growing food from home accessible to the modern lifestyle. However, its branding, to everyday people, presented its product as just another gadget for gardening enthusiasts, as opposed to a lifestyle that anyone can benefit from. The previous website was cluttered and disorganized, leaving the visitor with mixed messages. The bright, colorful, cheery nature did not communicate a premium product. While a bright website is not inherently bad, it isn’t right for the millennial consumer that expects a Peloton or Away Luggage look and feel.

  At ONA Creative, we repositioned the Lettuce Grow brand in a way that not only reflects the premium quality and functionality of the product, but also drives home the brand’s core values and key messaging, which encourage people to lead healthier, more sustainable lives. Simultaneously, by highlighting these core values, we positioned Lettuce Grow squarely at the target consumer intersection of food, wellness and sustainability.

  Through the brand strategy and brand identity, Lettuce Grow has evolved into a brand that makes the “growing your own food” lifestyle thoughtful, timeless and efficient. Here are the 8 elements that transformed Lettuce Grow.

  1. Logos

  The Lettuce Grow brand mark represents the cycle of growing food on the Farmstand, while the hidden triangle suggests a strong foundation, upward movement and a nod to the food pyramid. The Lettuce Grow wordmark is used as the primary logo in combination with the brand mark when the opportunity permits. The curved crossbars in the letter E create a unique and iconic look, connect to the brand mark, and give a nod to growth.

  

  

  2. Icons

  All of the icons were hand-drawn to carry on the same elegant, minimal visual language as the brand mark. Futuristic, yet approachable. Clean lines reflect the premium look and feel of the rebrand. 

  

  3. Colors

  The new color palette was inspired by the colors and textures found in nature, specifically those found on a farm. Primary colors of recycled white, natural black and kale are the core brand colors that should be used when introducing the brand and prominently thereafter. A mixture of earth tones juxtaposed with a touch of bright colors. Off-white and off-black because there is no such thing as pure white or pure black in nature.

  The secondary color palette was inspired by some of the brighter fruits and veggies one can grow on a Lettuce Grow Farmstand. Secondary colors are intended to be used very sparingly to add an element of playfulness to the otherwise muted color palette.

  

  3. Typography

  Consistent use of typography allows consumers to immediately recognize any brand, and Lettuce Grow is no different.

  We selected Rubik as the primary typeface. Rubik’s simple and geometric features embody the modern aesthetic we wanted to achieve.

  Source Serif was chosen as the secondary typeface. It is a classic sans serif font that softens the brand and creates a sense of class.

  

  4. Website

  The website was redesigned with simplicity and premium quality in mind. We wanted our viewers to immediately sense and understand the ease and simplicity of having and using the Lettuce Grow Farmstand. As the consumer scrolls through the site we break down every potential buying barrier to present this beautiful system. In the first month after the launch of the new website, Lettuce Grow saw a 15% conversion rate increase.

  

  5. Packaging

  Understanding that the product itself was forward-thinking and beautifully designed, we wanted to create a thoughtful, timeless and minimal brand. The packaging is a perfect expression of this efficiency, featuring the brand mark on one side and the wordmark on the other.

  

  6. Photo

  The photography captures conscious modern people and families living the “grow your own” lifestyle. Grey and white tones are emphasized, with pops of green coming from vegetables. Sleek and modern aesthetics are complemented by organic raw materials and textures including stone, wood and concrete.

  

  

  7. Social

  The social strategy and content evolution reflected the aesthetics of the rebrand, creating a clean, premium look and feel. The content educates, encourages and engages the active Lettuce Grow community. Everything from social icons to testimonials was thought out, custom-designed and executed with the brand in mind.

  

  

  8. Email

  We redesigned the newsletter, and built out the welcome and post-purchase drips with conversion in mind.

  

  Reaction

  Reflecting on the consumer response to this thoughtful, modern, minimalist brand identity, it’s clear that the bright and poppy original brand identity did not resonate with this audience. The updated visual elements appeal to the values and sensibilities of millennial consumers that are willing to invest in a product they believe in, and that tangibly stands for their values. Authenticity. Sustainability. Innovation. No mixed messaging here.

  Each design element works like a chapter in the overall story of Lettuce Grow: a story that empowers people to live sustainably and invest in a healthy, all-natural food source. Lettuce Grow once offered what was perceived as a mere gardening gadget. Now it offers a holistic lifestyle that can be passed onto future generations. There’s an enormous difference. The logos, icons, typography, website, packaging, photography, social, and email assets are geared toward a target audience that values sophistication, luxury, and simplicity. Goodbye neon colors. Goodbye clutter. Hello Lettuce Grow.

  Source

• Not All Traffic is Created Equally: Measuring The Importance of Traffic Sources & Setting UTMs

  Posted:Wed, 24 Jun 2020 10:45:00 +0000

  There’s no shortage of ways in which you can generate traffic towards a website, and the list seems to be growing on a daily basis. For every new traffic generation method, there are thousands of fresh sources of traffic for businesses to tap into. 

  Plenty of people find themselves so caught up in focusing on new ways of generating traffic that they never get a chance to investigate their actual traffic sources. This can make for a significant mistake because a close look at traffic sources never fails to throw up a wide range of insights. 

  One of the most significant tools when it comes to providing traffic insights are known as UTMs. The name is an anagram of Urchin Tracking Modules, which may not clarify the job they do on the face of things but UTMs are capable of providing a wealth of information to Google Analytics. 

  But how can you quantify the role that traffic sources and UTMs could play for your client’s business? Can such traffic insights help to shape the entirety of client marketing campaigns? Let’s take a deeper look at the value behind measuring your traffic sources and setting UTMs for websites:

  Learning From Data

  The most reliable way of getting to know traffic data and its underlying analytics is through an appropriate website tracking platform. It’s only through a credible analytics platform that you can see accurate insights regarding traffic sources, keyword volumes, the number of pages viewed by visitors and the countries that bring the highest levels of traffic. These aspects of data are imperative when it comes to crafting the types of SEO campaigns that really strike a chord with customers and brings them valuable on-site experiences. 

  Most importantly, analytics help you to determine your conversion rates and better understand customers’ respective journeys in order to better optimize your processes. This way, it’s much easier to identify the drawbacks that prevent visitors from taking the desired actions on your clients’ websites. 

  Today, solid marketing is formed of actionable data and the preferences expressed by customers. Platforms like Google Analytics helps to provide businesses with a wealth of actionable data to analyze website performance and how it’s used among visitors in order to provide insights, grow traffic, and in turn improve visitor experience. 

  

  The range of metrics available on Google Analytics is one of the best cost efficient resources available website owners. Other platforms like Finteza and SEMrush are excellent in offering up intuitive levels of data alongside easy-to-follow visualizations and actionable analysis. 

  Understanding Your Customers

  Website traffic provides invaluable insights into what your visitors do on webpages, as well as what they’re looking for and what actually caused them to convert. 

  Being aware of what people are typically looking for will pay dividends in helping your client’s business to improve its services and products online. With customer insights, you can construct buyer profiles for your potential customers and define your target personas by a range of metrics like age, geographical location, estimated salary, and personal interests. 

  With the right analytics platform, it’s possible to determine the location of most visitors online. Location demographics provide website owners with a list of countries that bring in more visitors. This acts as an excellent prompt in showing you exactly where and who to target in your marketing campaigns in order to fully tap into the most receptive traffic streams. 

  Acting On Your Errors

  Tracking traffic also helps to identify potential on-site errors in your pages, like duplicate URLs, duplicate tags, web spam and incorrect URLs. These issues can severely undermine traffic volume and overall site performance.

  Always keep on the lookout for fluctuations in traffic volume. If the rate of traffic suddenly drops, there could be a logical reason why. Drops in traffic could be fundamentally down to site hosting problems, 404 errors or slower website speeds. Getting to the bottom of these issues can help to maintain high levels of traffic and ensure that users stay on your pages for longer. 

  Many high-quality analytics platforms will offer the chance to send notifications on your dashboard whenever an issue with your site accessibility occurs. These notifications could relate to redundant hostnames, where your website is being sent data from different hostnames. You could also set your account up to receive notifications when there’s a drop in your website’s conversion rates. 

  Monitoring Performance

  The likes of Google Analytics, Finteza and SEMrush are useful when it comes to monitoring the performance of your pages as well as your site traffic. When these two metrics combine it helps you to understand which traffic sources enjoy what content, as well as the pages that could be improved, and the ones that don’t seem to be finding much love from any traffic arriving from various sources. 

  Knowing what content will keep traffic on pages for longer on a website will help you to understand the kind of information that visitors are looking for. If you recognize that a certain source of traffic is enjoying content that focuses on, say, motoring, then you can optimize your content schedule to showcase more instances of this kind of article. You should also look to keep your web arrivals happy by adding easy to follow and relevant internal links into your posts that help boost other pages and content on your site. 

  By gaining insights on your worst performing pages, you can also benefit from learning about where improvements can be made. Such information can clarify how visitors are arriving and exiting poorly performing pages and where they’re coming from. If you’re spotting emerging trends, quickly act to adapt weaker pages or modify your content to suit the perceived needs of your arriving traffic based on where they’re coming from. It could be that your content is titled in a misleading way, or that your text isn’t what visitors were expecting when arriving from a specific backlink. 

  There are many reasons why bounce backs can occur. Conducting a content analysis on poorly performing pages can help you to identify which fixes could be needed to optimize your content. 

  Recognizing Your UTMs

  One of the most effective ways of accurately monitoring your traffic sources is through the use of UTMs. Urchin Tracking Modules refer to the format that Google uses to track traffic driven to websites from a URL. 

  UTMs are seen as small structured sections of code at the end of a URL that’s used to drive traffic to the website in question. For example: https://your-website.com?utm_source=[facebook]

  

  The level of information that UTM codes can bring to platforms like Google Analytics can’t be underestimated. Entire marketing campaigns can be crafted from the insights provided by UTMs, and campaign management teams should be looking at using UTMs for everything that’s posted online to see for themselves how likes, shares, and backlinks are pushing fresh traffic towards a client’s website. 

  UTMs are particularly effective at giving website owners an idea of how their social campaigns are performing. Here, you can see what form of social engagement is bringing in the most visitors, whether videos are prompting more interest or insightful images are performing better. 

  By learning what type of external activity is attracting visitors, it becomes much easier for businesses to optimize their social campaigns in order to draw in a steady flow of visitors from each source. Learning the type of language that creates the most engagements along with the level of personalization each post should carry means that you can optimize your social approach in a way that benefits a website long into the future. 

  Source

• 10 Tools I Can’t Design Without

  Posted:Mon, 22 Jun 2020 10:45:59 +0000

  No matter how skilled you are as a designer, you need tools. A surgeon can’t operate without a scalpel; the same goes for designers. To get the job done effectively, you need to right tools in your arsenal.

  Tools certainly don’t make the craftsman, but they do make your job easier (and mostly fun).

  There are so many tools available today, it can be daunting to start seeking out the right tools for you. In this semi-regular series, designers introduce us to the tools they rely on regularly; some may be just what you’re looking for, others you might be familiar with already, some you might not like at all.

  Today, Marvellous Aham-adi introduces us to the tools he uses when designing…

  1. Sketch

  Bohemian Coding’s Sketch is a vector graphics editor for macOS. The powerful vector-based tool is used for desktop and mobile UI designs, creating mockups and prototypes, and also allows collaboration among designers.

  The main con to the tool is that it is a Mac-only app, so only mac users can use the app. Aside from that, the tool is user friendly. It doesn’t have a steep learning curve unlike other design tools. The tool was created strictly for designing websites and apps so there are no unnecessary features that cluster the design interface. This makes designing easier and less complicated. Another advantage is that since it’s a vector-based app, the file sizes are significantly smaller.

  You can choose from hundreds of plugins and extensions that help you do everything from creating charts with random, tabular, or JSON data. You can also create 3D mockups in Sketch with full control over angles and perspectives. It also comes with an SVGO compressor, Bitmap Compressor, and allows easy grabbing of images from Unsplash.

  

  2. Procreate

  Procreate is a powerful and intuitive digital illustration app for iPad. The app allows you to create illustrations, animations, rich paintings, and sketches. With its creative tools and unique features, it can serve as a complete art studio.

  The app comes with a huge library of over 200 handcrafted brushes. You get access to artist brushes, pencils, inks, and charcoal. You can also make your own custom brushes or customize any brush to suit your style with the Brush Studio. It also comes with a Valkyrie graphics engine that allows you to draw, paint, and sketch designs at incredible speeds. The engine takes advantage of Apple’s ProMotion technology to help you get the best performance out of your iPad.

  It also comes with unique features like QuickShape that helps you get the perfect shape every time and StreamLine that helps you create strokes with smoother curves and fewer imperfections.

  

  3. Dribbble

  Dribbble is a social network for designers. The app is a go-to resource for discovering and connecting with the world’s top designers and creatives. Dribbble can be used in creating your personal portfolio, getting inspiration, and interacting with other designers.

  What I love about the tool is its use of basketball metaphors. Its users are called “Dribbblers”. Dribbblers can post “shots” ( 800 x 600 sized images). Dribbble has a feature known as “bucket” which is similar to Pinterest boards. Other users can like, comment, or follow your bucket. You can also “rebound” by posting a design that is inspired by another post. You can also create design competitions also known as “playoffs”. Design agencies can create “teams” so that their designers can collaborate in one place.

  Dribbble also serves as a marketplace so if you’re a freelance designer looking for design jobs, then you should check the platform regularly.

  

  4. Adobe Capture

  Adobe Capture is a powerful vector converter that allows you to convert images on your mobile devices into patterns, color themes, types, brushes, and shapes. You can then proceed to use these assets in other creative tools like Adobe Photoshop and Illustrator.

  The tool allows you to convert an object or your entire photo into a vector graphic. You can adjust the contrast on the amount of detail you want to capture and also invert the black and white areas on the vector image.

  One of my favorite features is the ability to create custom palettes. You can pick colors from your photos to use in a project. You can take a photo and use the colors in it to create a palette. So if you see a visually pleasing design and don’t know what exact color it is, you can capture the image, and Capture will create a palette automatically for you.

  Other interesting features the app comes with is the ability to convert any part of your image into brushes, create kaleidoscopic patterns from photos, collect 3D textures, and create your own high-quality 3D (PBR) materials to use in Adobe Dimension.

  

  5. InVision Studio

  InVision Studio is an advanced prototyping and animation tool that allows you to create vector-based screen designs. Thanks to its flexible layers and infinite canvas, you can design workflows at incredible speeds. The tool allows you to create interesting prototypes, test your designs and make changes before the development stage, and also communicate your designs ideas with your team or clients.

  InVision Studio works on both Mac and Windows. You can import files from Sketch into InVision. Some of its interesting features are intelligent image cropping that automatically crops images as you change screen size. You can create a responsive prototype without writing a line of code, test an animation or prototype on your phone, create swipe triggers for animations that occur on scroll, and link several artboards into one animation.

  

  6. Wappalyzer

  Wappalyzer is a tool that allows you to find out what technology websites are built with. The best part is that it is free to use and you can look up any website. It comes with a free extension for Chrome, Edge, and Firefox that works locally and offline.

  The Wappalyzer API provides you instant access to a website’s technology stack, enriches your own datasets, and analyzes a large number of websites in real-time. You can perform up to 1000 lookups at once.

  

  7. W3C CSS Validator 

  W3C CSS Validator is a simple but effective tool that allows you to check the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. To validate a URL, all you need to do is put in the address and run the test. The tool also automatically detects character encoding and document type. You can also clean up Markup with HTML-tidy, group error messages by type, and validate error messages.

  

  8. Figma

  Figma is an online UI/UX design tool that allows teams to collaborate in real-time. With its interactive prototyping capabilities, you can create vector illustrations, design apps, and screens. Although it is a browser-based tool, there are versions that work on Windows and Mac.

  With Figma, you can create libraries with reusable components. When a component in the library is updated, changes would be automatically made to any design that uses that component. Team libraries are available on the paid version only. You can also generate CSS and SVG, iOS and Android code; export files as JPG, PDF, PNG, or SVG, and also import Sketch files. You can also automate repetitive tasks, create custom workflows, and bring in data using plugins.

  

  9. Proto.io

  Proto.io is a tool that allows you to create high-fidelity prototypes in real-time. With this tool, you can test your designs before you build. You can test flow, interactions, and animations without writing a single piece of code.

  The tool comes with customizable templates that help you create prototypes and wireframes easily. It also comes with a huge icon library (including animated icons) that can be resized and recolored. With its effect library, you can also add interactions, sounds, animations, and video files to your prototypes. Since it’s a 100% web-based editor, you don’t need to download any software.

  

  10. Startup 3

  Startup 3 is an application that helps designers and developers create Bootstrap website themes. It is a powerful drag and drop bootstrap theme builder to help you create landing pages. It has an easy to use intuitive interface with no learning curve.

  You get access to over 300 blocks of pre-coded and pre-designed elements and styles that you can easily customize. Designs from the app are automatically optimized for mobile and are compatible with all retina devices. It also integrates with other tools like Hubspot, MailChimp, Gmail, and Captcha. You can also export all your website designs (including image, text, and styles) directly to your PC.

  

  Source

• Popular Design News of the Week: June 15, 2020 – June 21, 2020

  Posted:Sun, 21 Jun 2020 10:45:39 +0000

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

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

  Online Tools I Recommend to Every Web Developer

  

   

  The 7 Habits of Exceptionally Creative People

  

   

  5 User Experience Goals to Enhance your SEO Strategy

  

   

  What Happens When a Graphic Designer Opens a Bar…

  

   

  Bootstrap 5 Alpha!

  

   

  Designing a Responsive Website for a Local Gym — a UX Case Study

  

   

  Worry Less About Spacing in Figma

  

   

  Remembering Windows 2000, Microsoft’s Forgotten Masterpiece

  

   

  4 Visual Principles for Junior Designers

  

   

  Benefits of Digital Illustration in Web Design

  

   

  Building ADA-Compliant Websites: Most Common Accessibility Issues

  

   

  The Anatomy of a Dev Team

  

   

  The Most Important Thing your Clients Should Know About their Website

  

   

  15 Best Photoshop Actions to Create Spectacular Dispersion Effects

  

   

  Adobe Flash Player End of Life: December 31

  

   

  A Guide to Measuring the User Experience

  

   

  Meet Orwell, Russia’s Cute and Totally not Sinister New Facial Recognition System for Kids

  

   

  203+ Web Design Resources You’d Actually Want to Use (& Bookmark)

  

   

  15 Amazing Examples of Clean Web Design for your Inspiration

  

   

  Design Exercises are Evil

  

   

  Inclusively Hiding & Styling Checkboxes and Radio Buttons

  

   

  A Comprehensive Guide to Notification Design

  

   

  10 Exceptional Product Design Portfolios with Case Study Breakdowns

  

   

  The Badass Project

  

   

  The Customer Journey Through Automated Email

  

   

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

  Source

• How To Benefit From Mental Models in UX Design

  Posted:Thu, 18 Jun 2020 10:45:08 +0000

  Users come to your website with certain expectations already in their mind; they’ve seen thousands of other websites before and it’s only natural that they’ve adopted certain habits.

  Instead of trying to change these patterns, it’s much better to incorporate them into your design. To learn more, let’s have a closer look at a psychological concept known as mental models. 

  What Are Mental Models?

  Before we move on to examples, we’ll go through the definition real quick. Rooted in philosophy and psychology, the term mental model is now commonly used to describe human-computer interaction. It describes how the user already has an idea about how something works. In other words, it’s a representation of what the user knows about the website before they even start using it. 

  it’s a representation of what the user knows about the website before they even start using it

  Nielsen Norman Group, an acclaimed research institute, has examined the topic in more detail. They emphasize an important aspect of this definition: a mental model is not factual; it’s only based on the beliefs and predictions that come from the user’s previous experiences. Because of that, every user has different mental models. The background varies from person to person. Of course, it’s often similar, but never exactly the same.

  Now that you have an idea of what a mental model is, it’s time to move on to the main topic: how does this concept apply to web design? 

  How Mental Models Affect Web Design

  We use a wide range of digital products every day. Based on these interactions, our brains have developed a variety of mental models for interfaces.

  This is clearly visible in the case of kids who have been raised using touchscreens. You might have seen a small child that’s pretty fluent with a tablet and a mobile phone, but when you give them a book, they will try swiping too. It’s because they’re already familiar with one pattern and they’ll automatically apply it to other objects that look similar or have a similar function. 

  As adults, we’re just as prone to similar patterns. We’re living with certain beliefs about web pages. Some of them have been with us for years, such as:

  • Links should be underlined or displayed in a different color;
  • The logo of the company is in the top left-hand corner;
  • The sign-up button is in the top right-hand corner.

  The last two rules are clearly visible in the way people read websites. You’ve probably heard about the F-pattern, yet when it comes to most websites with little text, the Z-pattern proves to be more common.

  The user scans the website, starting from the logo, through the navigation bar, all the way to the CTA. Visitors expect to find certain elements in certain places. Any deviation from this proven and tested design can lead to confusion and, eventually, lower conversions. 

  Have a look at these real-life examples to see how it works:

  

  

  

  Although the placement of the sign-up button varies slightly depending on the design, these landing pages coming from top software companies prove that the Z-pattern is alive and well. 

  Mental Models and Jakob’s Law

  No matter how much you love your creation, you need to face the facts: your users spend the majority of their time on other websites. This is the main idea behind Jakob’s Law, a principle created by Jakob Nielsen of the Nielsen Norman Group. 

  Although it may sound like a limitation at first, this law is not a boundary to your creativity. Instead of being a restriction, it can make your work much easier. Jakob’s Law saves you from reinventing the wheel. You can stick to recognized solutions and focus on optimizing the little details that make the difference. Doesn’t that sound good? It’s like someone has already done the legwork for you. Apart from mental models, there’s still a lot of work to do, from content design to little visual touches. 

  Mental Models in the Redesign Process

  ‘Better’ can be an enemy of ‘good’. Every redesign process comes with certain risks. Even though you’re doing your best to improve the user experience, every change means you’re challenging the user’s existing mental models. 

  You may get it right, but you might also get it terribly wrong. One of the most prominent examples of redesign fails comes from Snapchat. As reported by TechCrunch back in 2018, they decided to change the whole navigation in the app:

  

  Most users were annoyed with the new information architecture. Public Stories got mixed with private Messages. What’s more, they weren’t displayed chronologically anymore. This new order caused confusion and led to huge frustration, resulting in 83% of App Store reviews being negative. The change turned out to be too drastic; it required the users to change their mental models quite dramatically. 

  Although not perfect, the old version of the app answered the users’ needs. There was no point in redesigning the whole experience just for the sake of creating something new. This decision also had a negative impact on Snapchat’s revenue. After a period of stable growth throughout 2017, the earning in the first quarter of 2018 fell by 20%. 

  There is another side to the story. Although Snapchat failed to focus on existing mental models, it has done a fantastic job when it comes to introducing new ones. The app was the first one to create the widely known interface for Stories:

  

  Snapchat’s interface

  This one was simple and intuitive – and that’s why Instagram and Facebook Messenger have both adapted it successfully:

  

  Instagram’s copy

  

  Facebook’s version

  And so we’re faced with the big question: how do you get it right?

  How to Learn About Your Users’ Mental Models

  Honest research is the answer here. One of the most popular methods is card sorting. The idea is simple: users see a list of elements of the website, and they’re supposed to assign them to different categories. You can use different types of card sorting for your research:

  • Closed card sorting – You present the users with given categories that have been established before the exercise.
  • Open card sorting – The research participants are supposed to assign the elements into groups that feel right. The difference is that the users create the categories and their names themselves.
  • Hybrid cart sorting – In this case, users work with pre-made categories but they can also add extra ones if they think that’s needed. 

  

  If you’re looking for other affordable yet effective methods, you might want to try session recordings. Session replay tools allow you to see how the visitors are interacting with your website. You can see mouse moves, scrolls, taps, and clicks, just like you’re sitting next to the user.

  

  Apart from session recordings, you can also use heatmaps to see which parts of the website are most popular. As mentioned above, analytics tools track mouse movements and clicks, which allows for a quite accurate illustration of certain behavioral patterns.

  

  Last but not least, it’s always best to talk to your users. Surveys, user testing, or even focus groups are all goldmines of valuable information. Although this requires more effort, it’s sure to pay off in the long run. Users are often aware of their own mental models, and they’re more than happy to talk about their needs and habits. 

  Why not use this opportunity to make life easier for everyone? Researching mental models can be a source of interesting insights and inspiration too. I highly encourage you to dig deeper!

   

  Featured image via Unsplash.

  Source

• 8 BeTheme Pre-Built Websites You Can Edit With Elementor

  Posted:Tue, 16 Jun 2020 14:00:00 +0000

  Let’s be honest: the WordPress classic editor wasn’t the easiest solution for building great-looking websites. While Gutenberg has helped, page builder plugins like Elementor are responsible for making a it much easier for any WordPress user to build a powerful and professional website on their own.

  As a result, users want to know that the theme they’re going to use is compatible with at least one of the leading page builder solutions. 

  That’s why we’re excited to announce that BeTheme now allows users to work with three of the leading page builder plugins: 

  1. Elementor
  2. Muffin Builder 
  3. WPBakery Page Builder

  

  This kind of versatility is unmatched and it should allow basically anyone to build a website with BeTheme. Want even better news? 

  BeTheme has a variety of pre-built websites already set up with Elementor, taking even more of the work out of building a website. 

  8 BeTheme Pre-Built Websites You Can Edit With Elementor

  Why should you care about Elementor’s integration with BeTheme?

  It’s because it practically eliminates most of Be’s learning curve, which was already super friendly to use.

  And if you spend less time trying to figure things out by using tools that you already know and love, you can get a website up and running much more quickly.

  If you’re interested in being able to edit with Elementor, let’s take a better look at what you can do with 8 of our pre-built sites today.

  1. BeAI Makes a Complex Subject Easier to Relate to

  This is the BeAI pre-built website:

  

  As you can imagine with something like artificial intelligence, it’s not easy for consumers to instantly grasp such a complex concept, technology, or product. But if you design your website so that it looks sharp but still grounded, you can make it feel more inviting.

  

  With the help of Elementor and this pre-built site, it’s very easy to create a sophisticated and relatable design that enables users to focus on the content without getting overwhelmed by the tech.

  2. BeApp Brings Technology to Life

  This is the BeApp pre-built website: 

  

  Similar to BeAI, the design takes the focus off the complexity of the technology and instead puts it on what users can accomplish with the app. 

  

  In both of the screenshots here, there are animated elements. In the first, you’ll find concentric circles pulsing outwards from the runner’s body. In the second, you’ll see that the device’s screen is glowing. It’s a neat design choice and one that brings something like the act of running (with an app) to life. 

  3. BeConsultant Adds Subtle Surprises to an Otherwise Predictable Website Visit

  This is the BeConsultant pre-built website: 

  

  There’s nothing wrong with creating a website that’s minimally designed — especially if the goal is to get visitors to read your message and get in touch. However, sometimes your website needs just a tiny kick to get visitors to take notice at the right time. 

  

  In the case of this pre-built site, you can use Elementor’s animated blocks — like the Counter — to add a little movement to an otherwise static website and make sure prospects stay engaged.

  4. BeEstate Provides Visitors With a Tour-Like Experience

  This is the BeEstate pre-built website: 

  

  When you’re trying to sell a luxury item — or, at the very least, get people to sign up for an in-person look at it — you need your website to have that same next-level feel. 

  

  Although an effect like this (which is a layered parallax scroll) might be difficult to reproduce on your own, the pre-built site has done the hard part for you. All you need to do is edit the background with Elementor and swap in the image you want to slowly reveal to visitors as they scroll. 

  5. BeFinance Translates Stability into Geometry

  This is the BeFinance pre-built website: 

  

  When building websites for industries where there’s an element of risk involved (like finance), you want to do everything you can to make visitors feel at ease. 

  Although it’s ultimately up to your client to provide a secure experience or product their customers can trust, there are things you can do with design to help move that along. 

  

  In the case of BeFinance, you can see that there are a lot of geometric shapes in play — beyond the typical CTA buttons we usually see. Geometric shapes often convey a sense of stability and security. It might not outright scream “You can trust us!”, but it’ll be there in the background to help reinforce that idea.

  6. BeGrocery Gives its Products Room to Shine

  This is the BeGrocery pre-built website: 

  

  Although this site is built for a grocery delivery service, a website like this would work equally well for any ecommerce or online ordering website. 

  

  Notice how clean and clear the interface is, making it easy for products to shine through? While BeGrocery has done the work of laying out your products and categories, Elementor makes it easy to edit how your inventory is displayed. 

  7. BeLoans Calls Visitors’ Attention to Eye-Catching Elements

  This is the BeLoans pre-built website: 

  

  With a business built around something as sensitive and stressful as requesting a loan, the last thing you want is for your website to create any doubt or fear in the minds of visitors. One of the reasons this particular design works is because of the friendly color palette. 

  

  Another reason it works so well is because of how simple it makes the whole thing feel. And if you want to change the terms of the loans, making an edit with Elementor would be a breeze, as you can see in the example above.  

  8. BeRenovate Gives Visitors a Peek at What’s to Come

  This is the BeRenovate pre-built website: 

  

  What’s interesting about this design is its fusion between illustrations and photos. Before you look below, take note of the house shapes floating around “From A to Z renovation”. 

  Now, look at this: 

  

  Whenever photos are introduced to the page — to give visitors a peek at what’s in store for them — they’re tucked inside those same house-shaped outlines. It’s a creative way to merge a unique illustrative design with real-world photographs that visitors can relate to.

  Get your Elementor-compatible BeTheme pre-built website today

  There’s a reason why millions of WordPress users (from first-time users to professional web designers) rely on Elementor: 

  It’s insanely easy to build a website that looks like it took weeks to create. 

  Thanks to Be’s developers, you won’t even have to worry about the building part. All you need to do is pick the pre-built site you like and then edit it with Elementor according to your client’s needs.

  Once you’re signed up for BeTheme, you’ll find your Elementor-compatible BeTheme pre-built sites here:

  

  Just look for the ones with the Elementor icon in the top-right corner.

  Sounds too easy, right? It totally is.

   

  [– This is a sponsored post on behalf of BeTheme –]

  Source

FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.