Exploring Web Development History with Richard MacManus

The technologies web designers use today all had to start somewhere. The story of how they came to be is something that Richard MacManus wants to share with the world.

Located in New Zealand, MacManus has been involved in the industry since the 1990s. A writer and technology journalist, his latest project, Web Development History, is all about chronicling the history of the internet from a developer’s perspective.

Inside, you’ll find everything from web precursors dating back to the 1960s to the birth of JavaScript and beyond. They have all played a part in getting us to the present day.

I spoke with MacManus about the project, his beginnings in web design, and thoughts on the future of the web. His answers are lightly-edited for brevity/clarity.

How and when did you get started in web design?

I started out in the late 90s as first an “information developer” (a fancy name for a technical writer) and then a “webmaster” (not sure if this term is even used anymore!). I went on to be a “Web Manager” for a couple of New Zealand companies in the early 2000s, before starting up my tech blog ReadWriteWeb (RWW) in 2003.

I was a true web child of the 90s, in that I (am) self-taught (when it comes to) all the main web technologies. So, in those webmaster / web manager roles, I did a mix of web design, site architecture, and management, and even dabbled a bit in development. But it was when I began writing about the latest in web technology with RWW that I really found my niche.

What inspired you to start the Web Development History project?

A couple of reasons. Firstly, I’d read a lot of books and articles about the history of the web and the internet, but almost all of them (and certainly all the books) come at the subject from a business or cultural perspective.

I wanted to tackle web history from a technical point of view, and explain how the World Wide Web was actually developed and how it evolved — in a nuts-and-bolts way.

The second main reason is that, even though I spent nearly a decade covering the web technology industry with my tech blog turned media business RWW, I hadn’t necessarily delved deep into the technical foundations of the web during that time.

RWW began as one person’s exploration of the new web technologies coming out of Silicon Valley post-Dot Com boom and bust, but as RWW grew and became a proper business, it focused more on the revolutionary “Web 2.0” products and high-level trends that came along (e.g., social networking, cloud computing, the smartphone revolution, etc.).

So, with Web Development History (WDH), I wanted to return to my roots — as both a webmaster and a developer-focused blogger in the early days of RWW. My goal was to revisit the previous eras of the web and really dig into the technical foundations, to figure out how it evolved into this massive beast it is today.

Thinking of someone just coming into the industry – how can they benefit from learning its history?

I think it’s crucial for new web developers and designers to understand the foundations of what they’re building on — especially in this current era of abstracted frameworks (for JavaScript, CSS, etc.). The low-code tools available today also make it easier for people to build on the web, without necessarily understanding it.

So WDH is, I hope, a resource for people to learn the architecture of the web, how it began and then evolved over time, the most influential technologies, how web standards came to be, and so on.

Also, I think the industry is experiencing a renaissance of the web platform currently, with web standards and browser technology both at the cutting edge again — leading to Progressive Web Apps, cross-platform tools like Flutter, web components, and so on.

I cover all these new technologies, by the way, in my weekly column for The New Stack — so I see WDH as the perfect complement to the forward-looking column I also write. You have to understand the past first, before you build for the future.

Do you have a favorite facet or technology from the early web?

I love that Tim Berners-Lee invented the web browser as a read/write tool. It was an editor as well as a browser. The editing functionality, unfortunately, got stripped away as first Mosaic and then Netscape got popular, so the first era of the mainstream web (roughly 1993-2002) was ‘read-only.’

We had a term in the 90s, “brochureware,” that explains what many websites were — an extension of magazines, but they didn’t take advantage of the interactive functionality that Berners-Lee built into the web’s foundations.

Now with that said, as I’ve been writing WDH over this past year, I’ve looked more closely at technologies like CGI scripts and PHP that were being used to build early web apps in the 90s.

So, there was a lot of innovation happening with web apps. But writing to the web wasn’t something ordinary people could easily do from their browser. That was what Web 2.0 brought to the web, and indeed that was the thesis of my blog RWW.

You have a number of articles that cover the early browser wars. How do you think those events have impacted the web we use today?

It was a war that Microsoft decisively won by 1999, which unfortunately led to a period of low browser innovation — which lasted until Google Chrome came along. But there were a couple of major things that happened in the 90s in the first browser war, which influenced the direction of the web.

Firstly, Netscape introduced JavaScript in its browser in 1995 — which Microsoft promptly copied (jScript). Secondly, and perhaps less appreciated, was that Microsoft was the main influence behind the DOM (Document Object Model).

As I noted in one post, when Internet Explorer 4 was released in October 1997, it was the first browser to demonstrate a full-page object model — basically a prototype of the W3C DOM spec that would be released a year later.

So, both of those innovations, JavaScript and DOM, I think had major ramifications for our current highly interactive web.

The Web Development History home page.

You mentioned that the ultimate goal for this project is to publish a book. How will you determine when there’s enough content to go forward with it?

I’m still working out what might be the format for a book based on the blog. It may make sense to narrow the scope and choose a certain period (say, the 1990s) and develop a book proposal based on a particular theme. Or I might go all-in and write a full web development history.

So, I haven’t yet decided. Plus, it’ll also depend on what is attractive to book agents and publishers.

In terms of the blog, I do know that in 2022 I will be focusing on the 2000s — I’ve nicknamed this “season 2.” I may also change up the style of the posts; perhaps injecting more of my own personal story, since I chronicled this period for RWW and visited Silicon Valley a number of times. So, we’ll see how the blog evolves next year and whether I can continue to grow the audience.

Finally, as someone who has closely studied the web’s history, how do expect it to evolve over the next few years?

It’s an exciting inflexion point again. On the one hand, there are a bunch of very promising web platform technologies that I’ve been writing about for The New Stack. There are also potentially groundbreaking new technologies emerging — who knows how this metaverse talk will pan out, for example.

There’s also crypto and “Web3,” which I’m currently skeptical about — it’s just as likely to end in a Dot Com-like crash than become the next big thing. Again, time will tell, but I’m monitoring it.

Regardless of how it all shakes out, I think the web’s foundation is in a great place — web standards are healthy, browsers are innovating (although it’d be great if Apple got its act together and allowed other browser engines onto iOS), and there is a high level of functionality in web apps today.

I think there’s room for a move back to less complexity in the web frameworks of today, perhaps using things like web components more. But overall, I expect the web to continue to delight and surprise me over the next several years!


A big thank-you to Richard MacManus for taking time out speak with me! Be sure to check out Web Development History and connect with Richard on Twitter.

The post Exploring Web Development History with Richard MacManus appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=850

25 Free Bootstrap Dashboard & Admin Templates

In the past, the admin section of a web application tended to be built solely for functionality, with not much, if any at all, consideration for design. Thankfully things have changed. Powerful functionality and beautiful design, especially over the last few years, have been merging nicely. And with the massive rise in popularity of the Bootstrap framework, creating a beautiful and functional admin panel has never been easier.

Why would you choose to use Bootstrap at all? Well, with Bootstrap, you know exactly what you are getting. It is relatively easy to customize mobile-first framework that includes ready-made design patterns and comes packaged with a vast library of components and widgets. And perhaps more importantly, your Bootstrap build will look consistent across all screen resolutions and platforms. So it does make sense to build the dashboard or the admin panel of your web application with something that you know works well.

All of the free Bootstrap (mostly version 5) admin and dashboard templates and themes below have been pre-built to be used as a complete solution so that you can rapidly create the front-end dashboard of your web app. As well as all of Bootstrap’s handy collection of widgets, they all include many extra addons, plugins, and features (plugins for charts and graphs, calendars, file managers, and so much more). Everything you will ever need for building professional and responsive dashboards.

