Articles

17 Tools I Can’t Design Without

,

I think of a creative practice as a combination of an approach (a design philosophy) and a series of techniques (craft skills); a good tool facilitates a technique, which in turn supports an approach.

It wasn’t until I sat down to write a list of tools I can’t design without, that I realized just how many tools I rely on as an integral part of my creative process. The danger of tools is that they promote certain techniques, and that bias can alter your approach.

First and foremost a good tool does no harm, it does not dictate, or obstruct your approach. Secondly, a good tool offers flexibility in the techniques you choose. Thirdly a good tool is invisible, it leaves no marks on the end product.

If I’d written this post a year ago the list would have been different, and I hope that in a year it will be different again. These are the tools that I currently find enabling, that have contributed to my craft, and supported my approach.

Affinity Designer

I’ve always used Adobe products. Photoshop and Illustrator were the de facto graphic tools for half my life. I’ve never had an issue with the subscription licensing of Creative Cloud, which I think is proportionate for a professional set of tools. Then, around 18 months ago I got very frustrated with how sluggish Illustrator had become.

I’d written an early review of Affinity Designer, I’d been impressed at the time, so I decided to give it another try expecting the sojourn to last an hour or two before I gravitated back to Illustrator. Running the latest version of Affinity Designer was a revelation, I’ve simply never wanted to switch back.

Why not Sketch? Well, I do occasionally jump into Sketch, especially for pure vector wireframing. I was an early adopter of Sketch, but the reliability issues (long since resolved) poisoned my relationship with it. Why not Figma? Well, Figma’s real strength is in collaboration, something that I get with Sketch, and personally I find some of Figma’s features unintuitive.

Affinity Designer isn‘t perfect. I dislike the color tools, especially the gradient tool, which I find clunky. But it’s the first design app I’ve used in years that syncs closely with my creative process.

Affinity Photo

I don’t do a lot of photo manipulation, so when I switched away from Creative Cloud for design work, I was relaxed about switching from Photoshop to Affinity Photo.

In my experience, Affinity Photo is stronger than Photoshop in some areas, and weaker in others. Affinity Photo’s bitmap scaling is much better than Photoshop’s, largely due to Lanczos 3 sampling.

Affinity Photo also solves a lot of little irritations that Adobe has chosen not to address for legacy or philosophical reasons, such as the toggleable ratio setting when resizing the canvas — I’ve lost track of the hours I’ve spent in Photoshop manually calculating vertical whitespace so that it’s proportionate to the horizontal.

TinyPng

Both Affinity Photo and Photoshop are poor at web format optimizations. Photoshop perhaps has the edge, but its output certainly isn’t acceptable for production.

I run bitmaps through TinyPng, which on average halves the size of the file without any appreciable loss of quality. (It stripped 66% off the images for this post.)

Fontstand

When I started to drift away from Creative Cloud, the one service that delayed me was Adobe Fonts (née Typekit). Not so much for the webfonts — which are faster and more reliable self-hosted — but for the ability to sync desktop fonts into my design apps.

I tried Fontstand when it was first released, and I loved the concept, but was worried about the small library. When I took a second look and discovered the library is now substantial for both workhorses and experimental typefaces, it was an easy decision to switch.

Fontstand is a desktop font rental service. Once you’ve found a typeface you’re interested in, you can activate an hour-long trial, then choose to rent the font for a small fee. You can auto-renew the rental if you need to, and if you rent the font for 12 months it’s yours forever.

If there’s one tool on this list I genuinely could not design without it’s this one. Fontstand makes working with fonts from independent foundries affordable for freelancers, and it’s enriched the typographic palette available to me.

Khroma

Every designer has strengths and weaknesses. Since day one of art school, my weakness has been color. It just doesn’t come naturally to me, and I have to work quite hard at it.

An incredibly helpful tool that I’ve been using for a few months is Khroma. It helps my eyes warm up before approaching color, and helps me find a starting point that I can then refine. Comparing my design work before, and after Khroma, the latter color choices are cleaner, more vibrant, and more interesting.

