de A Guide to Accessibility Resources for Global Accessibility Awareness Day By www.viget.com Published On :: Thu, 16 May 2024 11:26:00 -0400 Global Accessibility Awareness Day (GAAD) is May 16, 2024! GAAD was created to help bring attention and awareness to digital inclusivity. No matter your role on a project team, digital accessibility should always be a priority from start to finish. Why is accessibility so important?Over 1 billion people worldwide have a disability, and that number is growing every day15% of people with disabilities say they never go online, compared to 5% of people without disabilities, according to Pew Research CenterAccording to a survey by Click-Away Pound, 71% of disabled users are forced to leave a website if they find it difficult to useDigital accessibility directly impacts people’s ability to access information, buy products, apply for jobs, engage in discussion, and everything else that people do online that is becoming critical for modern life. Accessible spaces even benefit people without disabilities, as it allows anyone to take in content though their preferred method (reading the captions on a video instead of listening in a noisy environment, for example), and often breeds innovation as engineers work to find the best way to be sure everyone can access information equally.The World Wide Web Consortium (W3C) has developed the Web Content Accessibility Guidelines (WCAG) in an effort to standardize digital accessibility. However, many websites unfortunately fail to meet these standards, leading to a lesser-quality user experience. WebAIM’s yearly report has highlighted some surprising statistics about WCAG across the top 1,000,000 home pages:The most common accessibility failure across home pages is low contrast text98.1% of home pages have at least one WCAG 2.0 failureOn average, there are 56.8 accessibility errors per page (this increased 13.6% from 2023!) 16.8% of home pages had more than one <h1> tagAs you can see, there is still a lot of work that needs to be done to create a more accessible web for everyone. If you’re interested in learning more about digital accessibility and how to improve accessibility on your own projects, there are plenty of resources and online courses available. Resources range from free, to paid courses, to professional certifications. Below are some courses and resources that we recommend.Free Courses and ResourcesIf you’re looking to introduce yourself to digital accessibility, these free resources are a great place to start: A11ycasts with Rob Dodson - A series of video tutorials on YouTube that highlights topics including semantics, focus, the correct way to use a button, and a11y testingThe Beginner’s Guide to Web Accessibility - An article by Dequeue University that summarizes why digital accessibility should be a priority, and how to determine if your website is accessibleCommon Mistakes with Using Colour in Accessibility - Digital designer Andrée Lange provides insights into how to take color contrast into consideration when designing for the webDeque Accessibility Resources - Dequeue offers a variety of free accessibility resources, including webinars, blog posts, and their accessibility testing browser extension, axe DevToolsHTML Semantics and Accessibility Cheat Sheet - WebAIM provides a list of the most common HTML tags that have an impact on digital accessibilityMDN Accessibility Tutorials - MDN is an open-source project documenting web technologies, which also includes an informative section on web accessibility documentation and best practicesSection 508 ICT Testing Baseline - Outlines minimal accessibility testing requirements for federal agencies subject to Section 508WCAG 2.2 Quick Reference - WCAG are a series of web accessibility guidelines released and maintained by the W3C, with 2.2 being the current version of the guidelines. This page provides a reference to standards that websites should meet in order to meet current accessibility standardsWeb.dev Learn Accessibility Course - A series of informative articles ranging from beginning a11y topics, to more advanced topics including animation and motionDeep Dives with Paid TutorialsIf you’re a developer who has experience in accessibility and want to dig more into the topic, these comprehensive tutorials will help you improve your a11y knowledge:Accessible Web Academy - Accessible Web Academy includes more focused a11y courses for designers, developers, content creators, and marketers looking to target specific topics Inclusive Components - There is a free online summary of Heydon Pickering’s Inclusive Components, but you can also purchase an eBook on the topic. Heydon’s blog provides examples of a pattern library that bakes accessibility into each componentPractical Accessibility by Sara Soueidan - Sara Souedien is a prolific front-end developer who specializes in accessibility. Her course, Practical Accessibility, is a comprehensive guide for all developers, from those looking to familiarize themselves with accessibility, to experienced developers looking to expand their a11y knowledge.Advanced Knowledge with CertificationsIf you want to take the next step and become a certified professional in accessibility, IAAP offers professional certifications in digital accessibility:IAAP offers five certification options, CPACC, WAS, CPWA, ADS, and CPABEDeque University offers a curriculum to help prepare for IAAP certification examsThe Department of Homeland Security also offers a “Trusted Tester” certification for Section 508 complianceW3C offers a free Digital Accessibility Foundations course, with an optional verified certificate ($99) upon course completionAs the world’s population and number of disabled users continues to grow, it’s clear that implementing digital accessibility in your products is more important than ever. By implementing the information from these lists, you can help users of all abilities access the content that you share, ensuring a better internet for everyone. Full Article Code News & Culture Accessibility
de How Generative AI Can Add Human Delight to Your Virtual Event By www.viget.com Published On :: Wed, 29 May 2024 00:00:00 -0400 We just celebrated 24 years of Viget. That’s two dozen years! This year, our Spring TTT in celebration of “Viget24” was a virtual extravaganza. We’ve put on a lot of virtual events over the years. Some with really strong themes and swag bags; some that focus on simple, meaningful time together; and others that let us enjoy learning something new as a team. Regardless of the rest of the experience, a key component of all of our virtual events is joy, achieved often through intentional levity. We think it’s important to laugh together! We see laughter as a way to expedite connection, and connection leads to rapport which makes us better at collaborating — and in turn leads to more quality products for our clients. Experimenting and iterating is a critical way we try to continually get delight right. We’re pretty pleased with one of our experiments from Viget24 that we called “Lovely Spring Day”.A Lovely Spring DayAs we were brainstorming for this TTT, we thought about how to throw some joyful levity pizzazz into the pieces of our virtual events puzzle that have become pretty standard. How do we add lots of delight without adding lots of time to the action-packed schedule? We zeroed in on the virtual backgrounds we’ve been creating for every event — they add a layer of specialness. Of place. This isn’t any old virtual meeting. This is a TTT! A small collection of past event-specific virtual backgrounds Another key consideration for our team is figuring out creative ways to tie in inspiration from our industry and our work. AI has been an obvious contender — we’ve discussed it and tied it in to some extent for the past several TTTs. But this time, we wanted to see how we could use AI for delight — marrying it with virtual backgrounds felt obvious. And so, a ”Lovely Spring Day” was born. The TL;DR is that we generated custom virtual backgrounds for every Viget employee that encapsulates their “ideal spring day.” We then played a 15-minute guessing game where people tried to guess who the background “belonged to.” Then, people had access to the full folder of AI-generated virtual backgrounds to look through. Vigets could then choose the background that spoke to them most and set it as their background. Read on for more on how we put this together!Pre-Event SurveyTo support all of our TTTs, we send out thoughtful pre-event logistics surveys 2-3 weeks before the big day. The survey lets us know where folks are joining from (where can we send their activity + snack packages?) and gives folks a chance to provide input on how the People Team can help folks enjoy and be present for TTT. This time, we also snuck in three questions, just “for giggles.”In one sentence, describe your ideal spring day.List three things that spark joy.What color do you think suits you best?We did not share why we asked these questions. Sneaky, sneaky! When it’s low-key like this, the element of surprise is often a quick way to level up the delight.Asking for a FriendWith rich data in hand about what makes people happy in spring, we were ready to generate the backgrounds. I was stoked! I’ve been experimenting with ChatGPT for some time, so it was fun to be able to use the DALL-E 3 side of OpenAI’s GPT-4 model. Who knew Prompt Engineering would be part of my role as a recruiter-who-helps-support-TTT-planning? I played around with a couple different prompts to generate these background images. Ultimately, my goal was to create backgrounds that were meaningfully different from one another but still felt good (i.e., something you might feasibly want to set as your virtual background and nothing freakily AI, like uncanny valley hands).Here are the prompts I landed on that got me to our set of virtual backgrounds:Please generate an image (dimensions of a virtual meeting background) that encapsulates the vibe of a day with [ BLANK ].Please generate an image (dimensions of a virtual meeting background) that features [ BLANK ].In the blanks, I wrote the things people included in their surveys. Those blanks were filled with everything ranging from dogs, cats, and friends to beverages, specific temperatures, yard games, carbohydrates, hammocks and more! Sometimes, I’d include a detail I knew about that person myself, even if it wasn’t in their survey. Yes, I occasionally editorialized for both clarity and whimsy! This was for delight purposes, but also helped serve my goal of having the backgrounds be “meaningfully different from one another.” It’s amazing how many people’s ideal spring day is as simple as having 1) moderate temperatures and 2) no pollen!I generated 55 images. Throughout the process, DALL-E nailed it. I only needed to regenerate 2 or 3 images with clarifiers (and only because they included AI-specific outliers like disembodied hands). Huzzah!Here are some of my favorites, along with their prompts in the captions. Can you guess who they belong to? Please generate an image (dimensions of a virtual meeting background) that features an outdoor brewery/taproom in the appalachian mountains. There's a playground with kids in the very distance. In the foreground, frisbee, soccer, volleyball, etc. with friends and family. Please generate an image that encapsulates the vibe of a day ending with an outdoor dinner with lights near an outdoor shower. There should be some hiking boots scattered about. Please generate an image that features a nice hot bath after a cold but sunny day, with a beautiful mug of green tea and a box of takeout that looks really good. The calendar shows April 25th. Please generate an image that encapsulates the vibe of sitting outside in a nice purple adirondack chair with buc-ees paraphernalia around. Please generate an image that encapsulates the vibe of a sunny, 65 degree day with a slight breeze at the ballpark watching a game. The image should feature cats, baseball, and art. Please generate an image that encapsulates the vibe of being outside in a canoe along with carbs, bad jokes, and games (video OR board games). Please generate an image that features endless mountain bike trails, a blue bike with a cup of coffee in the cupholder, and roaming cats. IRLOk, so for the actual activity we had the images ready to go in a private Google Folder. I took twelve of the images and put them in a very simple deck. I shared my screen, introduced the activity, and invited people to guess who they think each image belonged to in Slack. It was so fun seeing people throw out guesses and then narrow in with any verbal hints I gave!Each image took about a minute. Then, we shared access to the Google Folder, gave folks a couple minutes to choose a background that called to them (their own image or someone else’s), and set it as their background. It felt like a magical moment to witness people finding and resonating with their own image or delighting in the ridiculousness of their coworkers’. We saved about 5 minutes for this piece, which felt right.The whole Lovely Spring Day activity took just over 15 minutes! It was a perfect way to transition from a long meal break into our next grouping of content. And, we got to see the different backgrounds throughout the rest of the meeting.Oh, the humanity!I think this activity was successful for a couple of reasons.1. People laughed! Color commentary in the #ttt Slack channel 2. People felt seen. Some of these backgrounds were incredibly on point. Some of that was due to key folks having well-documented interests and a Slack-Famous Dog. Laura Sweltz has a famous love of books and an incredibly iconic beagle named Phoebe. But some of it was due to the People Team knowing about our people — our coworkers — beyond the sentence they wrote in. This uniquely human involvement helped me call an audible as needed and tweak prompts slightly to make the backgrounds feel even more relatable. Steven, Carolyn, and Laura Sweltz felt seen. 3. We could commiserate about our eventual AI overlords. (Did you notice that I say “please” in my prompts?!) Listen, Viget has plenty of practical, healthily skeptical people who are dubious about AI. GenAI is not always a fun, lighthearted thing. But using it in a fun, lighthearted way to do something it’s really good at was a nice use case and thought-provoking exposure even for people who are not into it.4. We could see where we all align, and where we differ! It was amazing to see just how many people love picnics, covet their caffeine, and appreciate a bike ride. It was also cool to see some unique folks who simply crave a rainy spring day, or some beloved Buc-ee’s. What a rich tapestry of individuals — literally! Full Article News & Culture Employee Engagement Tooling
de Self-Host Your Identity Provider with authentik By www.viget.com Published On :: Fri, 31 May 2024 00:00:00 -0400 Authentication! What a hassle! Evans, where's that SAML from Earth!? You start off simple enough — username / password authentication in your application. Then, well, someone mentions that traditional passwords are a security vulnerability, so maybe we should use one-time passwords. That inevitably leads to discussions about magic links and multi-factor authentication. Next thing you know, one dev is in a corner, rocking back and forth and muttering something about SAML, and another dev just left — walked out the door, never to be seen again. Well, not to worry, we've got just the tool for you. authentik is an open-source identity provider written in Python. I'm going to focus on the self-hosted version, but they also offer a paid enterprise plan if you want some extra support. Self-Hosting The philosophy of open-source tools and self-hosting is a big, complex topic for another post. In the world of SaaS products, you likely don't need to self-host. I quite like hosted identity providers like Clerk and Auth0. They're good and appropriate solutions for different types of apps and companies. But I just love to self-host tools. Tinkering and toying with Docker, reverse proxies, and sometimes even server hardware is a lot of fun to me. It does add complexity in some (or many) places, but a little extra complexity means you've got a little more control over your tooling. Self-hosting also allows me to disconnect from the Internet and still be able to work on features and enhancements in my projects. As long as I've already installed the relevant packages or pulled the right Docker images, I can keep working if I'm in a place where I can't (or don't want to) connect to the Internet. This is a small thing, but really important to me. authentik makes it really easy to self-host your application. Right out of the gates, they provide a Docker Compose example and a Kubernetes example. Getting authentik running took me about 10 minutes using the Docker Compose example. Most of that was reading. This can make authentik a great tool during the proof-of-concept or beta phase of your application, getting authentication out of the way so you can focus on building the cool and unique features of your app. Integrations One of the great things that authentik has waiting for you is a bunch of documentation on integrating with a lot of tools you probably already use. These integrations range from other self-hosted apps like Outline (another favorite of mine) to cloud providers like AWS and even platforms like WordPress. authentik's integration docs show you how to set up authentik for your existing providers and applications, so no need to dig around for the right configuration. Sure, if you're building your own application, you don't have the luxury of a README (until you write one, of course!), but don't worry — all the documentation you'll need for your choice of providers is at your fingertips. Personally, I'm fan of the OAuth2 provider for most my pet projects, but I also find the Proxy Provider to be a really great tool if you want to secure a static site that doesn't have any means of authenticating users. Customization This is a pretty nice default login screen, but maybe a mountain road isn't your vibe. You can change this background, add your own company logo, and add your own CSS. Just add your static files to your authentik deployment and modify to your heart's content. But actually, that's not even the cool part of the customization to me. authentik has the concepts of Flows and Stages that are used to determine what steps a user should take to log in, log out, and more. First, you define Stages that represent a single step of authentication — something like requiring a user to enter their username or a password. There's a whole lot to choose from. Once you've set up your Stages, you'll create a Flow, stringing those Stages together until you have a complete process to authenticate, register, or even delete a user. Flows can be imported and exported as .yaml files, making it easy to keep your Flows and Stages synced between different environments. authentik comes with a pretty reasonable set of default Flows and Stages. If you're setting authentik up just to try it out, you might not need to add anything. They do have a couple of example Flows to get you started, though. Flows and Stages can feel pretty intimidating. On your dev server, I'd recommend basically deleting all of the default Flows and Stages and building up new ones from scratch. It's the easiest way to learn how these pieces fit together. If you accidentally break something in dev, you can always just drop your database and spin up a fresh install. Conclusion authentik is an awesome tool and I've only scratched the surface of what it can do for you. As a self-hosted identity provider, it gives you a lot of control on how your services are authenticated. It's great for local development and beyond, and it has a lot of ready-to-go integrations for services you might already use. If you're interested in further reading, I'd definitely recommend checking out the docs on Outposts and External Sources. Hopefully this has given you some inspiration to spin up a local instance of authentik and try it out! It will definitely simplify your authentication needs. Here's your SAML, Mr. Horrible Gelatinous Blob! Full Article Code Back-end Engineering Security
de Building Magic with Webflow: A UI Developer's Perspective By www.viget.com Published On :: Mon, 17 Jun 2024 10:00:00 -0400 In the fast moving and constantly changing landscape of web development, codeless solutions like Webflow and Squarespace have emerged as an alternative to more traditional development. These platforms allow users to design and build websites through intuitive visual interfaces, and are viable solutions for many use cases out there. For the past several months, I've been working as a frontend development support specialist alongside one of our talented designers, Blair Culbreth, who is managing a large, established Webflow project. Here are my candid thoughts and impressions from this experience, along with some critical considerations for those looking to integrate Webflow into their own workflow. Spoiler alert: while Webflow has some impressive strengths, it also comes with limitations that can be both unexpected and frustrating at times.What Webflow Does Really WellSmall Team EfficiencyWebflow truly shines for smaller teams or products, especially those with limited resources. For a team that’s just a single designer or a small development crew, Webflow can help lower the technical debt involved with getting a website to production. By mitigating some of the more complex aspects of development such as responsive design, cross-browser compatibility, and hosting, teams are able to focus on other aspects of the site. This makes it a strong option for startups, freelancers, or small businesses looking to create professional-grade websites efficiently and effectively without the necessity of a developer.Animation ToolingWhen I say professional-grade websites, I’m talking about more than just functional designs. Webflow has some fantastic animation tooling making it incredibly simple to build rich, full-page animations and interactions without ever touching a line of code. Users can create scroll-bound animations or interactive moments of joy all from the comfort of a relatively simple and straightforward GUI. Through the use of animation keyframes, you can elevate a static site into something that feels modern and expensive. Heck, I could even see using the animation tooling itself as a prototyping tool for design handoff in a more traditional web development process. This ability to easily add sophisticated animations allows smaller teams to produce polished, dynamic websites that rival those created by much larger teams with dedicated development resources. Documentation & EducationBeyond its design capabilities, Webflow also stands out for its educational impact. The platform offers incredible documentation that covers core frontend principles, effectively bridging the divide between design and development. Through simple, digestible, and intuitive videos and written documentation, Webflow equips designers with knowledge that shores up many concepts and intricacies of web development.Working with Webflow provides designers with numerous takeaways they can apply to future projects, including those outside the realm of Webflow. The platform educates users on HTML structure, CSS styling properties, and responsive design. This deeper understanding of web development makes designers more versatile and effective in their roles and inherently benefits communication between designers and developers, as their thinking will be more aligned with one another.Navigating Webflow’s LimitationsClass StylesWebflow's class-based styling system is a standout feature, especially to those familiar with CSS. It allows you to bundle properties into classes and apply them efficiently across different elements, minimizing code duplication. When used effectively, this approach facilitates the creation of reusable styles and design systems; however, mastering it requires attention to detail, similar to working with CSS directly, which can be made challenging within the Webflow UI.Due to the separation of pages and content in Webflow, tracking down existing CSS classes and applying styles consistently throughout a project can be challenging. Keeping track of which class names apply what styles can be a struggle. While Webflow offers a Style Manager to help organize and manage classes, it can be difficult to use for quickly identifying how styles are being applied across the platform.Moreover, the inability to open multiple pages in designer mode at once presents a significant frustration. Without the ability to compare elements across different pages simultaneously, users may face challenges in ensuring consistency and troubleshooting design issues efficiently. This limitation may lead to a slower, more cumbersome workflow, particularly in larger projects where maintaining a coherent design system is critical.Another struggle with managing styles within the UI comes in the form of applying styles to combo classes. Combo classes are when you combine multiple classes together to create a variation or modified state of an element. Inadvertently applying styles to a combo class when intending to apply a style for the base class was a common issue I found myself running into, highlighting some challenges users should be aware of, especially when getting more familiar with Webflow.These challenges underscore the value of implementing a strong and consistent CSS class naming system, such as BEM (Block Element Modifier). Adhering to a standardized naming convention will help mitigate some of the challenges posed by Webflow's class-based styling system, but it does come with the added overhead of needing to learn a new class naming convention.Preset Web ElementsWebflow provides users with a diverse selection of default web elements, ranging from simple divs to intricate lightbox elements, which serve as the foundational building blocks for websites. These preset elements occasionally impose rigid structural constraints. For instance, when attempting to create a tabs menu with a filter, users may encounter a problem with adding additional elements to the tab menu block. This restriction forces users to either conform their design to Webflow’s constraints or devise creative workarounds to achieve their desired functionality.Navigating such limitations can be challenging, particularly when striving to realize a specific design vision. It may involve exploring alternative solutions or compromising on the original plan. Yet, as users gain familiarity with the platform, those limitations can be anticipated, allowing them to develop strategies to circumvent the constraints.Custom ScriptsOne of the most powerful aspects of Webflow is also one of the most challenging features to balance. It requires careful management to avoid issues like performance degradation and increased technical debt. It’s incredibly easy to have a website get bogged down with bloat, especially when a larger team might be working on a project.Webflow lacks a built-in feature to view all custom scripts at a glance, making it difficult to track and manage them. Maintaining a documented list of all custom scripts used in your project and detailing their purposes and locations can help mitigate this issue, but that’s a fair amount of overhead to maintain. Additionally, custom scripts do not function in Webflow’s editor mode, requiring a site deploy for testing and troubleshooting, which can be time-consuming. The ability to add custom scripts opens up a world of options, including third-party plugins and libraries that can expand Webflow's native features. Tools like Jetboost or Finsweet can help fill in the gaps, and are oftentimes worth the investment as they provide relatively easy-to-use integrations that will make for a better user experience.That’s all to say that applying custom scripts to a Webflow project is not necessarily bad, but should be approached with considerations on how to mitigate technical debt. Here are a few suggestions to help with integrating custom scripts into your Webflow project:Maximize Native Features: Use Webflow’s built-in features as much as possible. If a design can be achieved with Webflow’s interactions and animations, avoid adding custom JavaScript.External Development: Develop and test scripts in an external environment to reduce time spent deploying and debugging within Webflow.Reusable Components: Save frequently used custom code as reusable components to simplify maintenance and ensure consistency across the site.Regular Audits: Periodically review and clean up scripts to ensure that only necessary ones are loaded, improving site performance and maintainability.Mitigating Difficulty Through TeamworkI started this article by mentioning that I recently served as a frontend development support specialist alongside our designer, Blair, on this project. Blair took on the primary responsibility of building many of the pages, and I want to share more about our collaborative experience. Webflow is as close as you can get to building a traditionally coded website without necessarily needing to touch code, but that doesn’t mean there’s no value in having someone more familiar with the technical side of website building available. From accessibility considerations to complex layout structures, a lot of time can be saved by having a developer serve as a pseudo consultant on the project.On numerous occasions, Blair reached out to me to help set up more complex custom implementations that required JavaScript or weren’t coming together as expected. By being able to jump in and solve those issues quickly for Blair, she was able to focus on building out the other pages. Similarly, I was able to audit and review her work to ensure it was inclusive for all types of users.There are various development tricks we can implement to enhance user experiences for visually impaired users. For example, hiding text specific to a screen reader to provide greater context is a technique that a designer might not generally think about or even be aware of, but a good frontend developer would know to include. By being involved in the building process, I was able to highlight and advise on such instances, ensuring our project was accessible and user-friendly for everyone.ConclusionWebflow presents a robust solution for web development, particularly for smaller teams or projects with limited resources. Its intuitive visual interface and powerful animation tools enable the creation of professional-grade websites without the need for extensive coding knowledge. Webflow’s educational resources also empower designers to deepen their understanding of web development, bridging the gap between design and development and fostering better collaboration.Webflow is not without its limitations. The class-based styling system, while efficient, can be challenging to manage, and the need for site deployment to test custom scripts adds to both the complexity and time investment required to build a project. Despite these challenges, many of the difficulties can be mitigated through careful planning and teamwork. Leveraging native features, developing and testing scripts externally, and creating reusable components are all strategies that can help maintain site performance and manage technical debt.Collaborative efforts between designers and developers can further enhance the process, as seen in my experience working alongside Blair. This teamwork allows for efficient problem-solving and ensures that accessibility and user experience are prioritized throughout the project. By combining the strengths of Webflow with thoughtful collaboration and strategic planning, teams can create dynamic, user-friendly websites that meet modern standards. Full Article Design & Content Tooling
de How we use DDEV, Vite and Tailwind with Craft CMS By www.viget.com Published On :: Wed, 10 Jul 2024 11:00:00 -0400 In 2022 we changed our dev tooling for new Craft CMS projects. Goodbye complex esoteric Webpack configuration, hello Vite. Goodbye complex esoteric Docker Compose configuration, hello DDEV. This small change in tooling has completely transformed our development experience. We start work faster and avoid wasting billable time debugging Webpack and Docker. From Webpack to Vite # Webpack has been the defacto way of bundling JavaScript and front end assets. It’s a powerful tool… but with that great power comes great responsibility complexity. Vite bills itself as the “next generation” of frontend tooling. Vite is much faster at bundling. But more importantly… its default configurations work great for most website projects. Before (Webpack) # Well over 300 lines of configuration spanning three files. Good luck making changes! After (Vite) # A crisp 30 - 50 lines of code. Want to switch to TypeScript? Need to drop in a popular front-end framework? Easy! All it takes is adding a plugin and 2-3 lines of config. Deleting old code has never felt this good! From Docker to DDEV # Docker is another development staple. It isolates server infrastructure into virtual “containers.” This helps avoid issues that arise from each developer having a slightly different setup. However, Docker can have a learning curve. Config changes, PHP upgrades and unexpected issues often eat up precious project time. Enter DDEV! DDEV describes itself as “Container superpowers with zero required Docker skills: environments in minutes, multiple concurrent projects, and less time to deployment.” We’ve found that statement to be 100% true. Before (Docker) # Every Craft project has a different Docker config. Bugs and upgrades required deep Docker experience. Last (but not least), it was difficult to run several projects at one time (ports often conflict). After (DDEV) # Performance is consistently better than our hand-rolled setup thanks to Mutagen and faster DB import/exports. Simultaneous projects run out of the box. DDEV provides (and maintains) a growing list of helpful shortcuts and DX features. Getting started # Ready to make the switch? Here’s how to set up DDEV, Vite and Tailwind on your own Craft project. Show me the config files already! # If you would rather see full config files instead of following step by step, check out our Craft Site Starter on GitHub. DDEV # Let’s set up a fresh DDEV project and start customizing. Make sure you have DDEV installed on your computer. If you’re a PHPStorm user, install the exceedingly helpful DDEV plugin. VS Code users have a similar plugin too! Follow Craft’s guide for creating a new project (they love DDEV too). Now you have a fresh .ddev/config.yaml just waiting to be customized. Node Version # Open your DDEV config and make sure your Node JS version matches Vite’s recommendations. nodejs_version: '20' # Vite 5 expects Node 18+ Ports for Vite’s dev server # Next, expose ports that Vite’s dev server uses will use to serve assets. web_extra_exposed_ports: - name: vite container_port: 3000 http_port: 3000 https_port: 3001 Routing ports can sometimes be confusing. This diagram might help! Vite’s dev server runs inside of DDEV’s web container (a Docker container). Until we expose these extra ports, any custom port within DDEV is unavailable to your host machine (your computer). When it’s time to configure Vite, we’ll use port 3000 HTTP and HTTPS traffic must use separate ports. We use port 3000 for http traffic and 3001 for https Run Vite automatically # Usually, you’ll want Vite to watch and build files automatically after you start a DDEV project. Using web_extra_daemons adds a separate background process (daemon) for Vite. web_extra_daemons: # Run Vite in a separate process - name: 'vite' command: 'npm install && npm run dev' directory: /var/www/html Use hooks to improve DX # DDEV’s powerful hooks system can run tasks before or after various DDEV commands. These post-start tasks keep dependencies and schemas up to date every time you start DDEV. hooks: post-start: - composer: install # Keeps installed packages up to date - exec: ./craft up # Apply migrations & project config changes Time for Vite # Vite is a Node app that’s installed with NPM. Your project will need a package.json. If you don’t have one set up yet, follow NPMs initialization script. ddev npm init # Don't forget to ignore node_modules! echo node_modules >> .gitignore ????Why ddev at the start of the command? This let’s us run NPM from within DDEV’s Docker containers. This means you’ll always be using the Node version configured for this project. DDEV has a bunch of shortcuts and aliases for running CLI commands (such as npm, yarn, craft and composer). Make sure your NPM package is configured for ES Modules # Our various config files will be using ES Module syntax for imports and exports. ddev npm pkg set type=module Install Vite! # ddev npm install --save-dev vite Add convenience scripts to package.json # "scripts": { "dev": "vite", "build": "vite build" } npm run dev runs Vite in dev mode. It watches and builds your files every save. Files are served through Vite’s dev server. npm run build bundles your JavaScript, CSS and static images for production. Your deploy process will usually call this script. Configure vite.config.js # Running Vite for a server rendered CMS requires some extra configuration. These options put production files in the right spot and keeps Vite’s dev server running on a specific port. import { defineConfig, loadEnv } from 'vite' // Match ports in .ddev/config.yaml and config/vite.php const HTTP_PORT = 3000 const HTTPS_PORT = 3001 export default defineConfig(({ command, mode }) => { const env = loadEnv(mode, process.cwd(), '') return { // In dev mode, we serve assets at the root of https://my.ddev.site:3000 // In production, files live in the /dist directory base: command === 'serve' ? '' : '/dist/', build: { manifest: true, // Where your production files end up outDir: './web/dist/', rollupOptions: { input: { // The entry point for Vite, we'll create this file soon app: 'src/js/app.js', }, }, }, server: { // Special address that respond to all network requests host: '0.0.0.0', // Use a strict port because we have to hard code this in vite.php strictPort: true, // This is the port running "inside" the Web container // It's the same as continer_port in .ddev/config.yaml port: HTTP_PORT, // Setting a specific origin ensures that your fonts & images load // correctly. Assumes you're accessing the front-end over https origin: env.PRIMARY_SITE_URL + ':' + HTTPS_PORT, }, } }) Add JavaScript and CSS files (Entrypoint) # Vite needs an entry point to determine what JavaScript, CSS and Front End assets it needs to compile. Remember src/js/app.js that we defined in vite.config.js? Let's make that file now. /* Make a file in src/js/app.js */ import '../css/app.css' console.log('Hello Craft CMS') We’ll also add our CSS as an import in app.js . In plain-old-JavaScript you can’t import CSS files. However, Vite uses this to figure out CSS dependencies for the project. Once Vite builds everything for production, you end up with a separate CSS file. The Craft Vite plugin includes this automatically with along your JavaScript bundle. /* Make a file in src/css/app.css */ body { background-color: peachpuff; } Install the Vite Craft Plugin # ddev composer require nystudio107/craft-vite ddev craft plugin/install vite Vite assets have different URLs in dev mode vs. production. In dev mode, assets are served from Vite’s dev server. It uses the ports that we defined in our DDEV & Vite configs. When Vite builds for production, filenames are hashed (app.js becomes app-BZi_KJSq.js). These hashes change when the contents of the file changes. Browser can cache these files indefinitely. When an asset changes, a whole new file is served. To help find these hashed filenames, Vite creates a manifest.json file. The manifest associates the name of your asset src/js/app.js to the hashed file that ends up on your server web/dist/assets/app-BZi_KJSq.js The Craft Vite Plugin by NYStudio107 takes care of all this routing for you. { "src/js/app.js": { "file": "assets/app-BZi_KJSq.js", "name": "app", "src": "src/js/app.js", "isEntry": true, "css": ["assets/app-BXePGY5I.css"] } } Configure the Vite Craft Plugin # Make a new plugin config file in config/vite.php <?php use crafthelpersApp; // Use the current host for dev server requests. Otherwise fall back to the primary site. $host = Craft::$app->getRequest()->getIsConsoleRequest() ? App::env('PRIMARY_SITE_URL') : Craft::$app->getRequest()->getHostInfo(); return [ 'devServerPublic' => "$host:3001", // Matches https_port in .ddev/config.yaml 'serverPublic' => '/dist/', 'useDevServer' => App::env('CRAFT_ENVIRONMENT') === 'dev', 'manifestPath' => '@webroot/dist/.vite/manifest.json', // Optional if using React or Preact // 'includeReactRefreshShim' => true, ]; Include your Vite bundles in Twig # The script and asset functions includes the appropriate files depending on in if you’re in dev mode or production. Clear out your templates/index.twig file and add the following snippet to your <head> tag. {# Load our main CSS file in dev mode to avoid FOUC #} {% if craft.vite.devServerRunning() %} <link rel="stylesheet" href="{{ craft.vite.asset("src/css/app.css") }}"> {% endif %} {{ craft.vite.script('src/js/app.js', false) }} Whew! ???? We’re at a point now where we can test our integration. Run ddev restart and then ddev launch . You should see “Hello Craft CMS” in your browser console. Setup Tailwind # Now that Vite is processing src/css/app.css, it’s time to install Tailwind and really get cooking. These steps are based on Tailwind’s official installation guide. But make sure to run all commands from within DDEV. Install packages # ddev npm install -D tailwindcss postcss cssnano autoprefixer # No DDEV shortcut for npx :( ddev exec npx tailwindcss init -p Configure template paths in tailwind.config.js # /** @type {import('tailwindcss').Config} */ export default { // Watch Twig templates and any JS or JSX that might use Tailwind classes. content: ['./templates/**/*.twig', './src/**/*.{js,jsx,ts,tsx,svg}'], theme: { extend: {}, }, plugins: [], } Configure postcss.config.js for production # export default { plugins: { tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}) } } Add Tailwind directives to src/css/app.css # @tailwind base; @tailwind components; @tailwind utilities; You’ll most likely need to run ddev restart again to get Vite to recognize your new Tailwind config. ❓ Do i need to set up live reload of Twig? Turns out it’s already done for you! Styling a Tailwind project means editing Twig files to change styles. It’s super handy to reload your browser every time you save. Normally you’d reach for vite-plugin-restart to get this functionality. However, Tailwind’s JIT mode automatically notifies Vite when CSS has compiled and the page should reload. That's a wrap! # That’s all it takes to configure a minimal DDEV and Vite project! We’ve found that both of these tools are easy to extend as a project get more complo'ex. Adding things like Redis or React are just a plugin install and a few lines of config away. ???? If you'd like to see this setup (and more) in a real-world Craft CMS project, check out our Craft Site Starter on GitHub. Go forth and Vite + DDEV to your heart’s desire. Full Article Code Content Management Tooling
de Craft 5: What It Means For Super Table Page Builders By www.viget.com Published On :: Wed, 14 Aug 2024 10:00:00 -0400 If you’re like us, you’ve likely built ‘page builder’ fields in Craft CMS using Matrix. But sometimes you need more than a block. We use Super Table to create ‘page sections’ that include some extra settings (like background color, controls for width, etc.). We can then nest a Matrix field to control page blocks within the Page Section (Super Table). This has worked well for us in the past but there's a new, simpler way to achieve this starting in Craft 5.Upgrading a site from Craft 4 to Craft 5 can seem intimidating. Even more so when your site relies on complex content models like the one I described above. You might think, okay I'll upgrade to Craft 5 and then look into migrating to the newer method in the future. Well, now is the time. Verbb has announced that Super Table has reached end-of-life. While there is a Craft 5 compatible version available, it won't receive updates. That means now is the perfect time to migrate your Super Table fields to native Matrix fields.Craft 5 makes the process easy by converting Matrix blocks to entry types automatically during the upgrade. This guide will walk you through the process. We'll cover preparation, the upgrades themselves, and steps to clean up afterward. As you’ll see below, the process is actually quite simple and nothing to stress over! An example page builder using Super Table with a nested Matrix in Craft 4 Preparing for the UpgradeThe first step in any upgrade is preparation. Start by backing up your site’s database. This ensures that you can restore your site to its previous state if anything goes wrong during the upgrade process. We use (and love) DDEV here at Viget, so this guide will be leveraging it. But you can easily adapt the commands if you are not. To create a database backup, run: ❯ ddev snapshot Next, review the compatibility of your installed plugins. Check the Plugin Store or the author’s site to confirm that each plugin has a Craft 5 compatible version. Make a list of any plugins that need updating or replacing. Super Table will need to be updated to at least version 4.0.0. It's also essential to familiarize yourself with the Craft 5 Upgrade Guide. This guide provides detailed information on the changes, new features, and potential breaking changes in Craft 5, helping you understand what to expect. It serves as a fantastic set of instructions to get your site upgraded.The Upgrade ProcessOnce you're prepared, you can begin the upgrade process. Per the Craft Upgrade Guide, we will update Craft and plugins at the same time. Open your editor and modify your composer.json with the new versions of your plugins. The two for sure we will need to modify are: "craftcms/cms": "^5.0.0", "verbb/super-table": "^4.0.0", After you've checked all your versions and are ready to proceed, run: ❯ ddev composer update This command will update Craft (and its dependencies) and all your plugins to the latest version compatible with Craft 5. After updating, you need to run the database migrations to complete the upgrade. This can be accomplished by running: ❯ ddev craft up During this upgrade process, Craft 5 automatically converts all of your existing Matrix blocks to entry types. This conversion requires no interaction from you, streamlining one of the most complex aspects of the upgrade. After it’s finished, all of your non-reusable matrix blocks are now their own reusable entry type. Craft 5 automatically converted the matrix blocks to their own entry types Updating Super Table Fields and TemplatesWith the Matrix blocks converted to entry types, you need to reconfigure any Super Table fields to be Matrix fields.Update Super Table Fields:Browse to Settings > Fields and edit any Super Table fieldsChange the field type from Super Table to Matrix (there will be no content loss when switching from Super Table to Matrix)Select the entry type to use (Craft has already created one for you)Save the fieldThat's it! Changing the field type from Super Table to Matrix (with no content loss) Review Your Templates: # If you've been working with Super Table content as part of entry queried data, you may not need to make template changes at all Search your templates for craft.superTable to find any direct queries of Super Table blocks and replace them with entry queries At this point, you have removed your dependency on Super Table and have a page builder entirely built with Matrix fields. What were previously Super Table blocks are now a custom Entry Type and what were Matrix blocks are now also Entry Types. This allows you to have nested Matrix within Matrix thanks to Craft’s Entrification plan. A nested Matrix in Matrix page builder at last! Our page builder looks just like before, only now it adds entries instead of blocks Cleaning Up After the UpgradeAfter updating your fields and templates, it's time to clean up. First, uninstall the Super Table plugin. Navigate to Settings > Plugins in the Control Panel to uninstall the plugin. Then remove it from your project by running: ❯ ddev composer remove verbb/super-table Thoroughly test your site to ensure everything is functioning correctly. Pay close attention to the entry types where you used Super Table fields, confirming that authoring and your front-end work as expected.Additionally, you can also take this opportunity to clean up your fields and entry types. Craft 5’s reusable fields and entry types give you ample opportunity to consolidate and Craft 5 provides new utilities to make this process as simple as possible.fields/auto-merge — Automatically discovers functionally identical fields and merges their uses together.fields/merge — Manually merge one field into another of the same type and update uses of the merged field.entry-types/merge — Merge one entry type into another and update uses of the merged entry type.That’s it!Upgrading from Craft 4 to Craft 5 and transitioning from Super Table is incredibly simple, thanks to Craft 5’s automatic conversion of Matrix blocks to entry types. Super Table will no longer be maintained moving forward, and it's better to switch to the native Craft solution for better long-term support. By following these steps, you can quickly tackle the change and take advantage of the new features and improvements in Craft 5. With careful planning, thorough testing, and a few commands, you’ll have your page builder working again in Craft 5 in no time. Happy upgrading! Full Article Code Back-end Engineering Content Management Performance
de Some Thoughts after a Major Ruby on Rails Upgrade By www.viget.com Published On :: Wed, 18 Sep 2024 10:00:00 -0400 For the past few weeks, I've been upgrading an older, fairly large Ruby on Rails app from Rails 5.2 to Rails 7.1 and from Ruby 2.7 to Ruby 3.3. During this time, I have also made the switch from Webpacker to Vite for asset bundling and made various JS and CSS upgrades to go along with that change. Here are a few takeaways from the experience. Upgrade Regularly # First, I know I am probably preaching to the choir with this one, but just upgrading your tech as you go and whenever you can is great. It prevents you from being in the position that I was in–having to make such a big jump all in one go. It also makes sure you keep getting security upgrades, and more security is never a bad thing. If you are up for it, you can even automate the process like GitHub does for their Rails upgrades or by using something like Dependabot for notifying you on when to upgrade dependencies. Commit Often # This is good advice for any project, but I think it is specifically good when working through issues that arise from upgrading. Whenever I have done a larger upgrade, there’s always at least one tricky issue that takes time to diagnose. This leads to me experimenting and trying a few different things before I figure out the actual fix. Committing often allows me to reset back away from these false paths whenever I decide to go down a new one. But I could also commit these false paths if I'm stuck, store them away in a separate branch, and come back to them later if I feel like an approach is worth a second look. Leave Code Comments # If you have a particularly confusing piece of code where its purpose or function is unclear, leave a comment. This is another piece of advice that is relevant at any time, but I found those comments to be extra helpful during this latest round of upgrades. There were several instances of code that had not been touched in years (and never touched by me) causing errors after upgrading the underlying tech. Some of these were well commented, which made it much easier to understand their purpose and decide how to fix them—or even whether to keep them. On the flip side, there were some pieces of code that were not well documented, which made fixing the errors much harder. Avoid Fancy Code # As somewhat of an alternative to the code comments, you can also just avoid fancier code. Try seeing if any code that is fairly complex can be simplified into something a bit easier to understand. Also, you want to avoid calling any private APIs that might change out from under you during your upgrade process which can lead to all sorts of weird bugs and behavior. I'm not saying do this completely in place of relevant comments, but simplifying where you can will somewhat cut back the need for them. Be Selective with Dependencies # When upgrading a massive Rails app and the Javascript associated with said app, you are often going to have to upgrade some of your dependencies as well. The more of these you have to upgrade, the higher chance you have of breaking something, so it is important to be selective when choosing these dependencies. During these upgrades, I ran into several issues caused by a dependency that really was not doing much for us in the grand scheme of things, but was causing more than its fair share of issues. If you want to read more about how to go about choosing dependencies, feel free to reference my colleague Sol's article on the subject. The End # I don't think these insights are particularly original or profound, but hopefully they give you something to think about as you make major upgrades on your own app or as you think ahead to future upgrades. Full Article Code Front-end Engineering Back-end Engineering Tooling
de Agency Partnerships: A Rising Tide Lifts All Boats By www.viget.com Published On :: Fri, 11 Oct 2024 10:00:00 -0400 For agencies like ours, success doesn’t come from being an expert at everything—a big part of it is complementing our expertise and working hand-in-hand with like-minded partners who share our values and standards.These partnerships haven't just boosted what we can do, they've created opportunities for us to engage with new clients. Here's how these collaborations have made us—and our partners—stronger:Incremental Value: We have a deep respect for expertise. We believe If you try to be an expert at everything, it’s difficult to be exceptional at anything. By teaming up with partners who bring different skills and services to the table, we get access to all sorts of proficiencies we wouldn't have on our own, adding value to prospective and existing clients. Instead of “That’s not our area of expertise”, now it’s “Yes, we can help with that.” These alliances empower us to deliver a higher level of service and comprehensive results for our clients.Mutual Scalability: Sometimes, there’s a ton of demand for what we do, and it's hard to keep up. Strategic partnerships mean we can call in reinforcements when we need them. By tapping into our partners' talent pools, we can handle even the most time-sensitive client demands without sacrificing quality or speed. And it’s mutual. When our team has time available, we are the reinforcements instead.More Leads, More Growth: In a crowded market, having a steady stream of clients is crucial. Naturally, every knock on our door can’t be a great fit. Through our partnerships, we've built a network of agencies that share our values, quality standards, and culture. By working closely together and passing leads back and forth, we've created a symbiotic ecosystem where projects flow smoothly, keeping all of us busy and growing.Reaching New Frontiers: Exploring new markets or industries can be risky, especially if you don't know the terrain. That's where partnerships come in handy. With an experienced partner on your team, it cracks open a door to reach new customers that may have otherwise been too difficult to open on your own. By teaming up with others who know the ropes in different areas (e.g. machine learning, hardware prototyping, reputation management, etc.), we can expand our reach, and establish ourselves in new segments with confidence.Getting Creative Together: Innovation flourishes when different minds come together under a set of constraints. By teaming up with partners who bring fresh ideas to the table, whether through smaller things like adding feedback to a partner’s open-source library, or bigger things like discussing AI’s impact on the web, we create a space where new approaches can flourish. (And, well, it’s our namesake after all).Professional Development: Values like “learn & grow” are part of a rewarding career at Viget. The symbiotic ecosystem created in our partner network provides opportunities for knowledge sharing. Partners help us solidify new skills including teaching others. Our own expertise shared with our peers gets reciprocated—each agency broadening the other’s horizons and leveling up one another’s teams. In the end, strategic partnerships are an important ingredient in our recipe for success. They give us access to all sorts of perks we wouldn't have on our own, and they help us build a community of successful agencies and contractors who all value the power of teamwork. Full Article Strategy
de Founders Welcoming Business Partners By www.viget.com Published On :: Mon, 21 Oct 2024 15:54:00 -0400 When Viget was founded in 1999, Andy and I used the title “Founding Partner.” We were founders of the business and also committed business partners. Within a couple of years, we switched to more specific titles: Co-Founder and President (Andy) and Co-Founder and CEO (me), but “business partners” was always the key structure.We divided responsibilities of leadership, delivery, and operations in ways that optimized our different strengths and weaknesses. Key decision making has always been a collaborative process, with healthy debate between the two of us. I know some incredible solo entrepreneurs, but for us, having a partner to lean on, leverage, and grow with has been not only rewarding, it’s been essential to Viget’s longevity and success.Also key to our success has been a founding principle of hiring incredible people who share our values and vision, value longevity and lasting relationships, and take pride in their work and careers. As they’ve joined, we’ve shared the opportunities and responsibilities that come with running a healthy business. Empowering others to lead key parts of Viget has taken us further than we’d ever gone otherwise.Being owners and partners in the business has always been a privilege, an honor, and, at times, a stressful burden. When things go well – clients are happy, the team is gelling, the finances are solid – I’m filled with pride, satisfaction, and calm. When things aren’t going well – projects are sideways, turnover seems contagious, and the metrics point in the wrong direction – I’m filled with anxiety, frustration, and self-doubt. In either scenario, having a partner to navigate the waters with has been vital.In recent years, three key areas of our business have matured thanks to the overall strength of our team and especially strong leadership. Our sales and marketing systems, tools, and strategies have fed a much more predictable revenue engine with great clients. Our client delivery processes and best practices have helped us consistently deliver value for our clients with more clarity, less risk, and better results. Finally, through some very challenging years in our industry, our culture has grown stronger and more adaptable, still centered on meaningful human connections at the core.These three business areas have been led by Zach Robbins (sales and marketing), Kelly Kenny (delivery), and Emily Bloom (culture). They are the pillars upon which all other aspects of the business are built. These leaders have truly grown up with the business, having joined more than 13, 14, and 17 years ago, respectively. Their impact first as individual contributors, then managers, and eventually strategic leaders has been immeasurable.Viget is coming up on a major milestone: we’ll soon eclipse 25 years since our founding on December 27, 1999. As Andy and I looked out at the next decade and beyond of our business, expanding our partnership became a clear goal. Embracing additional partners to not just lead their area of the business but to weigh in on all major decisions would help Viget continue to mature into the business we believe it can be. We saw an opportunity to invite others into the deep water of business partnership – the good, bad, and ugly – so that our shared decision making can be sharper, more insightful, and more strategic in the years to come. At our fall retreat last week, we announced that we're welcoming Emily, Zach, and Kelly as partners at Viget. They’ve each been here for more than half of Viget’s history, each shaping Viget into what it is today. As partners, they’ll have even more influence as we take Viget into our second quarter century and beyond. Full Article News & Culture
de RIP a Livecast #644 – Nut Cadence By metalinjection.net Published On :: Tue, 02 Nov 2021 21:52:40 +0000 Rob kicks things off talking about his experience at the GWAR show. We learn of No Nut November and somehow spend way too much time talking about Baby Daniel. We […] Full Article RIP a Livecast
de GENE SIMMONS Says VAN HALEN "Destroyed" BLACK SABBATH On Tour: "Tony Iommi Admitted It, And So Did Ozzy" By metalinjection.net Published On :: Sat, 20 May 2023 14:46:25 +0000 There will never be another Eddie Van Halen. Full Article Heavy Metal Happy Hour Black Sabbath Van Halen
de How to Keep Your Digital Design Studio Running Smoothly? By www.crazyleafdesign.com Published On :: Sat, 07 Oct 2023 09:36:56 +0000 If you want your design studio to succeed in a crowded market, it has to run smoothly and effectively. Full Article Articles Inspiration
de 3 Branding Tips for Web Design Firms By www.crazyleafdesign.com Published On :: Wed, 11 Oct 2023 08:40:04 +0000 In a sea of web design companies, standing out is both an art and a strategy. After all, if a web design firm can’t effectively brand itself, how will potential clients trust it to brand them? If you’re looking for helpful tips on how to improve your firm’s brand identity, this article has everything you […] Full Article Graphic Design
de The Psychology of Colour in Web Design: How to Influence Customer Perception By www.crazyleafdesign.com Published On :: Tue, 19 Dec 2023 19:43:13 +0000 There are over 7000 languages spoken in the world today, and it’s constantly increasing. Without the help of translation tools, many of us would not be able to make friends or do business with people beyond our geographical borders due to language barriers. However, if there is one language everybody on this planet speaks fluently […] Full Article Graphic Design
de A Guide for Writing Brochures and Uploading Them to Your Website By www.crazyleafdesign.com Published On :: Mon, 26 Feb 2024 18:43:56 +0000 Even though digital types of content have taken over the marketing landscape, brochures still hold an enduring relevance as a powerful communication device. These portable companions, often overlooked in the modern age, hold the potential to inform, inspire, and captivate, which is why they’re an indispensable asset for any business. Exploring the Evolving Role of […] Full Article Marketing
de Web Designer Must-Have Skills As A Pro in 2024 – Web Design Tips By www.crazyleafdesign.com Published On :: Fri, 30 Aug 2024 19:38:53 +0000 As we navigate the ever-evolving landscape of web design, it’s crucial to stay ahead of the curve and continuously expand our skill set. As a seasoned web designer with years of experience, I’ve witnessed firsthand the rapid changes in our industry. Today, I’ll share my insights on the must-have skills for professional web designers in […] Full Article Web Design Adobe XD advanced web design tools AI in web design CMS for web design content management systems continuous learning in web design design prototyping tools design systems ethical web design Figma for web design Git for web designers HTML CSS JavaScript microinteractions in web design mobile-first design modern web design trends must have web design skills privacy and security in web design professional web designer Responsive web design SEO best practices Sketch for web design user experience design ux design version control for web designers web accessibility web design animation web design collaboration tools web design skills 2024 web designer skills 2024 website performance optimization
de Rekomendasi Provider Slot Online Paling Populer By www.webjackalope.com Published On :: Tue, 18 Oct 2022 19:22:53 +0000 Tidak di pungkiri saat ini permainan slot sudah berkembang pesat, dimana para penggemarnya dapat mainkan slot tersebut secara online. Tidak perlu lagi pergi ke casino untuk mainkan slot ini, cukup menggunakan smartphone atau laptop yang terhubung ke internet sudah dapat bermain sepuasnya. Kelebihan dari permainan slot online ini lebih variatif dengan tema-tema permainan yang berbeda-beda. […] Full Article Trik Sicbo
de Situs Slot Online Terbaik Dengan Fasilitas Lengkap By www.webjackalope.com Published On :: Tue, 18 Oct 2022 19:23:11 +0000 Slot menjadi permainan yang banyak di pilih oleh pemain, bukan tanpa alasan game tersebut populer di kalangan pemain. Pasalnya, slot memiliki cara main yang sederhan dan mudah dipahami. Bagi pemain pemula akan sangat mudah mainkan game satu ini. Cara bermain slot sangat mengandalkan keberuntungan, para pemainnya membutuhkan sebuah strategi terbaik untuk menangkan game satu ini. […] Full Article Tutorial Perang Dadu
de Game Slot Online Dengan Keuntungan Melimpah By www.webjackalope.com Published On :: Tue, 18 Oct 2022 19:23:31 +0000 Awalnya permainan slot ini hanya dapat dimainkan di gedung casino saja. Media yang digunakan dalam permainan ini adalah mesin slot. Nantinya, pemain harus datang terlebih dahulu ke casino untuk mainkan mesin slot. Pemain juga harus antri untuk mainkan mesin slot ini, karena dulu hanya ada beberapa mesin slot saja sedangkan penggemar dari slot nya itu […] Full Article Main Poker
de The Apple TV 4K Device is a Deeply Flawed and Frustrating Product… for Me By thomashawk.com Published On :: Thu, 27 Sep 2018 00:19:25 +0000 About 12 years ago, in 2006, I had what at the time felt like the biggest technological change in my life. I switched from a PC to my first MacBook Pro. Switching computer operating systems at the time seemed like a massive chasm to overcome, but I did it and I’m glad I did. My … Continue reading "The Apple TV 4K Device is a Deeply Flawed and Frustrating Product… for Me" Full Article Apple AppleTV
de Cocktails with Don Draper, Dinner and Drinks at Oakland’s New Mid-Century Modern, Bardo Lounge and Supper Club By thomashawk.com Published On :: Sun, 02 Dec 2018 21:15:02 +0000 If, like me, you are a fan of all things mid-century modern, then you won’t want to miss Oakland’s newest Lakeshore addition, Bardo Lounge and Supper Club. Like a vintage trip with Don Draper back in time, you’ll enjoy all the little touches that make for a perfect night out for some excellent cocktails along … Continue reading "Cocktails with Don Draper, Dinner and Drinks at Oakland’s New Mid-Century Modern, Bardo Lounge and Supper Club" Full Article Bay Area News Food Oakland
de Why Twitter’s Paid Subscription Model May Be a Smart Move By thomashawk.com Published On :: Tue, 28 Mar 2023 17:12:53 +0000 Boom! And just like that Elon Musk dropped a game changer. After several months of encouraging people to pay $7/month in the form of $84/year, Elon announced yesterday that starting April 15th, only verified Twitter accounts will be eligible to be in the “For You” tab. This was also after he announced that everyone who … Continue reading "Why Twitter’s Paid Subscription Model May Be a Smart Move" Full Article Uncategorized Twitter
de Branding and Packaging Design for Di Ligúria: Italian Roots with Brazilian Flair By abduzeedo.com Published On :: Fri, 01 Nov 2024 11:52:00 +0000 Branding and Packaging Design for Di Ligúria: Italian Roots with Brazilian Flair abduzeedo1101—24 Discover the branding and packaging design of Di Ligúria, a Brazilian pizzeria, blending Italian heritage with Brazilian charm. When two Brazilian entrepreneurs with Italian heritage set out to create Di Ligúria, a pizzeria in Belo Horizonte, they wanted more than just a menu of pizzas. They sought a brand that paid homage to the flavors, traditions, and warmth of Italian culture while embodying the lively spirit of Brazilian dining. Designer Danilo Akan took on this challenge, developing a branding and packaging design that bridges these cultural elements seamlessly. Di Ligúria’s brand identity is grounded in a love for Italian cuisine, inspired by the founders’ Genoese roots and the culinary culture of the Liguria region. Akan crafted a visual concept that honors this Italian foundation while infusing a relaxed Brazilian vibe. The name “Di Ligúria” itself is a tribute to Italy’s Liguria region, signaling an immediate connection to Italian authenticity. Akan’s design approach captures this dual identity, focusing on simplicity, elegance, and a playful touch. Using negative space and bold typographic elements, Akan brings the essence of Italian tradition forward, yet retains a fresh, contemporary look that appeals to a wide audience. His design balances modern aesthetics with nostalgic elements of Italian dining, creating a memorable brand that invites customers to savor the Italian experience. The most striking element of Di Ligúria’s brand identity is its innovative typography. Akan developed a typographic style that incorporates subtle nods to pizza and pasta, the core offerings of Di Ligúria. By using negative space within the letterforms, particularly in the letter “G,” Akan brings visual references to pizza slices and pasta strands. This clever use of negative space allows the brand to visually communicate its primary products in an understated yet effective way. The logo’s typeface is both modern and classic, giving a nod to Italian design’s timeless elegance. This typographic style doesn’t just serve as a brand marker but becomes an integral part of the visual experience, subtly reinforcing the restaurant’s Italian roots while remaining approachable. Packaging that Enhances the Experience In addition to branding, the packaging design plays a significant role in delivering Di Ligúria’s identity. Packaging is designed not just for functionality but as an extension of the dining experience. By integrating graphic patterns inspired by Italian motifs, Akan’s design makes every pizza box, pasta container, and salad package an experience in itself. The patterns, echoing Italian ceramic tiles and Mediterranean styles, contribute to the visual storytelling of Di Ligúria. They evoke the charm of Italy and the idea of gathering around a table with family and friends. With packaging that feels thoughtful and distinctive, customers are reminded of the quality and heritage behind each meal. From the moment a customer sees the logo to when they unbox a fresh pizza, Di Ligúria’s branding and packaging tell a story. Each design choice reflects the founders’ desire to create a brand that goes beyond fast food and into a cultural experience, filled with Italian warmth and Brazilian vitality. Akan’s thoughtful use of typography, graphic patterns, and packaging demonstrates how design can capture a brand’s essence and elevate the customer’s experience. For anyone looking to explore Akan’s creative process and Di Ligúria’s full brand story, more details are available on his website. Di Ligúria’s branding and packaging design provide an excellent example of how design can connect cultural roots with a fresh perspective. Akan’s work successfully weaves Italian traditions into a Brazilian setting, delivering a design that’s as inviting as the food it represents. Branding and visual identity artifacts Full Article
de Innovative Branding and Visual identity using Google Slides assets By abduzeedo.com Published On :: Mon, 04 Nov 2024 13:21:18 +0000 Innovative Branding and Visual identity using Google Slides assets abduzeedo1104—24 Montag School’s branding fuses corporate trust with creative appeal, using Google Slides assets to reach diverse audiences. Creating a brand identity for an educational institution like Montag School requires balancing the rigorous standards of corporate audiences with the appeal needed to engage a younger, learning-focused crowd. In this project by Monga Design, Montag School’s visual branding comes to life with a thoughtful, dual-purpose approach that reaches across the boundaries of institutional professionalism and educational creativity. Montag School’s goal was to represent itself as a trustworthy, contemporary leader in personalized education. This meant moving away from conventional, corporate-heavy design toward a more flexible and approachable brand image. The resulting visual identity integrates both institutional authority and a fresh, dynamic appeal, capturing the trustworthiness expected in corporate circles while aligning with the openness and innovation desired in education. One of the project’s standout qualities is its focus on balance. By addressing both institutional credibility and the youthful appeal needed for online and in-person classes, the branding reinforces Montag’s positioning as a leader in educational innovation. The design combines strong visual cues—such as clean lines and modern typography—with a vibrant color palette, adding depth to both the brand’s academic and professional facets. Leveraging Google Slides for Visual Consistency An innovative aspect of this project is the use of Google Slides as a foundational tool for asset creation. This choice reflects an understanding of Montag’s operational needs and the educational landscape’s demands for accessibility and efficiency. By designing custom graphics within Google Slides, Monga Design created a versatile, cost-effective solution for maintaining consistent visuals across various educational materials. Google Slides not only provides easy customization but also aligns with the widespread use of this tool in both corporate and learning environments, allowing Montag to produce branded materials in-house without requiring extensive software training. Montag School’s branding thoughtfully considers its diverse target audiences. For in-company courses and corporate conventions, the brand maintains a polished, professional tone, ensuring credibility and trust in a business context. Simultaneously, for students attending online and in-person classes, the brand incorporates a more engaging, youthful look. The graphics, colors, and animations appeal to students by creating an approachable and modern learning environment. Monga Design introduced animations for key assets to add a layer of interactivity to Montag’s branding. These animations, crafted by Clint Studio, enhance the brand’s visual appeal while ensuring they resonate with both young learners and seasoned professionals. This visual dynamism strengthens the brand’s reach by making it adaptable to the changing demands of the educational landscape. The design team approached this branding project with a detailed, collaborative process. Their “Visual Thermometer” meeting—a strategy to explore visual possibilities rather than set rigid creative guidelines—proved essential for crafting a design that was both client-centered and creative. By aligning client preferences with design expertise, they established a visual identity that resonates on multiple levels, providing a cohesive experience for all audiences. Montag School’s branding successfully bridges the gap between education and business, providing a clear, attractive, and credible visual identity that aligns with the brand’s values. By balancing a contemporary, accessible aesthetic with the professionalism expected in corporate circles, Montag School positions itself as a modern leader in education, with a visual identity that can grow with its expanding audience. For more on this project, you can view the video case here. Branding and visual identity artifacts Credits Visual identity: Monga Design → Mateus Yuzo and Michel Refatti Motion: Clint Studio → Gustavo Brazzalle, Lucas José Galego e Luciano Burger Full Article
de GitHub x BUCK: Crafting a Dynamic Visual Identity for Universe ’24 By abduzeedo.com Published On :: Thu, 07 Nov 2024 13:44:34 +0000 GitHub x BUCK: Crafting a Dynamic Visual Identity for Universe ’24 abduzeedo1107—24 Learn how BUCK redefined branding and visual identity for GitHub Universe ’24 with monumental design inspired by code. The annual GitHub Universe event is a celebration of innovation, bringing together some of the brightest minds in software development. This year, GitHub partnered with BUCK, a renowned global creative company, to reimagine the event’s visual identity. Inspired by the theme “The World’s Fair of Software,” BUCK transformed GitHub Universe ’24 into a visually immersive experience that blended the past and future of software culture. Here’s a look at how this collaboration pushed the boundaries of branding and visual identity. The Creative Vision: Merging Tradition and Progress GitHub Universe ‘24 marked a milestone as the event’s tenth edition. This special occasion called for a branding overhaul that both paid homage to GitHub’s legacy and celebrated the event’s ongoing evolution. BUCK’s approach was rooted in capturing the spirit of World’s Fairs, where innovation and collaboration take center stage. Ward Graumans, BUCK’s Creative Director, emphasized their intent: “We aimed to create a look that celebrates this milestone while pushing the brand forward.” The visual system developed by BUCK didn’t just rehash previous designs. Instead, it evolved into a toolkit that incorporated new elements while staying true to GitHub’s core identity. Central to the branding were what BUCK called “Monuments of Progress.” These unique structures were a reinterpretation of their prior 2D shape library, elevated to represent key GitHub values. Each monument carried icons, mascots, and insider references from the developer community, merging playful aesthetics with thoughtful design. Key Elements of the Visual Identity BUCK crafted a comprehensive design system that tied together various aspects of GitHub’s event branding. The system integrated fresh color palettes, new typography, and updated logos, all influenced by the visual language of coding. The Monuments of Progress became the standout feature, serving both as iconic standalone pieces and as the basis for hero visuals. This creative concept was not just about aesthetics; it reinforced the event’s narrative, with each visual element acting as a beacon of innovation. Beyond static design, BUCK brought these monuments to life through animations and dynamic visuals. They created a suite of digital assets, from social media content to an introductory film that illuminated the event stages. This multimedia approach ensured that GitHub Universe ’24 had a cohesive yet lively visual identity, both online and in person. Collaboration and Execution The development of this branding system was a collaborative effort between BUCK, GitHub’s in-house design studio, event producers, and external partners. The process involved tight communication and shared creative insights. According to Adam Walden, VP of Brand and Corporate Marketing at GitHub, “BUCK continues to bring taste, craft, story, and incredible attention to detail to everything we do together.” This close-knit collaboration resulted in a unified event experience that resonated across different platforms. The team at BUCK didn’t just stop at creating a one-off design for the event. Instead, they developed a branding system with longevity, allowing GitHub to use these assets beyond Universe ’24. This evergreen toolkit ensures a lasting impact on GitHub’s branding efforts, providing flexibility for future campaigns and event rollouts. Impact and Legacy GitHub Universe ’24’s branding is more than a visual facelift; it’s an invitation to engage and explore. By drawing from coding elements and honoring the developer community, BUCK and GitHub have created a design system that feels both cutting-edge and familiar. The Monuments of Progress symbolize GitHub’s role as a hub of innovation, while the refined color schemes and typography elevate the brand’s visual language. This collaboration sets a new standard for event branding in the tech industry. BUCK’s creative solutions not only reflect GitHub’s ethos but also celebrate the people and projects that make the developer ecosystem thrive. It’s a testament to the power of thoughtful design and the impact of a strong, cohesive visual identity. The reimagined visual identity for GitHub Universe ’24 exemplifies how branding can serve as a narrative tool. BUCK’s designs invite viewers to think of software development not just as code, but as a world full of creativity and progress. As GitHub continues to grow, this branding system will be a cornerstone of its visual storytelling, inspiring developers and designers alike. GitHub Universe ’24, with its bold and vibrant identity, proves that a well-crafted brand can amplify the spirit of an event. BUCK’s collaboration with GitHub has set a high bar, showing how design, when rooted in community and culture, can make an event feel like a true celebration of innovation. Branding and visual identity artifacts About GitHub GitHub is the most widely adopted Copilot-powered developer platform to build, scale, and deliver secure software. Over 100 million developers, including more than 90% of the Fortune 100 companies, use GitHub to collaborate and more than 77,000 organizations have adopted GitHub Copilot. About BUCK BUCK is a global creative company that combines design, technology, and storytelling to create compelling experiences for brands. Founded in 2004, BUCK has built a reputation for outstanding craftsmanship and innovation through collaboration with a wide range of clients across the cultural and technology spheres, including Nike, Apple, Netflix, IBM, Airbnb, and Google. Recognized as an industry leader, BUCK’s trophy case includes two Emmys, multiple gold Cannes Lions, Clios, pencils, cubes, and over 200 other awards from the most prestigious competitions in the world. BUCK is in Residence, a collective of beautifully curated companies with the shared goal of empowering creative potential. Full Article
de Graphic Hunters: Pushing the Boundaries of Sports Visual Identity By abduzeedo.com Published On :: Thu, 07 Nov 2024 13:57:12 +0000 Graphic Hunters: Pushing the Boundaries of Sports Visual Identity abduzeedo1107—24 Explore how Graphic Hunters’ visual identity redefines sports branding through innovative design inspired by fashion and art. Graphic Hunters, a Dutch studio dedicated to sports branding, isn’t playing by the typical design rulebook. Instead, their newly crafted visual identity steps outside the confines of traditional sports aesthetics, introducing elements drawn from fashion and high design. The result is a high-impact, versatile identity that positions Graphic Hunters as a creative club worth joining—whether as a client or a collaborator. A New Playbook for Sports Branding At the heart of Graphic Hunters’ approach is the idea that the sports industry deserves a more refined and exclusive visual experience. This belief is woven into every part of their branding, which Monga Design and Vogau led with a clear vision. The goal was to create a system that balances functionality with creative exploration, breaking conventions while still delivering practical, adaptable solutions for various applications. This innovative take on visual identity isn’t just about aesthetics; it’s a strategy aimed at redefining the brand’s place in the market. Graphic Hunters has always described itself as a team hungry for new challenges, and now, their brand identity reflects that spirit. The new look aims to make the studio stand out in the sports arena and beyond, appealing to clients and team members who value originality and impact. Graphic Hunters’ identity combines familiar elements from the sports world—like motion and heat—with unexpected treatments. The design team drew inspiration from fashion and abstract art to create a visual language that transcends typical sports branding. This cross-pollination of ideas manifests in several core elements: 1. Typographic Experimentation: Instead of relying on traditional sports typefaces, the team played with a variety of fonts that feel bold and contemporary. Typography serves as both structure and disruption, bringing energy to each layout. 2. Photographic Treatments: The identity includes photographs that have been creatively manipulated, breaking up the grid and adding an element of surprise. This technique turns static images into dynamic design features, echoing the constant motion of sports. 3. Grid System and Stickers: To keep the brand’s applications cohesive yet flexible, a structured grid underpins the design. However, this is cleverly offset by playful elements like stickers and graphical interventions, which keep the brand feeling fresh and exciting. One of the biggest challenges was making the visual system adaptable yet creatively open. Sports branding often leans into themes of power and motion, but Graphic Hunters wanted to do more. The result is a brand that’s equally at home on a team jersey or a digital campaign, seamlessly moving between refined, impactful moments and bold, playful expressions. This adaptability speaks to the studio’s ethos of being a “creative club,” where everyone is encouraged to push the boundaries. Another essential aspect was research. The design team explored references beyond the sports realm, looking at high fashion and experimental graphic design. This broader inspiration palette allowed Graphic Hunters to create something genuinely unique for the industry. The identity’s experimental typography and abstract motifs capture the feeling of heat and energy—core elements of sports—while grounding them in a sophisticated design language. Elevating Sports Design Beyond the Field By combining these unexpected references with a strong foundation of sports elements, Graphic Hunters has crafted a visual identity that is both striking and functional. It stands as a testament to the idea that sports design can be more than bold fonts and action shots. It can be a narrative of innovation and exclusivity, appealing to an audience that appreciates both the adrenaline of sports and the sophistication of high design. Graphic Hunters’ reimagined branding proves that sports-focused design can be just as experimental and refined as any high-fashion brand. It’s a visual identity that elevates the sports studio into a space where design meets performance, art meets action, and innovation becomes the new norm. As the brand continues to grow, this identity will serve as a powerful statement of their ambition: to bring high-impact, original design to the world of sports, one project at a time. Branding and visual identity artifacts Credits Authors: Monga Design, Vogau and Clint Studio Visual identity: Monga Design (Mateus Yuzo, Michel Refatti) and Vogau (Carlos Eduardo Marin, Gabriela Colebrusco Peres) Motion: Clint Studio (Bruno Vitalino, Danilo Coelho, Gustavo Brazzalle, Lucas José Galego, Luciano Burger Full Article
de Explore ChainGPT Labs’ Web3 Brand Identity & Web Design By abduzeedo.com Published On :: Tue, 12 Nov 2024 03:23:35 +0000 Explore ChainGPT Labs’ Web3 Brand Identity & Web Design abduzeedo1111—24 Discover ChainGPT Labs’ unique Web3 branding and web design with seamless 3D animations and a modern interface. ChainGPT Labs stands as an ambitious venture, propelling innovation in the blockchain and Web3 startup world. A project backed by the ChainGPT team, this platform provides strategic funding, incubation, and acceleration services tailored for the Web3 ecosystem. To visually represent such a forward-thinking initiative, a distinctive and cohesive brand identity was crucial. The design challenge was clear: introduce ChainGPT Labs as a part of the existing ChainGPT ecosystem while ensuring it had its unique presence. The team behind this creative endeavor adopted a strategy that balanced modernity with a recognizable brand connection. Typeface Selection and Visual Cohesion One of the design cornerstones is the typographic identity. The chosen typeface blends sleek, experimental, and monospace styles, reminiscent of sci-fi aesthetics yet grounded enough to maintain clarity. This combination brings a futuristic yet approachable vibe, mirroring ChainGPT Labs’ mission of bridging advanced technology with user-friendly design. The website, crafted with a focus on interaction, features seamless 3D animations. These animations not only add depth but also engage users in an immersive digital experience. The modern, functional interface ensures smooth navigation while highlighting essential content. The design isn’t just about aesthetics; it delivers on usability, ensuring every visual element contributes to a cohesive narrative. 3D Animations: Bringing Ideas to Life 3D animation plays a pivotal role in elevating the digital experience. Each animation is thoughtfully integrated, making the browsing experience lively without compromising performance. These elements align with Web3’s ethos, suggesting a digital landscape that’s both dynamic and innovative. Balancing Innovation and Brand Familiarity Designers also needed to ensure that ChainGPT Labs felt like an extension of ChainGPT’s established identity. The visual ecosystem leans into bold aesthetics while subtly referencing familiar brand cues. Strategic use of color, shape, and layout ties the Labs’ identity back to its origins, achieving a harmonious balance between innovation and brand recognition. Why It Matters for Design Enthusiasts For graphic and interface designers, ChainGPT Labs offers an inspiring case study in brand expansion. The project exemplifies how visual elements can maintain brand consistency while pushing creative boundaries. This thoughtful integration of typography, 3D animation, and a user-focused interface marks a new chapter for digital design in the Web3 space. For a full breakdown of the design elements, visit the work of Sigma Software Design at https://sigmasoftware.design/. Visit the website at labs.chaingpt.org Web design artifacts Full Article
de Exploring Editorial Design in ‘EN TORNO A LA MATERNIDAD’ By abduzeedo.com Published On :: Tue, 12 Nov 2024 03:31:25 +0000 Exploring Editorial Design in ‘EN TORNO A LA MATERNIDAD’ abduzeedo1111—24 Dive into the thoughtful editorial design of ‘EN TORNO A LA MATERNIDAD,’ crafted to resonate with themes of motherhood. Pau Marín’s project, EN TORNO A LA MATERNIDAD, explores the essence of motherhood through a refined editorial design that merges visual storytelling with emotive impact. The design embodies the themes of care, strength, and the cycle of life, delivering a visual experience that’s as insightful as it is aesthetically appealing. Design Approach and Concept At the heart of this project lies a narrative-driven approach. Marín carefully crafted the layout to reflect the nuances of motherhood, using visual metaphors and deliberate design choices. The typographic elements are minimal yet impactful, guiding the reader’s eye through the content seamlessly. Serif and sans-serif typefaces interplay to emphasize the transitions between vulnerability and empowerment that define the maternal experience. Photography plays a crucial role in this work, capturing tender moments that resonate with authenticity. Each image, strategically placed, adds layers of meaning, complementing the textual narrative. Marín’s ability to weave text and imagery together in a harmonious flow highlights the power of good editorial design to evoke emotions. Layout and Visual Hierarchy Marín’s layout decisions ensure readability while also inviting reflection. White space is used masterfully, giving the design room to breathe and allowing the reader to absorb the emotional weight of the content. The flow from one spread to the next feels intentional, never rushed, mirroring the natural rhythms of life. The visual hierarchy emphasizes important sections, using bold headings and thoughtful subheadings. This structure not only aids in navigation but also underscores key messages without overwhelming the viewer. The balance between text, imagery, and negative space is a testament to Marín’s understanding of editorial design principles. Thematic Consistency and Visual Metaphors Colors in the project echo themes of nature and nurture, employing soft pastels and earth tones. These choices create a calming yet evocative palette that enhances the emotional resonance of the design. Visual metaphors, like the cyclical patterns in layouts, symbolize the never-ending cycles of care and love associated with motherhood. For designers and illustrators, EN TORNO A LA MATERNIDAD serves as an inspiring example of how editorial design can amplify storytelling. The project encapsulates the emotional and cultural dimensions of its subject matter, offering a blueprint for blending design and narrative seamlessly. Discover more about this project and Pau Marín’s impressive portfolio on Behance at behance.net/paumarn1. Editorial design artifacts Credits and thanks Fina Perelló Andreu Maria José Fuentes Perelló Nuria Fuentes Perelló Nuria Marín Fuentes Claudia Marín Penella Pablo Lázaro Ballester Diane Gello Irene Martinez De La Vega Andrea Peregrín Moreno Coribel Zubillaga García Full Article
de FLIPPO Pet Food: A Fresh Take on Branding and Packaging Design By abduzeedo.com Published On :: Tue, 12 Nov 2024 03:39:53 +0000 FLIPPO Pet Food: A Fresh Take on Branding and Packaging Design abduzeedo1111—24 Discover FLIPPO Pet Food’s playful branding and clean packaging design, making waves in the pet food industry. FLIPPO Pet Food is more than just a brand; it’s a lively celebration of real, natural nutrition for pets. Developed in Spain, FLIPPO takes a bold stand against traditional pet kibble, ushering in a wave of wholesome, fresh ingredients for our loyal companions. This design-centric approach comes to life through FLIPPO’s unique branding and eye-catching packaging, crafted by the talented team at invade design, Colombia. A Visual Feast for Pet Lovers FLIPPO’s brand identity is anything but conventional. It combines playful illustrations, vibrant colors, and friendly typography to create an experience that instantly captures attention. The visual storytelling here is intentional, aimed at communicating the brand’s commitment to quality and its promise of real food for pets. The design invites pet owners to rethink what they feed their furry friends, making every interaction with the packaging memorable. One of the standout features of FLIPPO’s design is its use of clean lines and engaging illustrations. Each packaging element feels like an invitation to a healthier, happier lifestyle for pets. The color palette bursts with energy, reflecting the brand’s fun and light-hearted personality while reinforcing its serious commitment to pet health. Thoughtful Typography and Brand Messaging Typography in FLIPPO’s design strikes a fine balance between playful and practical. The brand uses bold, easy-to-read fonts that ensure key messages are clear, whether they’re displayed in store aisles or in a social media feed. This typographic choice complements the visuals, making the overall design both appealing and accessible. Brand messaging leans into humor and relatability. FLIPPO’s playful copy engages pet owners with a tone that’s both fun and genuine. It’s a reminder that feeding our pets shouldn’t be a chore but a joyful experience, one that prioritizes their well-being. From Concept to Reality: Behind the Scenes The team at invade design worked meticulously to craft an identity that stands out in the competitive pet food market. Photography by Serena.Studio captures the freshness and quality of the ingredients, enhancing the appeal of the design. Together, these elements create a brand ecosystem that feels cohesive and authentic. For those interested in design inspiration, FLIPPO offers a masterclass in branding and packaging that balances fun with function. Check out the full project and more by invade design on Behance at https://www.behance.net/madebyinvade. Branding and packaging design artifacts Credits Identidad de Marca: invade, Colombia Team: María Vélez Agustin Hoyos Mariana Castrillón Tania Flórez Tomás Saldarriaga Mateo Ríos Fotografía: Serena.Studio Full Article
de Gardeners and Climate Change By www.ecology.com Published On :: Wed, 11 Mar 2015 22:40:05 +0000 Courtesy of Climate Nexus Gardening is a beloved hobby for millions of people across the country. Whether motivated by healthy outdoor exercise, the satisfaction of eating delicious home-grown fruits and veggies, or the artistic pleasure of a beautiful flower arrangement, … Continue reading → Full Article In the Botanical & Natural Realms Climate Change gardening Gardens seasons
de Gardening for Pollinators By www.ecology.com Published On :: Mon, 20 Apr 2015 10:39:13 +0000 USDA Forest Service Follow these simple steps to create a pollinator-friendly landscape around your home or workplace Use a wide variety of plants that bloom from early spring into late fall Help pollinators find and use them by planting in … Continue reading → Full Article Art & Practice of Garden Making gardening native landscaping native plants Pollinators
de Nature in the Space – Biophilic Design By www.ecology.com Published On :: Fri, 08 May 2015 10:39:03 +0000 By Joe Zazzera A brief history of biophilic design patterns in interior spaces “Nature in the Space” in biophilic terms means any design interventions that forge a direct, physical and ephemeral presence of nature in a space or place. One … Continue reading → Full Article Urban Environs & Landscapes green architecture green roof Green Wall nature indoors
de An Evening Garden By www.ecology.com Published On :: Tue, 09 Jun 2015 08:13:23 +0000 By University of Illinois, ACES To those who work all day, gardens are a calming refuge when returning home. For most, the primary time to enjoy your efforts is in the evening. A University of Illinois Extension horticulture educator said gardeners … Continue reading → Full Article Art & Practice of Garden Making backyard gardens Gardens perennial gardens
de Straw Bale Gardening By www.ecology.com Published On :: Mon, 06 Jun 2016 17:53:52 +0000 Article By Elizabeth Wahie University of Illinois ACES News Videos By Bonnie Plants & Rob Bob’s Backyard Farming For gardeners with limited mobility, poor soil conditions, or limited space to garden, straw bale gardening may be the way to go, … Continue reading → Full Article Art & Practice of Garden Making backyard gardens straw bale garden Urban Garden
de Looking Forward à la Française: Gardens of Thought By www.ecology.com Published On :: Fri, 06 Apr 2018 20:23:01 +0000 The upcoming 2018 International Garden Festival of Chaumont-sur-Loire in France is again bringing about fresh, imaginative realizations of gardens in its 27th Edition: “Jardins de la Pensée” or “Gardens of Thought.” From referencing the worlds of such famous writers as … Continue reading → Full Article In the Botanical & Natural Realms 20th International Garden Festival French gardens International Garden Festival Sculptillonnage
de 9 Social Media Marketing Tips to Deliver Better Results By designshard.com Published On :: Wed, 15 Mar 2017 19:36:25 +0000 Social media has quickly morphed into one of the most important marketing channels. Within a few short years, it has moved from being a mere fad into the most powerful marketing tool on the planet. Facebook, for example, is just over a decade old but no business can afford not to have a Facebook marketing … Continue reading 9 Social Media Marketing Tips to Deliver Better Results The post 9 Social Media Marketing Tips to Deliver Better Results appeared first on Design Shard. Full Article Tips & Tricks Marketing Social Media
de Top Tips for Developing a Creative Flyer By designshard.com Published On :: Tue, 02 May 2017 08:59:48 +0000 Flyers are a fantastic way to promote your business, especially considering how easily they can be distributed among members of the public. Since you’re likely to be spending your hard-earned cash on this very effective marketing tool, it is essential to take the right steps when designing your flyer, ensuring you display your skill set … Continue reading Top Tips for Developing a Creative Flyer The post Top Tips for Developing a Creative Flyer appeared first on Design Shard. Full Article Tips & Tricks Colour Flyers Texture
de Wrike for Designers and Creatives By designshard.com Published On :: Fri, 29 Sep 2017 12:38:46 +0000 Collaborating on an online project management software for marketing is a huge part of being a designer or a creative, and more often than not you are juggling more than one task or project at a time. This makes managing a creative project online for creatives particularly difficult and what’s more, the line managers or … Continue reading Wrike for Designers and Creatives The post Wrike for Designers and Creatives appeared first on Design Shard. Full Article Tips & Tricks managing a creative project online marketing project management tool online project management software for marketing task workflow management software team scheduling software Tools Wrike
de Top 50 Design Blog Articles and Sites From 2017 By designshard.com Published On :: Thu, 21 Dec 2017 14:02:40 +0000 It’s nearly the the close of 2017. Lots has happened and I’ve been reading about UX, Design Thinking, Design Systems, Agile, Block Chain, Crypto currencies, Machine Learning, AI, Startups and plenty more. 2018 seems to be shaping up to be an exciting year for digital! (and maybe we’ll stop asking ourselves, why didn’t we all … Continue reading Top 50 Design Blog Articles and Sites From 2017 The post Top 50 Design Blog Articles and Sites From 2017 appeared first on Design Shard. Full Article Inspiration Design Design systems Links Mobile Reading UX
de Can Your Logo Maker Do This: A Real Designer vs A Logo Maker By designshard.com Published On :: Fri, 16 Nov 2018 22:45:46 +0000 Every business needs a logo and all major ones will view it as a key aspect of their brand building. A logo is the first impression a customer will get of your brand, so it has to look clean, professional and tell a story about who you are and what you do. Which is … Continue reading Can Your Logo Maker Do This: A Real Designer vs A Logo Maker The post Can Your Logo Maker Do This: A Real Designer vs A Logo Maker appeared first on Design Shard. Full Article Tips & Tricks Design Logo
de What Is a Website Redesign & How To Plan For It Effectively By designshard.com Published On :: Thu, 22 Nov 2018 10:45:24 +0000 Websites have become essential marketing tools for businesses and it’s mandatory to keep them up to date and fresh always. This can be justified with the help of the statement made by a Danish computer scientist, Jakob Nielsen: “A bad website is like a grumpy salesperson.” This is where the need for website redesigning comes … Continue reading What Is a Website Redesign & How To Plan For It Effectively The post What Is a Website Redesign & How To Plan For It Effectively appeared first on Design Shard. Full Article Web Design Design Marketing
de A few photos I just took around our foggy garden this morning! By www.neilcreek.com Published On :: Wed, 04 Jun 2014 03:22:28 +0000 Full Article Uncategorized
de Redesign of Stavanger Golf Club Website ????️ By jepson.no Published On :: Fri, 26 Mar 2021 09:29:09 +0000 I’ve helped Stavanger Golf Club through the years with webdesign and admin, and it was due for a refresh. I decided to try a no-code approach with WordPress. I first designed the site in UXPin (see version here), and then installed a fresh Local install of WordPress to get started. I used Astra theme along… Full Article Blog
de 15 Best WordPress Plugins for Sidebars and Widgets By www.isitwp.com Published On :: Fri, 21 Jul 2023 07:03:09 +0000 Are you looking for the best WordPress plugins for your site’s sidebar and widgets? Most website owners use sidebars mainly for 2 purposes: That said, there are so many ways to get creative with these areas to improve user experience, add SEO elements, and make your site’s design more appealing. Check out how WPBeginner uses […] The post 15 Best WordPress Plugins for Sidebars and Widgets first appeared on IsItWP - Free WordPress Theme Detector. Full Article WordPress Plugins best wordpress plugins sidebars widgets wordpress plugins wordpress plugins for sidebars and widgets
de 7 Best Divi Builder Alternatives for Your Website (Compared) By www.isitwp.com Published On :: Thu, 14 Sep 2023 11:05:55 +0000 Are you looking for Divi alternatives to help build your website? Divi is one of the most popular WordPress builders, but some users may find Divi’s interface to have a bit of a learning curve, making it harder for beginners to catch on. There are other builders that are more user-friendly and designed for anyone […] The post 7 Best Divi Builder Alternatives for Your Website (Compared) first appeared on IsItWP - Free WordPress Theme Detector. Full Article Resources best divi builder alternatives divi alternatives divi builder divi builder alternatives
de Ben Dunkle on designing icons for WordPress [video] By wpcult.com Published On :: Tue, 22 Oct 2024 06:08:52 +0000 I know many people attendedWordCamp 2009, in fact I believe there were 700 plus attendees. Well not every one showed up at the development day which was held at the Automattic office on pier 38. WordCamp Development day was a BarCamp style event, and I was able to record a couple of the conversations. Here is a recording from Ben Dunkle (designer of the WordPress admin icons in 2.7+) The post Ben Dunkle on designing icons for WordPress [video] appeared first on WPCult. Full Article Themes WordCamp WordCampSF You Tube
de Sam Bauers on bbPress [video] By wpcult.com Published On :: Wed, 23 Oct 2024 18:08:09 +0000 As mentioned in a previous post, I was able to record about 85% of the WordCampDev topic bbPress. The post Sam Bauers on bbPress [video] appeared first on WPCult. Full Article WordCamp bbpress Sam Bauers WordCampSF
de Initial dot org release of VideoPress By wpcult.com Published On :: Thu, 24 Oct 2024 06:08:34 +0000 Version 0.1.0 of VideoPress now available for you self hosted WordPress blog. The post Initial dot org release of VideoPress appeared first on WPCult. Full Article Cult Plugins VideoPress
de Guide to Building a Pinterest Presence for Bloggers By wpcult.com Published On :: Tue, 29 Oct 2024 18:08:11 +0000 Introduction Why Pinterest Deserves Your Attention Now, let’s talk numbers—impressive numbers. With over 450 million active dreamers and doers, Pinterest is not merely thriving; it’s bustling with opportunity. For the astute blogger, these aren’t just stats—they represent a bustling metropolis of potential readers, engaged followers, and eventual customers. Each user is searching, planning, and ready […] The post Guide to Building a Pinterest Presence for Bloggers appeared first on WPCult. Full Article Social Media Marketing Tips & Tricks Traffic Pinterest
de Use WordPress to print a RSS feed for Eventbrite attendees By wpcult.com Published On :: Wed, 30 Oct 2024 18:08:25 +0000 Today I was working on the WordCamp.LA site. I was trying to show the “attendee list” on the attendees page with out having to update the page every day. Since I am using EventBrite to promote and sell ticket to the event I can collect info from there list. Evey one who purchases a ticket […] The post Use WordPress to print a RSS feed for Eventbrite attendees appeared first on WPCult. Full Article Tips & Tricks Eventbrite functions.php RSS