And on top of all of those features, these free templates have all been beautifully designed as well.

Free Bootstrap 5 Admin Templates

Star Admin 2 for Bootstrap 5 (Free)

Star Admin 2 is the new and much-improved version of the hugely popular Star Admin Pro. Now, powered by Bootstrap 5, the free template comes bundled with a multitude of layouts, widgets, components, and so much more.

Synadmin Bootstrap 5 Admin Template (Envato Elements)

The Bootstrap 5 powered Synadmin dashboard template comes bundled with over sixty HTML page templates, a huge collection of UI components (including multiple charting options), making it flexible enough to be used on any type of project.

Synadmin Bootstrap 5 Admin UI Kit

AdminWrap Bootstrap 5 (Free)

The simple and beautifully designed AdminWrap dashboard template comes with everything you would ever need for building powerful, user-friendly web applications.

AdminWrap Bootstrap Lite Bootstrap 5 Admin Dashboard Template Kit UI Free

Matrix Bootstrap 5 Admin Template (Free)

Powered by Bootstrap 5, the Matrix Admin is a fairly basic dashboard template but does offer everything you need to get the backend of your web application up and running quickly.

Matrix Admin Bootstrap 5 Admin Dashboard Template Kit UI Free

NobleUI Bootstrap 5 Admin Template (Envato Elements)

NobleUI is a lightweight and beautifully designed Bootstrap 5 powered dashboard template that includes a huge collection of reusable UI components and widgets, including charting options (ApexChart, ChartJs, Flot, Sparkline, and more).

NobleUI Bootstrap 5 Admin UI Kit

Xtreme Lite Bootstrap 5 Admin Template (Free)

The minimally designed Xtreme Admin is a Bootstrap 5 powered dashboard template that will allow you to display, track and manage all of your data in an efficient way. There is a Pro version available, but Lite does give you everything you need to get started quickly.

Xtreme Bootstrap Admin Bootstrap 5 Admin Dashboard Template Kit UI Free

Portal Free Bootstrap 5 Admin Dashboard (Free)

Portal is a clean and modern Bootstrap 5 dashboard template that offers modularly written code, making it much easier for you to edit and change the template to suit the needs of your application.

Portal  Bootstrap 5 Admin Dashboard Template Kit UI Free

Rocker Bootstrap 5 Admin Template (Envato Elements)

Rocker is a well-documented Bootstrap 5 admin template that comes bundled with over seventy pre-built page templates, and also includes color, light, and dark versions.

Rocker Dashboard Bootstrap 5 Admin UI Kit

Adminator Bootstrap 5 Admin Dashboard Template (Free)

The Adminator is a free Bootstrap 5 Admin Template that boasts a clean and simplistic design and offers a vast collection of copy and paste code snippets, utilities, custom pages, components, and widgets.

Adminator Bootstrap 5 Free Admin Dashboard Template Kit UI Free

Material Dashboard 2 Free Bootstrap 5 Admin Template (Free)

This free Bootstrap 5 template has been heavily inspired by the design aesthetics of Google’s Material Design. It comes with 60 pre-designed components and a multitude of pre-built design blocks making it a fantastic starting point for your next dashboard design.

Material Dashboard Free Bootstrap 5 Free Admin Template

Vue Material Design Bootstrap 5 Admin UI Kit (Free)

The Vue Material Design is a Bootstrap-based admin UI kit. It includes more than 500 elements, hundreds of icons, and plenty of templates and tutorials to help you design the perfect Material-inspired admin dashboard.

Vue Material Design Bootstrap 5 Admin UI Kit Free

Free Bootstrap 4 Admin Templates

Vibe – Free Bootstrap 4 Dashboard Template (Free)

Built with Bootstrap 4, Vibe is a free React.js admin template that offers a clean interface and plenty of UI elements and components to help you create a beautiful dashboard for your application. You will find a few helpful starter page templates as well.

Vibe Free Bootstrap 4 Dashboard Template

Amanda Responsive Bootstrap 4 Admin Template (on Envato Elements)

The Amanda Bootstrap 4 admin dashboard template features a beautifully designed corporate look and feel. It comes with a collection of starter page templates, and various charts widgets, email templates, toggle switches, time pickers, and many other components, elements and plugins.

Amanda Bootstrap 5 Admin UI Kit Dashboard Responsive

Now UI Free Bootstrap 4 Dashboard Template (Free)

Now UI is a Bootstrap 4 admin dashboard with a beautiful color scheme, elegant typography, a vast collection of pre-designed components and widgets, and seven pre-built HTML page templates.

Now UI Bootstrap 4 Dashboard Template Free Kit

Flatkit Bootstrap 4 Admin Template (on Envato Elements)

If you love flat design, you will love this Bootstrap admin template. It comes with six prebuilt layout templates and all the necessary UI elements and components to create the admin dashboard of your web application.

Flatkit Bootstrap 5 Admin UI Kit Dashboard Responsive

CoreUI Bootstrap 4 Admin Template (Free)

CoreUi is a free Bootstrap 4 admin template with a simple and modern color scheme. It comes with all of the components you would expect from Bootstrap, such as breadcrumbs, accordions, buttons, code editors, and more.

CoreUI Bootstrap Admin Template Kit UI Free

Gentelella – Free Bootstrap 4 Admin Template (Free)

Gentelella is an elegant admin template that features three dashboard variations and a collection of starter page templates. You will also find various UI elements, forms, tables, multi-level menus, a set of useful extra pages, and more.

Gentelella Free Bootstrap Admin Template

Light Bootstrap 4 Dashboard Template (Free)

The Light dashboard template has a spacious and minimal design. You will find tables, user profiles, icons, and Google Maps integration. The template is fully responsive and has been designed so that you can get the dashboard of your application up and running quickly.

Light Bootstrap Dashboard Template

AdminLTE – Free Bootstrap 4 Admin Template (Free)

The lightweight AdminLTE Bootstrap 4 admin template comes with six pre-designed skins, and includes a multitude of components, plugins, and page templates to help you quickly create a dashboard for your web application.

AdminLTE Free Bootstrap Admin Template

Free Bootstrap 3 Admin Templates

Bootflat Admin – Flat UI Bootstrap 3 Admin Dashboard (Free)

Bootflat Admin is an open source flat dashboard template. It’s based on Bootstrap 3 and it comes equipped with numerous templates and UI elements that will help you design a beautiful and colorful admin interface.

Bootflat Admin Flat UI Bootstrap Admin Dashboard Kit UI Free

Bracket Bootstrap 3 Admin (on Envato Elements)

Bracket Bootstrap Admin is an admin and dashboard template with a corporate look and feel. It comes with starter pages as well as various charts, email templates, toggle switches, time pickers, and many other elements.

Bracket Bootstrap Admin

Startmin – Open Source Admin Dashboard Template for Bootstrap 3 (Free)

Startmin is an open source admin dashboard template based on Bootstrap 3. It features a modern design and comes with charts, tables, form elements, and a useful set of starter pages.

Startmin Open Source Admin Dashboard Template for Bootstrap Kit UI Free

Admin.io Bootstrap 3 Admin Template (on Envato Elements)

If you’re looking for a Bootstrap 3 admin dashboard template with material design, look no further than Admin.io. This dashboard template also includes vector maps, flowcharts and graphs, icons and styling.

Admin.io Bootstrap Admin

Paper Dashboard – Free Bootstrap 3 Admin Template (Free)

Paper dashboard is a clean and minimal admin template based on Bootstrap 3. The template comes with 16 different components, 4 customized plugins, and 4 example page templates.

Paper Dashboard Kit UI Free Bootstrap Admin Template

SB Admin 2 – The Original Free Bootstrap 3 Admin Theme (Free)