Atom

A good code editor is essential, and I’ve never found one that I’m completely happy with. For years I’ve flitted back and forth between Brackets, Sublime Text, and BBEdit. I think that probably reflects the changes in the type of coding I’m doing.

For now, I’ve settled on Atom. It’s fast, reliable, and it’s not biased to front or back-end code.

CodeKit

I held out on compilers longer than I should have, using apps like Minify to minify CSS and JavaScript, and the command line to process Sass (see below). Then I found CodeKit and it’s been essential to my workflow ever since.

What I like best about CodeKit is that it’s a GUI. Which means I can change settings while coding, like toggling off the JavaScript linting, without switching mental gears into another language.

MAMP

MAMP is a tool that allows you to run a local server environment, meaning I can run PHP and MySQL without the tedious process of FTPing to a server to test a change. Mac comes with Apache, so this isn’t strictly necessary, but it’s simple to use and works well with both CodeKit and Craft (see below).

There’s a pro version of MAMP, which allows you to switch seamlessly between projects, but it’s heavily geared towards WordPress. I’m still trying to find the time to evaluate Laravel Valet.

Dash

When you first start coding you try and memorize the entire language. It’s very possible to become fluent in the core of a language, but there are always nuances, defaults, and gotchas that you miss. As you grow more experienced, you realize that all professional coders Google the answer at least once per day.

When I got tired of Googling I started using Dash which is a superb app that combines the docs of numerous different languages into a searchable window. I use it daily for everything from SVG to Twig.

LambdaTest

It doesn’t really matter what you’re building, even the indy-web needs to be tested. Ideally you’ll test on real devices, but if you can’t afford a device library — and who but the largest agencies can — you need a live testing solution.

There are a few upstarts, but your choice is basically between BrowserStack and LambdaTest. I went for LambdaTest because I prefer the style of the UI, but that’s entirely subjective. If you’re not sure, toss a coin, you’ll get the same results with both.

Sass

I can’t write CSS without Sass — and I mean that literally. If I try and write vanilla CSS I guarantee I’ll nest something with @at-root and it will throw an error.

Craft CMS

Stating any preference for a CMS online that is not WordPress inevitably invites impassioned protests from developers whose career is built on the WordPress platform. So let me say preface this by saying: if WordPress works for you, and more importantly for your clients, then more power to you; I think it’s a dog.

Shopping around for a CMS is challenging, and I’ve gone through the process several times. A good CMS needs to be in sync with your mindset, and it needs to be appropriate for your clients — all of them, because unless you’re in a large agency with multiple coders, you need to commit to a single solution in order to master it.

I have looked and looked, and finally settled on Craft CMS. Craft makes it easy to build and maintain complex, high-performance sites. It has a shallow learning curve that grows exponentially steeper, making it easy to get started with plenty of room to grow.

Vue.js

Way back when Flash went kaput I switched to jQuery, and that was a really easy route into JavaScript — ignore the people who tell you to master the core language first, do whatever it takes to start using a language, that’s how you learn. But jQuery is heavy, and I found I needed it less and less.

These days 90% of the JavaScript I write is progressive enhancements in vanilla JavaScript to keep the dependencies low. Occasionally I encounter a job that requires complex state management, and then I fall back on Vue.js. JavaScript developers are as partisan as CMS aficionados, so let’s just say I favor Vue.js because it’s not controlled by a mega-corp and leave it at that.

Ulysses

As editor at WDD, I cannot emphasize enough that the right way to write copy for the web is markdown.

Markdown is faster to write so you don’t lose the thread of your thought process, and it doesn’t impose formatting so you can easily migrate to a CMS. If you’ve ever spent 20 minutes stripping the class, id, and style tags out of a file created in Word, Pages, or (by far the worst offender) Google Docs, then you don’t need to be sold on this point.

There are a few markdown-based writing apps available, I tested half a dozen, and the one I settled on was Ulysses. I like its distraction-free mode, I love its clean exports. Everything I write, I write in Ulysses.