The SB Admin 2 dashboard template comes with an elegant, corporate design. It comes packaged with tons of UI elements, various charts, forms, tables, and a set of demo pages that you can use as a starting point.

Kit UI Free SB Admin 2 Original Bootstrap Admin Theme

Lumino Free Bootstrap Admin Template (Free)

The Bootstrap 3 Lumino dashboard template has a fresh and clean design. It comes with dozens of widgets including forms, charts, UI Elements, panels, alerts, tooltips, menus, and much more.

Lumino Free Bootstrap Admin Template

Klorofil Free Bootstrap 3 Admin Template (Free)

The Klorofil admin template features a clean and professional design. It comes loaded with all the necessary page templates, UI elements, and components for creating any type of dashboard design.

Klorofil Free Clean Bootstrap Admin Template

Free Bootstrap 2 Admin Templates

RDash Bootstrap 2 AngularJS Admin Dashboard (Free)

RDash Angular has been built on Bootstrap 3 and Angular JS. It comes with a nice set of UI elements, tables, and a responsive, colorful design. It’s a great choice if you need a straightforward, simple interface.

RDash Angular Bootstrap 2 AngularJS Admin Dashboard Kit UI Free

Clean Dashboard Responsive Bootstrap 2 UI Theme (Free)

As the name suggests, the Clean Dashboard template has a clean design. The Bootstrap 2 dashboard template includes several unique UI elements that aren’t usually included in the Bootstrap package.

Clean Dashboard Responsive Bootstrap 2 Kit UI Free Theme

The post 25 Free Bootstrap Dashboard & Admin Templates appeared first on Speckyboy Design Magazine.

8 Powerful Plugins for Integrating Social Media into WordPress

These days, no website should go without at least some basic social media integration. If you’re a content creator, enabling readers to share various services is a must. But you can also go beyond just the basic share buttons.

You might even want to automate the process of sharing that same content on your own social accounts. Then there are the methods for enabling social media login, commenting, and analytics.

If your website is powered by WordPress, adding this type of functionality couldn’t be any easier. Some plugins cover everything mentioned above and more.

Here are some outstanding free WordPress plugins that run the gamut of social media integration:

Smash Balloon Social Photo Feed

Photo galleries are a popular feature for many websites. But, if you’re already on Instagram, why reinvent the wheel?

Smash Balloon Social Photo Feed is tied to your Instagram account. Set it up and the plugin will display your feed as an attractive gallery. And it also brings back oEmbed functionality – something that had previously left WordPress core. The pro version offers advanced features, such as the ability to display hashtag feeds and image lightboxes.

WordPress Social Login (Discord, Google, Twitter, LinkedIn)

If you run an online community or membership website, users will have to fill out yet another registration form – and keep track of one more account. But with WordPress Social Login, you can enable the use of their social media accounts instead.

The plugin integrates with all the major social media networks. In addition, it works with popular WordPress plugins such as BuddyPress and WooCommerce.

WordPress Social Login (Discord, Google, Twitter, LinkedIn)

Flow-Flow Social Feed Stream

Want to combine all of your social media posts into a single feed? Flow-Flow Social Feed Stream can make it happen. It works in conjunction with the “big four”: Facebook, Instagram, Pinterest, and Twitter.

This can be a server-intensive process. That’s why the plugin utilizes AJAX and caching to speed things up. You’ll also find post-share counts, mobile compatibility, and plenty of design settings. If you’re looking for even more social networks for your feed, the pro version has you covered.

Flow-Flow Social Feed Stream

AddToAny Share Buttons

AddToAny Share Buttons is one of those plugins I find myself turning to over and over. It provides an easy-to-use and highly customizable way to add your basic social sharing icons.

Place them directly into your template or create a floating share bar. You have access to virtually every social media platform (over 100 in all), and it integrates with Google Analytics. Use the included icons or your own.

AddToAny Share Buttons

Jetpack

Indeed, with over 3 million active installs, Jetpack is one of the most widely used plugins out there. And since you may already have it installed, it’s worth mentioning that there are some powerful social media tools built right in.

Besides adding social sharing buttons, you can also automatically post your content to Facebook, Twitter, LinkedIn, and more through their Publicize feature. Your readers can also use their WordPress.com, Twitter, or Facebook accounts to comment on your posts. Who knew?

Jetpack

WPSSO

WPSSO is a plugin that works behind the scenes to make sure your WordPress website contains valid Open Graph and Schema Markup, among other things. This helps ensure that when your content is shared on social media, it’s properly read by services like Facebook, Pinterest, and Twitter. For example, this information will make sure that Twitter Cards grab the right images, etc.

Even more advanced features are available in the Pro version of the plugin.

WPSSO

Facebook for WooCommerce

If you’re running a WooCommerce shop, the free Facebook for WooCommerce plugin will help you harness the power of the popular social media network. Integration with Facebook Ads provides conversion tracking, optimization, and remarketing.

But you can also create a Facebook store that connects your WooCommerce products directly to Facebook. You can list your entire catalog on Facebook. And, when you make changes to products, they will automatically sync with the social network.

Facebook for WooCommerce

Blog2Social: Social Media Auto Post & Scheduler

Blog2Social is a suite of tools to make automatic posting of WordPress content to social media work on your terms. It connects to your Facebook, Google+, Instagram, Reddit, Twitter or other social profile and lets you customize messages, hash tags and more for each service.

It’s also great for re-sharing older posts. The Premium version features advanced scheduling, allowing for more than one concurrent profile on a specific network and more.

Blog2Social: Social Media Auto Post & Scheduler

BONUS: Scriptless Social Sharing

Minimalists and speed demons, rejoice! Scriptless Social Sharing provides an absolute barebones version of social sharing buttons. No JavaScript and no increased load times.

The plugin claims to build a set of links and can be displayed as simple icons with or without labels. Accessibility is also ensured – even if you choose not to show labels on the included icons. Frankly, I’m scared scriptless.

Scriptless Social Sharing

Becoming Fully Socialized

The ways and reasons for integrating social media into your WordPress website have grown tremendously. It’s no longer a matter of just helping users share your content (although that’s still an important piece of the puzzle).

Now, it’s also about ensuring that the social networks you care about can properly read your content. And, when users do share, you’ll want some data to see how it’s working out. Beyond that, many social network integrations add a layer of convenience for users.

With that in mind, it’s important to consider both your needs and those of visitors to your site. Choose the functionality that will make the most impact. With the plugins above, you’ll be up and running in no time.

The post 8 Powerful Plugins for Integrating Social Media into WordPress appeared first on Speckyboy Design Magazine.

The Power of Automating WordPress

I like to think of the typical WordPress website as a collection of parts. Themes, plugins, and custom code can be combined to power virtually any type of site.

But, in most cases, these various pieces don’t necessarily work together. That is, they each serve their own purpose independently of one another. Unless they’re tied into the same ecosystem (a WooCommerce extension, for example), they can usually be changed without causing a domino effect.

That has both positives and negatives. On the plus side, it’s possible to add or remove functionality at any time. But it also means that getting things to work in tandem can be difficult.

It’s a challenge for developers. There are many scenarios where you may want user actions in one plugin to also trigger a response in another. Unless these features are intentionally built into a plugin, it may require building that functionality from scratch.

That’s where the power of automating WordPress comes into play. There are now tools specifically designed to trigger a chain reaction among multiple plugins and third-party services. Best of all, they can be configured with relative ease.

If that sounds like something that could change your life (or at least your website), read on! We’ll introduce you to some WordPress automation tools and basic examples of what they can do for you.

WordPress Automation Plugins

The first step involves choosing a WordPress automation plugin. This will serve as the glue that links your site’s various plugins and services together.