Screenshot Plus

Much like markdown editors, there’s no shortage of screenshot apps. My current favorite is Screenshot Plus.

Screenshot Plus has one feature that makes it standout for me, and that is its Workflows. It sounds like a small problem, but when you’re taking screenshots of a dozen sites, the extra clicks to save, switch to your editor, and open the file are laborious. I have several workflows setup in Screenshot Plus that allow me to take a screenshot, save it to a specified folder on my local machine, and then open it in Affinity Photo, all with a single click.

Spark

I get a lot of email, a lot. At one point the influx was so bad I was using multiple email apps to segment it. Yes, I use Slack daily, but it doesn’t eliminate the need for email.

I‘ve been using Spark for around six months and it’s radically sped up my workflow. I’m a big fan of the smart inbox that allows me to compartmentalize email like newsletters, and email that warrants a reply. I like that I can switch to a chronological list if I’m looking for something specific. I love the ability to pin, or snooze messages, which helps me triage my inbox.

Todoist

I’m one of those people who can’t make it through the day without being organized. I need lists and sublists, and I need something native that opens automatically when I boot my Mac, and something that sits on the home screen of my Android.

There are as many to-do apps as there are things to do. When I’m working in a team I’ll use whichever task-tracking system it prefers. But by choice I always use Todoist thanks to its balance of simplicity and power. At this point it’s something of a meta-tool, and the app I open first every morning.

Source


Source de l’article sur Webdesignerdepot

/par

Quality Sense Podcast: Mobile App Performance With Sofia Palamarchuk

,

In today’s Quality Sense episode, Federico Toledo sits down for a chat with a colleague and friend, Sofia Palamarchuk. She’s a Director and Board Member of Abstracta and the co-founder and CEO of Apptim, a tool that helps you to test and analyze native mobile app performance.

After beginning her career as a performance engineer at Abstracta, she led our expansion to the United States – heading up business development. After seeing the challenges that mobile development teams face, in 2019, she embarked on a mission to transform the way global mobile teams create quality apps.

Source de l’article sur DZONE

/par

Translate your Enterprise apps in 1 second

,

I must have seen dozens of implementations of this exact same web app during my 25 years as an Enterprise developer. And to be honest with you, I’m tired of implementing the exact same app, over and over again. "Don’t reinvent the wheel" comes to mind. Hence, I decided I wanted to create a "micro service web app", providing me with all translation features I could possibly need in the future. And more interestingly, I will create the entire app, in 1 second, by simply clicking a button. If you don’t believe me, feel free to watch the following YouTube video, where I demonstrate how I solve all my translations needs, for the rest of my life, in 1 second.

The SQL script I am starting out with can be found below.

Source de l’article sur DZONE

/par

Explaining the Difference Between Web and Mobile App Testing

,

If a product has a web and a mobile version of an application, their functionality is almost identical. The app QA process, however, will flow differently for each platform due to their particularities.

A mobile application has become an umbrella term that covers three different types of apps – native, PWA, and hybrid. Each is coded in a specific way and has some distinctive features. 

Source de l’article sur DZONE

/par

Exciting New Tools for Designers, July 2020

Some of the changes we are seeing with where we work are starting to pop up in the type of new tools made for designers and developers. More tools with remote collaboration as a key feature are increasing in popularity. (You’ll find a few of those here.)

Here’s what new for designers this month.

Webdesign Toolbox

Webdesign Toolbox is a collection of tools, apps, and resources all in one location for designers and developers. The best part of this resource is that it is human-curated, so every tool is quality checked and makes the list because it has been tested and researched. Search the collection by design, dev, stock, typography, UX, or workflow tools (and more) and use them to help create more efficiently. The collection is constantly growing, too.

CodeStream

CodeStream might be the new-world workflow tool for web designers and developers. It is made for remote teams to review code right inside your IDE without breaking from development flow. You can post and review changes and comments are all independent of the code itself, even though they link to it.

Litur

Litur is a color management app for iOS. Use it to find and collect color swatches, create custom palettes, and even check color combinations against accessibility standards. The app can even generate color codes for you from swatches you find from a photo or image upload or create. The app works on mobile and desktop Mac devices and is a paid app.

Editor X

Editor X, which is still in beta, is a website building tool that combines advanced design and prototyping capabilities with secure web hosting and integrated business solutions. Go from an idea straight to production in a highly intuitive design workspace. The best feature might be exact design precision tools.

Grid Cheatsheet

Grid Cheatsheet is a visual and code-based set of “cheats” based on the W3C CSS Grid Specifications. What’s nice is it makes these guidelines easier to understand and use if reading through them makes you a little uneasy.

Tutorialist

Tutorialist brings together some of the best development tutorials on the web. All of the tutorials are free videos available on YouTube, and this project collects them all in one place.

Pure CSS Halftone Portrait from JPG

Pure CSS Halftone Portrait from JPG is a beautiful pen from Ana Tudor that shows how to change the visual representation of an image. The examples are brilliant and in true halftone fashion. The code snippet works with color, or black and white images as well.

VoiceText for Slack

VoiceText for Slack is another work from home productivity tool. Integrate it with Slack and send messages with text that’s transcribed right in your channels. It’s a free integration and supports 18 languages.

Feature Peek

Feature Peek is a developer tool that helps you get frontend staging environments on demand and gather team feedback earlier in the development process. It’s made for use with GitHub and works with a variety of other tools as well.

Formbutton

Formbutton is a simple and customizable pop-up form. (And we all know websites have plenty of them right now.) It connects to other services you already use, such as Google Sheets and MailChimp, and is simple to set up.

Blocksy Theme

Blocksy is a WordPress theme that’s made for non-coders. It’s a zippy and highly visual theme made for Gutenberg. It works with other builders and allows the user to customize pretty much everything visually. (There’s even a dark mode.) The theme is packed with tools and options and is a free download.

Oh My Startup Illustrations

Oh My Startup Illustrations is a set of vector illustrations in several categories featuring a popular style on many projects. Use the characters and scenes to create a semi-custom story for your startup project.

1mb

1mb is a code editor and host where you can create a static website with a custom domain and SSL included. The editor works in-browser and everything is saved in the cloud.

Linear

Linear is an issue tracking Mac app for teams. It’s designed to help streamline software projects, sprints, and tasks, and can integrate with standard tools such as Github, Figma, and Slack.

Hosting Checker

Hosting Checker solves a common issue – a client wants you to work on their website, but has no idea who hosts it. Hosting Checker shows the user hosting provider and IP address the website uses, along with where its server computers are located and the host’s contact details. It also claims to be 82% faster than other similar tools.

Spike

Spike alerts you to website incidents before customers. Create alerts and get a phone call, text message, email, or Slack notification right away. The tool provides unlimited alerts and integrations to you can stay on top of issues before they become real problems.

Magnus UI

Magnus UI is a framework that helps you building consistent user interfaces in React. It comes with plenty of components ready to use and you can customize the theme.

SpreadSimple

SpreadSimple uses data in Google Sheets to create styled websites with features such as filtering, search, sorting, cart, order collection via forms, and much more. Update the sheet and instantly see changes on the website.

WebP vs. JPEG

Google is starting to suggest using it’s WebP image format to decrease load times, because of the lighter file size. But is WebP better than the traditional JPEG? Developer Johannes Siipola tested the file types at different sizes to answer the question. The answer is a bit complicated, but sometimes it might be better; read the full analysis for more.

Oh Dear

Oh Dear is a website monitoring tool that can help you keep a check on websites. Monitor uptime, SSL certificates, broken links, and more with notifications that come right to you if there’s an issue.

Airconnect

Airconnect is a Zoom video conferencing alternative that you can use for your brand with a custom header, colors, and portal for clients. The tool includes video calling as well as the ability for customers to access their data and automate your onboarding process.

Free Faces

Free Faces is a curated collection of free typefaces that you can browse and use in projects. Search by type style with visual results that include a download link.