There are a couple of compelling options we’ll focus on. Each has a free version that includes plenty of possibilities. If you’re looking for something more robust, commercial versions provide advanced features and wider compatibility.

Before you choose, be sure to review what’s included. While both options have similarities, there may be some key differences that will determine the best fit for your situation.

AutomatorWP

AutomatorWP comes loaded with integrations for popular plugins such as WooCommerce, BuddyPress, Gravity Forms, LearnDash, and Restrict Content Pro – among many others. In addition, you can tie in with service providers like HubSpot, Twilio, Zapier, and Zoom.

Note that integrations are limited on the free version of the plugin. Premium add-ons are available, which can be purchased individually or as part of a package deal. They expand upon the types of tasks (a.k.a. “triggers”) available in your automation workflow.

Uncanny Automator

In addition to the plugin integrations listed above, Uncanny Automator works with the likes of Easy Digital Downloads, Elementor, MemberPress, and The Events Calendar. Third-party services include Facebook, FluentCRM, and Twitter.

The free version includes over 100 automation triggers and actions. More are available via the pro version. Note that there is no a la carte option– you’ll need to buy the pro version to access the advanced functionality.

Uncanny Automator banner

Creating a Few Basic Automations

Now that we know a bit more about both AutomatorWP and Uncanny Automator, it’s time to put them to work. We’ll use them to create a couple of automations that reflect common use cases.

But first, a little background on how things are put together.

How Does It Work?

While each plugin uses slightly-different terminology, the process for adding automation to your website is essentially the same.

Both have a similar back-end UI for creating automated functionality. AutomatorWP calls them “automations,” while Uncanny Automator refers to them as “recipes.” It is possible to have multiple automations/recipes on your site.

Either way, these configurations have two components:

Triggers
A trigger is the initial step in the process when a user performs a specific task. For example, common triggers could be when a user enters a comment on a blog post or purchases a product. Triggers can be set up for either logged-in or anonymous (logged-out) users.

Actions
An action is what happens after the trigger has been completed. Let’s say a user has joined a BuddyPress group on your website. You could create an action that automatically emails them a welcome letter or adds them to a mailing list.

It’s also worth noting that a given automation/recipe can contain multiple triggers and actions. In some situations, you can even set a sequence for them.

Example #1 (Uncanny Automator): When a Customer Purchases a Specific WooCommerce Product, Add Them to a BuddyPress Group

Our first example will tie both WooCommerce and BuddyPress together. When a customer purchases the “Beanie” product from our fictional store, we’ll also add them to our “Fashion Forward” BuddyPress user group.

We’ll use Uncanny Automator to set it up. Here’s how we did it:

1. Inside WordPress, navigate to Automator > Add New.

2. Uncanny Automator will ask you to select a recipe type. In this case, we’ll want to choose “Logged-in users.”  Click on “Confirm”.

Uncanny Automator: Select a recipe type

3. Give your recipe a name – in this example, we went with: “Add Beanie Buyers to the Fashion Forward BuddyPress Group.”

4. Under the “Logged-in triggers” area, click on WooCommerce.

5. Now, you’ll see a list of possible triggers. Choose: “A user completes, pays for, lands on a thank you page for an order with a product.”

6. Next, Uncanny Automator will ask for a Trigger condition. Select “completes” and click on “Save”.

7. Here, we’ll choose the product we want to target. From the list, select “Beanie” and click on “Save”.

Now that our trigger is set, it’s time to move on to the Actions portion of the recipe.

8. Click on “Add action”.

9. From there, click on BuddyPress.

10. Select “Add the user to a group” from the action list and click on “Save”.

11. Also, be sure to change the status on the upper right of the page from “Draft” to “Live”.

When completed, the recipe should look similar to the image below.

Uncanny Automator: A finished recipe

Example #2 (AutomatorWP): When a User Submits a Gravity Form, Create a New WordPress User

Our fictional website has a technical support form (powered by Gravity Forms) that users can submit to get help. If that user doesn’t have an account on our site, we can use AutomatorWP to create one for them.

This automation requires us to know the ID numbers of the fields in our Gravity Form. That can be found by clicking on specific fields within the form editor’s UI.

1. Inside WordPress, navigate to AutomatorWP > Automations. Once on the Automations screen, click on “Add New Automation”.

2. AutomatorWP will ask you to select the automation type. Select “Anonymous” and click on “Confirm”.

AutomatorWP: Select automation type

3. Give your automation a name – in this example, we went with: “Tech Support Form Entry Creates a New User”

4. In the Triggers area, click on Gravity Forms.

5. Choose “Guest submits a form” from the list of triggers. By default, the trigger will work with any form on our site. To change to a specific form, we clicked on “any form” and selected ours (Technical Support) from the list. Click on “Save”.

AutomatorWP: Locating the desired form from a list

Now that our trigger is set, it’s time to move on to the Actions portion of the automation.

6. In the Actions area, click on “New user.”

7. We can now fill in portions of the new user’s profile with fields from our form (via the Guest submits a form action). As we mentioned, this requires us to know the ID number for the various fields. In this case, we have fields for the user’s first and last name, along with their email address.

Gravity Forms: Locating the ID number of a field

Our form’s Email field (ID: 2) will be used to populate both the Username and Email fields in the user profile.

For the user’s name, we’ll use First Name (ID: 5) and Last Name (ID: 6) from the form.

AutomatorWP: Mapping form fields to the user account profile

8. There are a few more options within this action we’ll want to address:

The default user role is “Subscriber,” but we can change that in the Role setting if needed.

We’ll turn on the Send User Notification setting. This will send an email to the new user and provide a password reset link.

Then, we’ll set What to do if the user already exists: to “Do not run the actions”.

AutomatorWP: User notificaiton settings

9. Click “Save” to save the new automation action.

10. Finally, click “Save & Activate” to put the automation to work.

When completed, the automation should look similar to the image below.

AutomatorWP: A finished automation

Making WordPress Plugins Work Together

WordPress automation plugins can turn an otherwise time-consuming process on its head. With just a few clicks, it’s possible to create some seriously useful functionality.

And while some of the more advanced options require commercial software, it may be well worth the investment. Think of how much time and effort it would take to create these features from scratch. The convenience alone is worth the price.

Finally, there’s an easy way to make your site’s WordPress plugins work together. Experiment and see how it can help improve your workflow.

The post The Power of Automating WordPress appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=756

A Guide to Choose Fonts for Your Web Design

(Guest writer: Amelia Harper)

Though it may look like a trivial element, however, choice of fonts influences the success of your web design. A suitable typeface helps maintain the UI’s overall consistency and makes the website look aesthetically satisfying. It also increases the website’s readability for a good user experience.

Choosing the fonts depends on the purposes and tone of your website, but if you are confused, or you do not have enough knowledge about how to select the correct fonts for web designing, don’t worry; this short and interesting guide contains the key points for you to choose the correct fonts.

So, just take a look at this interesting and helpful guide based on the tips shared by experts with the ten important things to consider before selecting the fonts for web designing.

20 Ultra Light and Elegant Fonts for Web Designers

20 Ultra Light and Elegant Fonts for Web Designers

Along with color and layout selections, choosing the right font is essential for producing pretty much any good… Read more

Things to consider when choosing fonts:

Communications play an important role in web designing for establishing a good connection between the website and the users. Communication refers to the textual part of the website where good typography makes the reading seamless for the users, while bad typography turns users off.

Here are 10 key points that can help you choose the best fonts for web your web design for better readability and aesthetics.

1. Limit the number of fonts

If you use more than three different fonts for the same website, then your web design may turn out to be shapeless and unprofessional because the excess of type sizes and styles in one website can ruin its layout.

So, for a good website, you must have to limit the number of fonts to a minimum of 2 or 3 typefaces.

45 Beautiful Free Fonts For Designers (Updated)

45 Beautiful Free Fonts For Designers (Updated)

It’s time to dust off your long-forgotten treasure chest filled with fonts and bring in new ones before… Read more

2. Use the standard fonts

You can access a lot of interesting standard fonts like Gotham, Garamond, Arial, and Roboto on the font embedding services like Google Fonts and Adobe Fonts (Typekit).

These fonts can give your website a fresh and professional look. These are also good for increasing readability for users, branding purposes, and providing a good user experience.

25 Best Websites to Download Free Fonts

25 Best Websites to Download Free Fonts

In the design industry, there’s always a gold rush for a good font that may add impact to… Read more

3. Type of font family

Try to opt for a versatile font family. Some font families like Gotham font free, Garamond, Open sans, and Yellowtail are super due to their amazing versatility that allows web designers to work with more freedom having a lot of options.

4. Use attractive themes

The theme of a typeface is a predefined combination of size, color, and style of the text that can be easily applied to the selected text.

It is a set of formatting choices, including effects, colors, and adjustment options for making your website more attractive to increase site users’ interest.

5. Set line length

The length of the line really matters. You can visit any professional website to check the limited number of characters used in each line.

The correct number of characters used in each line always increases the readability of the website. According to the Baymard Institute, you should have around 60 characters per line if you want a good reading experience.

6. Use a font that’s good for multiple sizes

The users may visit your website using different devices with different screen sizes, so you have to choose a suitable font for both small and big sizes and resolutions.

You should choose a font that is legible in multiple sizes because the extreme number of fonts can wreck your site and will not maintain readability and useability.

7. Avoid using similar fonts

Using similar fonts can make it easy to confuse the same letterforms. So be careful when choosing a font and make sure that it uses different contexts that will not cause any issue for the site users.

8. Avoid using all caps

Using ALL CAPS may be good for the text such as titles or logos. But for the body text you should never use all capital letters. Otherwise, it may be read as if someone is shouting out that text.

9. Do not use less spacing between the lines

In typography, you should not decrease the spacing between the lines, but you have another good term to use that is leading. By increasing the leading, you can increase the vertical space between the lines. Leading should be 30 % more than the character height, which is good for website viewers.

10. Use enough color contrast

Try to use different colors for text and background because it will make your website more attractive, and it will not let the user leave the site.

The small and large color contrasts should have the ratio of 4.5:1 and 3:1, respectively, that most professional designers use for web designing.

Conclusion

So, these were some key points you should consider when you’re selecting a font for your website. By following these key points, you can create a professional website that is seamless to read and aesthetically pleasing.

(This guest post is written by Amelia Harper for Hongkiat.com. Amelia is a professional graphic designer and writer. She has experience of 15 years experience in graphic design and a long stint of freelancing in Sydney and London. She relished the challenge of joining the international design school in New York City and her aim to introduce everyone to graphic design. She likes to write about graphic design, typography, and entrepreneurship.)

The post A Guide to Choose Fonts for Your Web Design appeared first on Hongkiat.

Fresh Resources for Web Designers and Developers (June 2021)

Being a web developer means constant learning as the field keeps evolving with new updates coming in every other day. Especially when it comes to HTML, CSS, and JavaScript, there’ll always be some new tools and materials we can learn from.

In this round of the series, we’ve gathered various types of resources for web developers. These include some handy tools, learning materials to brush up your skills in web development, and some PHP as well as JavaScript packages.

Without further ado, let’s see the full list.

Fresh Resources for Web Designers and Developers (May 2021)

Fresh Resources for Web Designers and Developers (May 2021)

One of the things that I like being a web developer is that you never stop learning. There’s… Read more

Awesome CLI Apps

Command Line Interface (CLI) is powerful, fast, and allows you to automate tasks that would be slower or not possible at all if you do with its UI counterpart.

This is the list of all the available CLI applications – from a CLI to retrieve football score and download a Youtube video to interact with Facebook and Spotify and many other things.

TerminalsAreSexy

On this platform, you can find a list of Terminal applications such as Bash ZSH, and Fish, etc. editor applications like VIM, and emacs and other types of editors, package managers, plugins, and a list of community sites.

If you’re looking to learn more on using Terminal and CLIs, you should bookmark this site as a comprehensive learning resource.

terminal-are-sexy

Charts Blocks

A plugin to insert charts intuitively in the WordPress block editor with just a couple of clicks. The plugin supports several types of charts including the Bar, Line, Pie, and Doughnut chart.

charts-block

Laravel Prose Linter

A Laravel package to check the textual content on your Laravel application. It can check translations, typos, slang, and can suggest a better writing style. It’s a quite unique linter actually.

laravel-prose

Radar

An app that allows you to put together different types of real-time data that you’d like to monitor in one single place. You can add, for example, the Bitcoin price, Twitter follower count, currency exchange, AdSense earning, and a lot more.

radar

Learderboard Performance

A tool to benchmark across several different websites to compare their performance. It utilizes Lighthouse under the hood and will generate not only the LCP and FCP but also the accessibility report and the carbon footprint. It’s a great tool if you need to monitor how other websites are doing.

perf-leaderboard

Astro Build

A modern framework-agnostic tool to build a static site. You can use, your favourite framework like React, Vue, Web Components, or just plain old HTML+CSS while Astro will do all the work to compile all these components into a fast static site.

astro

IconVG

IconVG is Google’s initiative for alternative format for simple small graphics like icons, logos, and emoji which is commonly used on the web. It’s up to 3x smaller compared to SVG and much smaller compared to PNG.

At the time of this writing, this format is experimental; nonetheless, it’s quite exciting to see how this format would be adopted in the future on the web.

iconvg

DaisyUI

A UI kit built on top of Tailwind CSS. What’s unique about DaisyUI is the theme collection. It provides a number of options to choose from as your UI persona besides the traditional dark and light theme.

You can, for example, select the “Retro” theme to change the UI to old-looking colors or “Luxury” to make it more classy.

daisy-ui

Mobile Palette

If it’s been hard to find the right color combination for your mobile app, this handy web application may help. Simply select the color base, it will automatically generate a nice color scheme for the mobile UI.

mobile-plate-generator

Boring Avatars

As the name implies, this is a tool to create an avatar image, a boring one. The tool generates the avatar based on the combination of pattern, colors, and usernames.

It provides 6 types of appearances, 2 shapes, and 3 sizes to create an avatar. You can copy the generated SVG or use the URL, for example:

https://source.boringavatars.com/marble/120/Jon%20Doe?colors=264653,2a9d8f,e9c46a,f4a261,e76f51
boringavatars

MoneyPHP

Dealing with currency can be tricky, and this is a PHP library that aims to make it easy. It allows you to do addition, subtraction, and comparison. You can do advanced stuff like calculating the ratio, converting currency, and formatting.

money-php

N8N

A tool for workflow automation without needing to code. It can connect to many services like Github, Slack, Google Spreadsheet, Dropbox, and many more. A great alternative to IFTTT and Zapier, N8N is free and open-source, and you can run it on your own server.

n8n

30 Seconds of Code

A collection of tips and code snippets for some common problems in programming and web development. It covers JavaScript, Python, React, and Git.

In the collection, for example, you can find several examples of algorithmic operations, math, dealing with Browser APIs, arrays, objects, and some practical examples like converting JSON to CSV.

30secondsofcode

HashID

A library that allows you to generate short, unique, and non-sequential ID. The ID would be like Vz5prKnEoo. It looks similar to an ID of a Youtube video. The library is available in many different languages including PHP, JavaScript, Ruby, Python, Swift, and many more.