All the Roll

All the Roll is a fun novelty font for just the right type of project. It includes 167 characters with swash characters that can be added before or after certain letters.

Backrush

Backrush is a handwriting-style typeface with easy strokes and a pen-like feel. It includes thicker letterforms with nice swashes and a full character set.

Thuner

Thuner is a slab display font with interesting quirks. It’s made for larger than life designs. It includes a full uppercase character set and numerals.

Source


Source de l’article sur Webdesignerdepot

/par

Why Do Websites Look the Same (And Should We Care)?

If we don’t question this kind of design homogenization, do we put ourselves at risk of perpetuating the same mistakes in the years to come? Or is it even a mistake to begin with?

Today, I’m going to look at four things that are likely causing this, and what you can do to break the mold.

1. Education

We used to have a design school in every city in the world, each with its own design style or, at the very least, the encouragement of its designers to be creative and come up with something new.

These days, though, traditional design education isn’t as popular as it once was. According to Design Census 2019, only about a third of working designers have a formal education and degree:

The rest have been trained through a variety of means:

  • Online learning (17%)
  • Self taught (12%)
  • Workshops (10%)
  • Mentorship (6%)
  • Certificate programs (4%)

Cost and convenience are definitely two factors influencing this shift towards online learning methods. And with a wealth of resources online to teach them how to design and code, why not go that route? Plus, designers have to keep learning new things in order to remain competitive, so it’s not as though a degree is the be-all and end-all of their design training.

Plus, there isn’t as much demand for it from employers. Unless you plan on working for one of the top global marketing agencies, many hiring companies just want to see proof in the form of a portfolio and maybe have you do a test job.

Now, I’m not saying that online courses and other informal design education don’t foster creativity. However, in order to make them cost-efficient and quick to get through, they have to focus on teaching essential best practices, which means less room for experimentation. Perhaps more importantly, their curriculums are guided by fewer voices. So, this could likely be one of the culprits.

2. Design Blogs and Vlogs

You have to wonder if all the design blogs out there (yes, like Webdesigner Depot) impair designers’ ability to break free from the homogeneity of websites.

I think the answer to that is both “yes,” and “no”.

Why, Yes?

What is the purpose of a web design blog? Mainly it’s to educate new and existing designers on best practices, new trends, and web standards.

By their very nature, they really should be teaching web designers the same kinds of things. Let me show you an example.

This is a Google search for “web design trends 2020”:

Most design blogs will publish trends predictions around January 1. And herein lies the problem. The writers/designers can only deviate so far from what we know to be true when writing on the same topic… so these sites end up with similar recommendations.

For instance, the top search results recommended similar things for 2020:

  • Dark mode
  • Hand-drawn illustrations
  • Immersive 3D
  • Glowing colors
  • Minimalist navigation
  • Geometric shapes
  • Inclusivity
  • Accessibility

When web designers receive the same guidance no matter where they turn, it’s only logical that they’d end up creating websites that adhere to those same practices.

Why, No?

Because I write for web design publications, I can tell you that there’s a big difference in the kinds of content some of them publish.

For instance, I find that WebDesigner Depot isn’t interested in rehashing what everyone else is writing about this month. We’re given topics that challenge us to think outside the box and present readers with meaningful insights and recommendations.

So, I think that finding design blogs that push the boundaries and don’t just want to recap what everyone else is saying is really important. That’s how web designers are going to master the basic skills they need to succeed while getting inspired to try new things.

3. Designs Tools and Frameworks

This is another one that’s not as cut and dried. I think it depends on the tools used and the intent to use them.

Where Issues Start to Arise

There are certain site builder solutions that you’re going to be hard-pressed to create something innovative with. The same goes with using templates from sources like Dribbble. It’s just the nature of the beast.

If your goal is to create a cheap website very quickly for a client, then you’re probably going to use a cheap builder to do so. With ready-made templates and a lot of the work already done for you, you can create something that looks good with little effort.