hashids

DevToolsTips

Another useful site to bookmark, DevToolTips contains a lot of tips and tricks to use the DevTools. It covers DevTools of Chrome, Firefox, Edge, and even Safari. I’m sure you’ll find little tricks that you’ve never known before.

devtoolstips

roave/no-leaks

A PHPUnit plugin to detect memory leaks in your tested codes. A great tool to make sure that your code won’t cause to exhaust memory when deployed to production.

no-leaks

Coffee with Charli and Shopify: Scaling Systems

An interesting talk in Coffee with Charli episode by Figma. This episode gives you a glimpse of how Shopify creates a design system that scales and handles the challenges.

shopify-scaling-systems

Plow

A performant CLI for benchmarking web requests. It comes with a web UI and terminal that you can use to see how the benchmark progress in real-time.

The CLI accepts a number of options to emulate the request for the benchmark such as the number of concurrencies, the number of requests, duration, and the method request.

plow

Tinywind

A small collection of components built with built-in Tailwind CSS classes. Each component is simple, with no additional or superfluous styles. It’s showing a great example of what we can build with Utility classes and HTML.

tinywind

The post Fresh Resources for Web Designers and Developers (June 2021) appeared first on Hongkiat.

40+ Tools to Build Premium-looking Website

Below, we handpicked 40+ super tools that will help you create and run a premium website in 2021.

These tools are covering all the aspects you need for your website, i.e., website creation, logo, invoicing, fonts and icons, optimizations and development.

You will find complete info about these solutions and in plus we included a super development team that will help you big time if you have complicated and hard projects.

If you have a WordPress website, don’t forget to check the guide about optimizing core web vitals, it is the best in the market.

Take your time to read the article, it is long but useful.

1. BrandCrowd — Online Logo Maker

BrandCrowd is a superb online logo maker that features world’s largest DIY logo library (over 50,000 designs) and is the only platform with all the icons handcrafted by designers.

On this platform you will find logos created with gorgeous icons as well as free icon libraries. The quality of these logos is outstanding as if created by professional designers. And the price is almost nothing for such fine quality.

To use BrandCrowd, write your business name or select the industry you are in. Within seconds, the platform will show you thousands of logo design ideas. When you see the one you like, click the Edit button and start customizing it. You can change text, fonts, colors, background, layout, and even request complex edits (you will hire a BrandCrowd in-house designer for that).

2. pCloud — Secure Cloud Storage
pCloud

Cloud storage is the future and pCloud makes it easy for all of us. It is Europe’s most secure cloud storage, is super easy to use, and offers the best free plan in the market — up to 10 GB of free cloud storage for lifetime.

pCloud works on all OSs (Windows, Mac, Linux, etc.), mobile devices (iOS, Android), and the web so you can access and store your files with any of these devices. The sync and backups are made in real-time so any modification you make, will be instantly seen on all the other devices.

In terms of computer backups, pCloud lets you choose any local folder to be backed up. The backups are made automatically, in real-time, and you can access older versions till up to 1 year.

As for file sharing, it has many interesting features to offer such as password-protected download, expiration date, and upload/download access.

pCloud offers a free version – with limited features – or pick the premium plan with advanced features and one-time payment, and a bundle of features.

3. Total Theme
Total Theme

Total is the WordPress theme with a whole bunch of features. There are 40+ high-quality pre-made designs that you can install with just one click and your website will look exactly as in the selected demo.

The theme is bundled with 3 premium plugins namely Visual Page Builder, Templatera, and Slider Revolution and a lot of customization options.

4. 99 Robots
Robots

99 Robots is a premium digital agency that will stimulate the growth of your online. They help you in managing Amazon, Facebook, and Google PPC ads as well as WordPress development, and web designing services.

The agency is specialized in creating stunning websites which are optimized for SEO, traffic, navigation, and sales.

5. Mobirise Website Builder
Mobirise

Mobirise is an offline website builder to create a stunning website for your project, no matter which industry you are in. You will find over 4,000 awesome website templates, and tons of elements to create stunning websites on this platform.

6. Argento Theme
Argento Theme

If you need the best Magento theme for your store, take a look at Argento. The theme looks very professional, loads lightning-fast, s easy to customize, comes with free installation, and includes 7 unique designs to choose from and 20 extensions that will add tons of cool functionalities to your store.

7. Taskade — To-do List for Remote Teams + Mindmap

Taskade is a free productivity app for the web, mobile, and desktop, to collaborate with your remote teams. The platform is very simple to use and intuitive, and you can create a unified workspace for remote teams and projects, keeping everything well organized.

8. Codester
Codester

Codester is a popular marketplace filled with premium PHP scripts, app, codes, website themes, and much more. They have a Flash Sale section where you can find hugely discounted items are being sold.

9. Deeezy.com
Deeezy

To create a super website, you need super graphics, fonts, photos, templates, textures, etc. You will find all these high-quality creative resources here, on Deeezy.com.

10. Goodie
Deeezy

Goodie is a professional web development service by the famous Xfive company. It will help you with simple websites, WordPress development, newsletter designs, and much more.

11. Ampfluence
Ampfluence

Ampfluence is a highly popular agency that will grow your Instagram account using the right methods, no bots or gimmicks. They have huge experience in working with all kinds of companies and brands, delivering outstanding results.

12. Mailmunch
Mailmunch

Mailmunch will exponentially grow your email list by helping you create stunning forms and landing pages. The platform is feature-rich, contains tons of highly customizable templates, and thousands of royalty-free photos. Also, the interface is super intuitive to use.

13. Unlayer
Unlayer

Unlayer is an email editing tool capable of boosting your email marketing campaigns for getting more qualified leads. The software offers multiple drag and drop design features to build beautiful emails.

14. Ramotion
Ramotion

Ramotion will help you with brand identity, UI/UX design, web design, and app development. They will take your company at the next level in terms of creating a solid online presence.

15. Miquido — Custom Software Development Company
Miquido

Miquido helps you design visually stunning, functional and user-oriented websites or mobile apps, develop future-oriented software, or deploy a Cloud. They excel in UX/UI design, product strategy as well as custom web, and mobile development.

They have over 10 years of experience and they created over 150 digital products, being one of the leading software development companies in the world.

16. Web Designers in Kansas City
Web Designers in Kansas City

If you are looking for a local web designer or developer located in Kansas City, check this page out. Here you will find complete information about the best 10 web designers and developers in the city.

17. Complete SEO
Complete SEO

Complete SEO is a digital agency that enables you to get large volumes of organic traffic from search engines. They have decades of experience in helping companies from different industries with smart SEO strategies.

You can get a free consultation and website audit from Complete SEO to find out where you stand and the elements that you can improve.

18. DWS
DWS

DWS is a complete agency offering all kinds of services including SEO, content, blogger outreach, animation, and website development). You can either select the service you need or get a package of services tailored perfectly for your needs.

19. Heroic Inbox
Heroic Inbox

If you have a WordPress website and you want to quickly manage customer support emails directly from your website, get Heroic Inbox plugin. The plugin is feature rich and very simple to use.

20. Web Design Auckland — Web design company

Web Design Auckland is a complete internet design agency offering all kinds of services including custom website design, unique branding, stunning photography, SEO, and digital marketing etc.

Fresh Resources for Web Designers and Developers (May 2021)

One of the things that I like being a web developer is that you never stop learning. There’s always something you could learn every day despite being in the industry for a decade.

In this round of the series, we’ve gathered a couple of references to help you get better at testing web performance and a handful of new tools that can help you in being more productive. So, let’s take a look at the full list.

Fresh Resources for Web Designers and Developers (April 2021)

Fresh Resources for Web Designers and Developers (April 2021)

A great product these days relies on the ecosystem. Imagine iPhone without the apps or WordPress without the… Read more

Notea

Notea is a self-hosted note-taking web application that can be installed on your own server with Docker. You can use it to write and share almost any type of content such as documentations, Wikis, blogs, and even newsletters with beautuiful typography.

HTTPDump

This tool provides a unique URL where we can mock response, dump data over an HTTP request, and shows it in a human-friendly way. It’s useful for testing the integration of third-party APIs or Webhooks.

httpdump

Slidev

A Slide framework built for developers. It’s similar to PowerPoint or Google Slides where you can create presentation slides except it also comes with features that developers will appreciate such as being able to embed code snippets, interactive components, and a live code editor.

slidev

Iconic

A huge collection of free icons that you can use on your website and in your apps. It features icons from many categories including Arrows, Folders, Files, Business, Finance, and many more.

iconic

Iconoir

Another website where you can find a good collection of icons for your web or app design projects. At the time of this writing, it contains more than 900 icons in SVG. It’s open-source, completely free and without any limits and restrictions.

iconoir

ZX

ZX is Google’s initiative to help you create scripts with JavaScript and Node.js libraries more conveniently. It provides wrappers around Node child_process, escapes arguments, and sensible defaults that allows you to be more productive in writing scripts instead of setting up the library configs.

zx

Playground macOS

A macOS desktop UI replica built with React.js, Redux, and TailwindCSS. A good source if you’d like to dig in front-end development and sharpen your skills around the stacks.

playground-macos

RustDesk

A remote desktop client built with Rust. It’s free and open-source. You can configure it with your own server so you have control over the entire data. It’s a good alternative to TeamViewer and AnyDesk.

rustdesk

WebDev for Beginners

A curriculum provided by Azure Cloud Advocates at Microsoft that includes lessons, exercises, and quizzes of basic HTML, CSS, and JavaScript. A great resource for anyone who is just getting started in web development.

web-dev-for-beginners

Vanilla Extract

A tool that provides a new take on building CSS for your JavaScript application. You can use TypeScript to compose your CSS selectors, variables, and themes, etc., and generates a static CSS file on build. It works with any front-end framework including webpack, esbuild, and Vite.

vanilla-extract

CSSHell

This site provides a collection of common CSS mistakes; you will find why certain ways of writing CSS is a mistake and it also shows you how to fix them. This a great resource to sharpen your CSS skills.

csshell

Puppeteer Recipes

Puppeteer is a great tool to run performance testing on your website. But sometimes it might not be so obvious as how should we get started. In this article, Addy Osmani – one of Google Chrome Engineers – shares some handy code recipes you can copy and reuse to start profiling your website performance with Puppeteer.

puppeteer-recipes

Kretes

Kretes provides a coherent environment for developing applications with TypeScript, the build tools, and deep integration with Visual Studio Code editor. This tool gives you a boost in productivity when starting application development.

kretes

Persistent Dismissable

A PHP library to handle custom dismissable notice in the WordPress admin area. It optimizes the database call under the hood and is compatible with WordPress Multisite setup out of the box. Overall it’s a handy PHP library for WordPress plugin developers.

persistent-dismissable

BrandBird

BrandBird helps you generate a perfect image for your website. It’s a useful tool to make sure that your brand looks good on social media and helps you avoid awkward auto-cropping when shared on social media like Twitter. You can set the background, border-radius, shadows, and some other elements of the image.

brandbird

Bumbag Styles

A collection of UI React and ReactNative components. It’s themeable, composable, and accessible out of the box. This library makes it fast to create applications that works across different platforms.

bumbag-style

Schema Validator

An online tool to validate Schema structure on a website. It’s compatible with several specifications including JSON-LD, RDFa, and Microdata. It’ll display these data and show if it identifies the syntax error.

schema

TypeSense

TypeSense is a tool designed to improve performance and search accuracy with typo tolerance, configurable ranking, synonyms, grouping, and a lot more. It’s easy to configure and free, which makes it a great alternative to ElasticSearch and Algolia.

typesense

MermaidJS

Mermaid.js is a JavaScript library that allows you to generate flowcharts, diagrams, and other types of visualizations with just text and code syntax; it’s like Markdown for graphics. The library provides API for configurations and integrations. Most likely this library is already integrated into your favourite tool or application; see this “Integration” page.

mermaid

WinterCMS

WinterCMS is a fork of its predecessor, OctoberCMS, due to the switch of the project into a proprietary CMS. WinterCMS inherits the features and flexibility including the theme and plugins.

The team also puts an exciting roadmap to develop WinterCMS further such as Laravel 9 LTS support, Tailwind-based CSS and UI, and CLI to improve productivity for developers.

wintercms

The post Fresh Resources for Web Designers and Developers (May 2021) appeared first on Hongkiat.

Did you miss our previous article…
https://www.1clanek.info/?p=606

Why Designing Without A Design Brief Is Like Playing Charades

(Guest writer: Devora Homnick)

We had a wonderful moment in the Kars4Kids design department recently when our manager said, and I quote, “So we all agree the design brief works, now how do we…” And the soundtrack played its crescendo in the background and I shed some happy tears and thought, “my work here is done.”

The story leading up to this epic piece of drama is a delightful journey that goes something like this. But first, my background story. As the art director of an in-house design team, part of my job is to streamline the process for the graphic design projects that come our way from the many and varied departments of our organization.

Freelancers: Collecting Comprehensive Creative Brief from Your Client

Freelancers: Collecting Comprehensive Creative Brief from Your Client

I had ordered a special cake for a friend’s birthday and had given the receptionist all the specifications… Read more

The quest for the perfect design brief

It was a couple of years ago, and we as a company, especially the marketing team, were growing fast. I was set on the very specific project of creating an official process for the design projects we tackle.

Until then, we operated in a very casual, informal way but it quickly became clear that some order was in order, if we were to be an efficient design team.

After much research and mad professor-ish note-taking, I revealed my magnum opus: The Design Brief. For some well-oiled-machine designers, that might have been a duh moment, but for me, it was putting a name to a face, the answer to my “there must be a better way” quest.

Behold, Le Design Brief

The design brief is a who, what, when and why form for design projects that has to be filled out with all the project details and goals before we do any actual design. By customizing the information gathered on the brief, I was able to provide a valuable tool in avoiding some of the most frustrating problems our team encounters.

Never again would we get halfway through a project without knowing what exactly it is that we’re asking the target market to do. The information would be right there, on the line next to “call to action.”

Instead of adding a mailing block and indicia to a brochure right at the deadline as it was on the way to the printer, we would simply fill in the “method of distribution” space on the brief with “self-mail, bulk indicia” right at the beginning of the project.

And most importantly for an in-house team, my design brief has a slot for “internal goal for this project.” This not only helps focus the entire project, it allows us to measure the project’s success for future action.

Getting the design brief accepted

There was only one problem with my dream solution: getting the other departments, ultimately our clients, to accept what they saw as, at best, red tape and at worst, cruel and unusual punishment.

Part of the challenge of working in-house is familiarity. You and your “clients” are like an old married couple. They can drive you nuts and do everything you asked them not to do in the safety of knowing that you’re not going anywhere and will still work like crazy to get them a good product.

taking-design-brief

So if I wanted to change the way we worked with the other departments, I was going to really have to sell it. How did I explain why we can’t just take notes on a legal pad as the project is described in a minute or two and then work out the details as we go along?

Designing a project without a design brief is like…

Being a fan of metaphorical speaking, I became a veritable storyteller of a tale with many twists. The title: Designing a project without a design brief is like…