When you’re limited by time and cost, of course you’re going to rely on shortcuts like cheap site builders or boring (but professional) design templates.

How to be More Careful

You can run into these kinds of issues with more flexible content management systems like WordPress or frameworks like Bootstrap, too.

Whenever you rely heavily on ready-made templates, pre-defined styles, or pre-built components, you run the risk of someone else’s work informing your own.

The solution is simple: Use demos, templates, UI kits, and so on as a base. Let them lay down the foundation that you work from.

But if you want your website to look different from the sea of lookalikes, you’re going to have to spend much more time developing a unique visual style that’s equally as effective in its mission. Which also means moving beyond clients that have small budgets or low expectations.

4. User Data

Data gathering is an important part of the job you do as a web designer.

You research the target user (or the existing user, when applicable). You look at industry trends as well as the competition to formulate an idea of what you need to build and how you’re going to do it. And you also use resources like Nielsen Norman Group and Think with Google that put out definitive research on what users want.

Even with the most niche of audiences, consumers’ wants and needs are all basically the same. So, obviously, you have to design experiences that align with them. If you deviate too much from what they expect from your site or brand, you run the risk of creating too much friction.

Is This a Bad Thing?

It’s not in terms of usability. If we build simple, predictable and user-friendly interfaces based on data that successfully drive visitors to convert, that’s great. So long as the content remains strong and the UI attractive, there’s nothing wrong with that approach.

But…

This is the same issue presented by templates and site builders. If you do exactly what’s needed and not much more, your site is going to look and act just like everyone else’s. Which comes at the cost of your brand reputation.

Just look at Google’s Material Design. This design system may have made it easier for web and app designers to create new solutions that were user-friendly and responsive, but there was just too much spelled out. And this led to a slew of Material Design lookalikes everywhere you turned.

This is the whole reason why companies take the time to craft a unique selling proposition. Without a USP, brands become interchangeable in the eyes of consumers.

So, again, my suggestion here is to use data to formulate a strategy for building your website. But don’t forget to spend time adding a unique style, and voice of the brand to the site.

Wrap-Up

It seems like, despite all that we’ve learned to do, websites are becoming less and less diverse in terms of design. And I think a lot of that is due to the fact that it’s much easier to design websites today than it was ten, or even five years ago.

Modern-day education, resources, tools, and consumer data take a lot of the questions and the work out of building websites. Which is good… but only to a point.

Unless you’re building websites for clients who have absolutely no budget, you can’t afford to skimp on the creativity and personalization that will set their website apart. Yes, you need to adhere to tried-and-true practices and standards, but beyond that, you should be experimenting.

 

Featured image uses photo by Kari Shea.

Source

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

Source de l’article sur

/par

Diversity Initiatives in Web Design

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

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

Why the Lack of Diversity in Web Design?

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

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

Girls Who Code

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

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

Adobe Design Circle

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

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

Ladies that UX

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

Xuntos

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

Colorintech

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

UKBlackTech

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

Witty Careers

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

Featured image via Unsplash.

Source

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


Source de l’article sur

/par

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

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

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

Source de l’article sur

/par

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

,

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

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

Source de l’article sur

/par

SAP Business Technology Platform: Un trio entre excellence, intégration et extension des données

, , ,

WALLDORF, Allemagne – 18 juin 2020 – SAP SE (NYSE : SAP) a annoncé aujourd’hui de nouvelles capacités, des améliorations et une plus grande unification du portefeuille Business Technology Platform pour aider les entreprises à transformer les données en valeur commerciale.

La plateforme technologique de SAP permet aux développeurs et aux utilisateurs d’accéder à des services et des outils intégrés de bout en bout pour réaliser une valeur ajoutée dans trois domaines essentiels de l’informatique : l’excellence des données, l’intégration des processus et leur extension.

L’annonce a été faite lors de la conférence SAPPHIRE NOW® Converge, qui se tient en ligne du 15 au 19 juin 2020.

« De nombreux clients avec lesquels j’ai échangé ont exprimé le besoin d’agilité et de rapidité d’exécution, rendu encore plus urgent par la pandémie COVID-19 », a déclaré Juergen Mueller, CTO et membre du conseil d’administration de SAP. « Pour réaliser ces deux objectifs, la technologie devient encore plus importante, et SAP peut aider à relever ces défis. Nous avons apporté des améliorations significatives à chaque composante majeure de notre plate-forme technologique pour aider les clients de tous les secteurs à surmonter les obstacles liés à l’omniprésence des données, à la complexité des technologies de l’information et à la volatilité des affaires ».

Des organisations telles que Parkland Health and Hospital System à Dallas utilisent la SAP Business Technology Platform combinée à la Qualtrics® XM Platform pour la gestion de l’expérience ainsi que prédire l’activité et les ressources nécessaires pour l’accueil et le suivi des patients, un besoin critique pendant la crise COVID-19.

« À Parkland, nous nous consacrons à la santé et au bien-être des individus et des communautés que nous adressons en fixant la norme d’excellence pour les systèmes de santé publics et universitaires », a déclaré Scott Harrison, directeur des données du système de santé et des hôpitaux de Parkland. « Notre personnel clinique utilise des tableaux de bord numériqiues construits avec la Business Technology Platform de SAP pour l’analyse et la planification, et la plate-forme Qualtrics XM pour l’analyse des sentiments. Nous estimons qu’un socle technologique totalement intégré est essentiel pour les plus de 240 000 patients des urgences que nous soignons chaque année, et pour soutenir notre croissance et nos innovations futures ».

L’unité commerciale Henkel Adhesive Technologies, leader mondial des adhésifs, des mastics et des revêtements fonctionnels, met au point une application pour ses quelques 4 500 représentants commerciaux, basée sur la SAP Business Technology Platform. « Nous voulons créer un environnement de travail numérique moderne et efficace, en augmentant la vitesse et l’efficacité des activités de vente et en renforçant ainsi l’expérience des clients dans le monde entier », a déclaré Sascha Latzberg, Directeur Sales & Channel Excellence CRM chez Henkel Adhesive Technologies. « Notre plateforme numérique CRM nous permet d’être rapides et flexibles et accroît l’indépendance des représentants commerciaux qui se déplacent et travaillent depuis leur domicile. Avec l’aide de la SAP Business Technology Platform et de nos analyses avancées, nous pouvons exploiter les données CRM pour obtenir des informations qui nous aident à créer une valeur ajoutée pour nos clients ».

Que ce soit sur site, dans le cloud ou dans un modèle hybride, la SAP Business Technology Platform permet aux entreprises de :

Excellence des données

Cette année marque le dixième anniversaire de SAP HANA, qui compte désormais plus de 32 400 clients. La dernière version, SAP HANA 2.0 SPS 05, devrait être livrée à la fin du mois de juin. Elle prendra en charge des scénarios hybrides avec la plate-forme de données SAP HANA Cloud et offrira de nouvelles fonctionnalités, notamment l’extension de stockage natif SAP HANA améliorée pour simplifier la gestion des données et réduire le coût total de possession. Selon les prévisions d’IDC, les clients de SAP HANA obtiendront un retour sur investissement moyen de 679 % sur cinq ans. Le Cloud SAP HANA fournit une base puissante de gestion et d’analyse des données pour les solutions d’innovation telles que le Cloud SAP Data Warehouse.

Elle est maintenant disponible sur Amazon Web Services, en plus de Microsoft Azure, pour offrir une plus grande flexibilité et un plus grand choix aux clients qui passent au cloud. SAP prévoit un essai ouvert pour SAP HANA Cloud début juillet.

SAP Data Warehouse Cloud et SAP Analytics Cloud comprennent une gamme étendue de scenarios pré-construits de bout en bout qui répondent aux questions commerciales et techniques clés des entreprises qui cherchent à obtenir rapidement des informations à partir de données.