Here are the best of Designing a project without a design brief is like…

  1. Filling an order for a steak in a restaurant kitchen which reads, “I’ll have a cow piece, thanks.
  2. Playing charades. Designer: “Okay, you’re pointing to a paper, so this must be a print project… no? Wait – Web! You’re holding up three fingers, so you need it in three weeks? WHAT?! THREE HOURS?
  3. playing-charades
  4. Being a fortune teller with a crystal ball. Designer: “Ooooh, I see you have a big event coming up. You will need an advertising campaign. It will be all wrong until 4 a.m. the night before we go to print. Yes, the Great Designer never guesses, she knows.
  5. A forensic artist drawing a suspect. Designer: “From what you described, this is what you want for your brochure.” Client: “No, that’s basically my competitor’s brochure. I wanted that but BETTER.
  6. Buying your wife surprise jewelry. Designer: “Last time we met, my client mentioned tri-folds. She probably wants a tri-fold. And she always signs her email in comic sans. She must like comic sans. And the design will match her signature!

Closing argument

If your design department is not using a formal design brief, be the hero and introduce it. Just remember, a little humor goes a long way in making something new and unfamiliar acceptable. Here are a few more posts that can help you sort this out while still staying on your client’s good side:

(This guest post is written by Devora Homnick for Hongkiat.com. Devora is the Art Director at Kars for Kids, a national car donation charity that funds educational and youth programs, where she leads a team of talented designers and creative marketers. You can find Devora on LinkedIn.)

The post Why Designing Without A Design Brief Is Like Playing Charades appeared first on Hongkiat.

The Day When Web Design Gets Boring

Nothing can escape the iron teeth of time, and the day when web design gets completely boring and finally fades away will sooner or later come… or perhaps it has already happened? In an online world full of grid-based hero blocks, and yawn-inducing call-to-action buttons, we can’t be sure of anything anymore.

The best thing we can do is to approach the problem rationally, as it can be expected from good professionals.

In this post we try to figure out the time when the web will be fully deprived of creativity, and web designers won’t be anything more than framework-configuring bots. The clock keeps ticking, the dark times are coming, but don’t worry, if we know the schedule we can better prepare for the change.

First of all though, we need to take a look at the bigger picture, and understand how the field of design has managed to survive this long.

5 Free Tools to Design Creative Ads

5 Free Tools to Design Creative Ads

Whether you want to design ads for your new product or design banners for your online profile on… Read more

The Oldest Profession In The World

Design has been the oldest profession in the world. Have you heard it otherwise? Most likely those were just urban legends, dirty jokes or evil gossips.

Goods, products and everything that can be sold or bought need to be first designed. Money or other valuables that were offered in exchange for the service that is mistakenly considered the oldest profession also needed to be designed well before anything could have happened.

If you want to understand the impact design has had on humanity just quickly look around yourself wherever you are. Everything you see right now, other than natural forms and living creatures – objects, buildings, furniture, vehicles, clothes, your tea infuser and coffee mugs – first existed as ideas in designers’ minds, then were smartly prototyped by them.

The global influence of design is so enormous and has so many dimensions that it’s hard to grasp.

So how has the oldest profession in the world managed to survive this long? Throughout the neverending need for change, the constant diversification of the field, and via the theoretical and practical conflicts that have never ceased to exist.

Conflicts That Can Never Be Solved

Any domain that requires at least an ounce of creativity are full of conflicts. As design is creation per se, it is naturally loaded with a lot of dissent.

The questions have always been there: how to provide the best solution, what are the rules, are rules needed at all, along with many other debates and uncertainties. As this post is nothing more than an investigation about the final days of web design as we know it now, we will focus only on the conflict that has had the most impact on our field.

This conflict in design – and generally in art – began when mass production became widely available, around the beginning of the 20th century. Since then creators have been trying to comprehend how they can the best serve human needs while still coming up with creative and unique solutions that fill the void not only physically but also mentally and emotionally.

The opposition of Art Deco and Bauhaus – the handcrafted for the few and the functional for the masses – in the early 20th century excellently represents the nature of this conflict.

Bauhaus
Art Deco

Both produced elegant solutions on their own way without invalidating the existence of the other. Something similar happens these days in web design.

The Ever-Expanding Online Universe

When the World Wide Web was created it was hard to figure out how it would finally look like, just like we are right now struggling with finding the magical date when web design will turn insufferably boring.

It’s more and more sure though that the web formed a virtual world parallel to the physical one, that needs to be populated with virtual objects that we know as applications and websites.

The number of things from the physical world that get a representation in the virtual one is growing every day: we buy cool stuff from e-shops, our personalities are represented online, and fabulous solutions for our burning problems are also stored on the web. But not just that.

The rapidly emerging hardware technology also expands our opportunities both as users and creators, just think about the rise of wearables and other smart devices.

The Gray Side of The Early Web

A more complex online world naturally requires more solutions and a wider approach than a simpler one that was mainly about creativity and fun. Or was it? What if there have always been a gray, boring side of web design?

Websites We Visit: How They Look Like 10 Years Ago

Websites We Visit: How They Look Like 10 Years Ago

Most of us probably got our Internet connection somewhere 10 years back. It was also around that time… Read more

We are lucky, as with the help of the Wayback Machine we can easily get an accurate reply at least to this question. Let’s go back to the beginning of the new millennium to see if this frightening assumption can really be true.

Yahoo From 2000
Reuters From 2000
Harvard From 2000
Trip Down Memory Lane: Early Designs of Popular Sites

Trip Down Memory Lane: Early Designs of Popular Sites

Over the years websites update and change their design style gradually, sometimes for better, sometimes for worse, but… Read more

Wait, What?

Yup, this is how the most part of the web looked like in the year 2000. Business sites that had to make profit and web pages of organizations that required easy usability chose the straightforward, simple designs that didn’t leave too much space for imagination, even back in the good old days.

The tools have been constantly changing though, so at least the coding part has never become boring: back then devs used HTML tables, transparent gifs and other sneaky techniques to achieve the logical, easy-to-understand layout; these days we tend to use frameworks like Bootstrap and Zurb Foundation.

10 Lightweight Alternatives To Bootstrap & Foundation

10 Lightweight Alternatives To Bootstrap & Foundation

Choosing the right framework that is the perfect fit for your projects could be a little bit overwhelming… Read more

Tools Are Just Tools

Tools are just tool; it has always been the client and the designer who decide what to achieve with them. It’s possible to build beautiful, award-winning websites with Bootstrap, but of course aesthetics is not always the primary consideration.

User Experience and Usability are more of a concern these days for business clients who need to provide accessible websites for a wide user base. Luckilyclients who want artistic websites are also out there, like they have always been – just think about the needs of a music band, an art gallery or a conference organizer.

Elephant Restaurant's Website

The Final Date

As it has just turned out, web design has always had a functional side that can only use subtler visual elements. We unfortunately run into an infinite loop that will hardly come to an end.

The conflict between functionality and aesthetics is not simply a binary question; it exists on a spectrum that is influenced by more and more factors, as the online world becomes more complicated. Web designers need to reconcile newer and newer needs.

As we exist within an infinite loop that can only be solved with formatting the whole system, it doesn’t bear much sense to stare at our clocks, and worrying about the time when our field will be deprived all of its creativity.

The best thing we can do is to get rid of our annoyingly ticking clocks, and replace them with perpetuum mobiles. Gazing at them with an open mind can be a good meditation practice that can help us understand how we personally can contribute the best to the ever changing world of web design.

Now Read:
Changing The Face Of Web Design: A Case Study Of 25 Years

The post The Day When Web Design Gets Boring appeared first on Hongkiat.

Did you miss our previous article…
https://www.1clanek.info/?p=556