La dernière mise à jour de SAP Data Warehouse Cloud inclut du contenu métier pour le secteur du retail. Un écosystème en pleine croissance, avec des centaines de partenaires devrait fournir davantage de contenu et de connecteurs de données pré-construits pour le Data Warehouse Cloud de SAP sur le SAP App Center.

Afin d’aider les utilisateurs et les analystes à créer plus facilement des modèles de données compréhensibles en utilisant des termes commerciaux, la nouvelle fonction de couche commerciale de SAP Data Warehouse Cloud est prévue pour le début du troisième trimestre 2020. SAP Data Warehouse Cloud offrira également également une fonctionnalité intégrée de flux de données, permettant aux clients de choisir parmi une large gamme de connecteurs pour construire des processus d’intégration de données hautement évolutifs vers et depuis n’importe quelle source de données.

SAP Data Warehouse Cloud est plus étroitement intégré à SAP Analytics Cloud pour un environnement de données et d’analyse plus unifié. Cela permet d’obtenir une image claire et précise de toutes les données afin de transformer les analyses en véritables informations commerciales. La plateforme SAP BusinessObjects™ Business Intelligence 4.3 est sortie le 12 juin 2020 et est plus étroitement intégrée à SAP Analytics Cloud pour une transition plus facile vers le cloud. Les fonctionnalités de planification et de prévision sont intégrées dans la dernière mise à jour de SAP Analytics Cloud pour une planification plus rapide et plus puissante, et sont actuellement disponibles pour un essai gratuit.

Découvrez comment des entreprises telles que Porsche AG, Geberit AG, et Idorsia Pharmaceuticals Ltd, prévoient d’utiliser la puissance du Cloud SAP HANA, du Cloud SAP Data Warehouse, du Cloud SAP Analytics et de la plate-forme SAP Cloud.

Intégration

Grâce à la nouvelle tarification simplifiée de SAP Cloud Platform Integration Suite, les clients peuvent bénéficier d’un package basé sur la valeur et d’une tarification attractive ainsi que d’un achat et d’une consommation simplifiés des services d’intégration. Les clients peuvent désormais s’inscrire une seule fois pour utiliser toutes les fonctionnalités au lieu de devoir passer par plusieurs services sous licence. Cela leur offre la possibilité de consommer un service de la suite à la demande à tout moment grâce à un système de mesure simplifié basé sur des messages. En outre, SAP fournit des packs d’intégration pré-construits entre les applications SAP avec des messages standard sans frais supplémentaires.

Extension

Les améliorations apportées aux flux de travail grâce à la suite SAP Cloud Platform Extension Suite et les nouveaux ensembles de contenus de processus en direct aideront les clients à adapter et à étendre leurs processus commerciaux à la volée et en temps réel pour répondre à l’évolution des demandes et accroître l’efficacité.

Les experts en processus métier peuvent désormais gérer les flux de travail sur les processus en cours d’exécution, comme pour l’approbation des dépenses d’investissement, en utilisant un outil dédié pour découvrir, configurer et exécuter les extensions d’applications, le tout sans l’aide d’un service informatique. Il en résulte un temps de valorisation plus court et des coûts de mise en œuvre plus faibles.

Honeywell et SAP ont récemment annoncé qu’ils s’étaient associés pour créer une solution commune basée sur le cloud pour le secteur de l’immobilier. La solution, qui devrait être basée sur Honeywell Forge et SAP Cloud Platform, vise à rationaliser les données opérationnelles et commerciales pour gagner en efficacité, à améliorer les performances de l’entreprise en obtenant des informations commerciales précieuses et à améliorer la gestion de l’expérience des employés grâce à une analyse puissante des données sur les sentiments.

Pour plus de détails, cliquez ici.

Pour connaitre les nouveautés annoncées lors du SAPPHIRE, cliquer ici.

Trouvez, essayez et achetez des solutions SAP en ligne sur SAP Store et SAP.com.

Pour en savoir plus, regarder cette vidéo d’expert.

The post SAP Business Technology Platform: Un trio entre excellence, intégration et extension des données appeared first on SAP France News.

Source de l’article sur sap.com

/par