liquidfish current https://liquid.fish/current en-US daily 1 Always in Motion https://liquid.fish/current/always-in-motion Thu, 25 Mar 21 14:59:24 -0500 Coming from a so-called traditional advertising agency to a digital one has been quite an interesting experience for me as a creative. It has proven to be the challenge I wanted and gladly accepted back in September. 

 

After working as a creative director for over 15 years, concepting and scripting for TV and Radio commercials, web videos, integrated activations, and coming up for regional and national campaign concepts for brands such as State Farm, Pepsi, Sprint, AARP, Honda, Jeep both for the U.S. Hispanic and General markets I now find myself in a whole new environment which is really exciting, as it’s all about finding new ways to disrupt and enhance the way people experience websites, ads, and apps via creative design. All that with a refreshed entrepreneurial spirit. 

 

 

I kind of said bye to the traditional ways of storytelling and welcomed a new realm of possibilities that the digital space provides. From creating branding and visual identities to working on a fully custom and ground-breaking app for the entertainment industry - and everything that goes in between. i.e. writing monthly blog posts, refreshing existing websites, coming up with new and custom ones, strategizing and concepting for an up-and-coming solar company, and even brainstorming new possible digital products and services for the finance, real estate, and sports industries.

 

At liquidfish, we’re set to become a creative think-tank rather than your regular digital agency. Granted, this transformation is not something that happens within just a couple of months, it could possibly take years. But as long as we keep ourselves “always in motion” towards that direction, the chances of turning into an incubator, and a hub for new digital ideas increase by the minute. It’s a matter of believing in it collectively and working alongside talented and passionate people. And that’s precisely what I have found here in this infinite pool. A group of skillful designers, marketers, content creators, and developers who got what it takes to take us where we aim to be. I feel very fortunate to be working with this group of young professionals, who have made it easy for me to fit in and exchange points of view - agree to disagree - and much more.     

 

I’m an idea-people. A creative director (So they say). I’m no designer.

Well, that is if we stick to the side of a designer that implies proficiency and knowledge of programs like Adobe XD, Marvel, Figma, InDesign, Sketch, Webflow… But if we go by the core definition of a designer, then yes… I can proudly say that I’m one. I’m in essence a problem-solver. A person who thinks and designs concepts intended to provide a solution to any sort of communication and business needs. This type of ingenuity and vision is equally applicable to campaigns being broadcasted in traditional media as it’s to digital sites and experiences. 

 

Hence, my role as creative director here at liquidfish revolves around infusing the need of coming up with new ways to create solutions and proactive proposals for our current and potential partners. It’s not so much about being the final say, or the design lead, when it comes to UI and UX (Thankfully, we count on savvy and forward-thinking web designers who have a solid grasp and knowledge on this matter; big kudos to Izzy, Ilyas and Kayla). So, by working together with them, and our kick-ass developers, and learning from each other, we can bring to the table new ways to reimagine a business from the ground up. 

From basic branding or full visual identity, to interactive experiences that not just look good but that work. After all, that's what design is all about: ensuring that creations transcend beyond being pleasant to watch, to also being relatable, people-friendly, and functional both for the people and our partners.
 

As a creative director, I’d like to remind everyone that we are not creating experiences for users, but for humans. For real people, not for cut-and-dried profiles coming out of sterile market research. We need to create new digital interactions taking into high consideration their emotions, our emotions, which are ever-changing and hard to measure in a spreadsheet but that are key to moving people and the sales needle in any business.

My role then is to embed those emotions into compelling web stories, and from there, push to create real immersive sites, engaging spaces, virtual ambiances - not so much 2d pages, which, to put it bluntly, are nothing but plain and boring digital brochures. For that, we must think like explorers; taking every new project as an opportunity to innovate, to try something new, not to repeat the same formula across the board. That’d lead us to stagnation. 

 

Creativity, on the other hand, needs to be fluid. Open. It needs to be always in motion. Besides, it’s a human gift we all carry from within. It runs through our veins. We’re all capable of creating new ways and solutions that help us improve our lives and benefit everyone in the long run. I’m a true believer in that. And that’s what I have to offer to my team. The passion and the willingness to design and solve problems as they come. Provide business solutions that make people smile, engage, comment… and partners coming back to us for the next creation.    

 

Below please find a glimpse of some of the work we have created so far in the past 5 months. I’m really proud of it, yet… I do want to encourage myself and the whole team to dive even deeper while shooting for the stars. It’s our duty as creators to stay away from the still comfort zone - from the ‘copy/paste” pond -  And that can be achieved by always being in motion. 

 

 

 
]]>
building the ocean with three.js https://liquid.fish/current/threejs Fri, 26 Feb 21 16:26:30 -0600 When designing for a digital space, creating an intriguing and interesting experience is an important part that can often be overlooked. Inviting users to immerse themselves in your site requires more than just a flat page. Here at liquidfish, we love to push the boundaries of our creativity. A great way to accomplish this, is to create unique animation experiences. We like to do this with three.js.

Three.js is a 3D JavaScript library that utilizes WebGL and is an easy way to get into 3D web animations for beginners.

Today, we’re going to build a 3D ocean environment, including a sun and sky. Don’t worry if most of what we discuss doesn’t make much sense at first. It will eventually become easier with repetition. Three.js has concise documentation and there are plenty of other great resources here.

Every line of code that we write today can be found here:

Clean Ocean

I encourage you to code along with us as you explore this tutorial in codepen. Be sure to include the three.js library in your JavaScript and <div class="canvas"></div> in your HTML. With that out of the way, let's get started!

At the core of any three.js project, we need a camera, scene, and the renderer. An interesting way to visualize this is to think of it as if we are making a movie. We need something to film our movie (camera), we need somewhere to shoot it (scene), and a movie theatre to show it (renderer).

But first, let's import all our required JS modules we will need later.

import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

import { Water } from 'https://threejs.org/examples/jsm/objects/Water.js';

import { Sky } from 'https://threejs.org/examples/jsm/objects/Sky.js';
  1. OrbitControls allow the camera to orbit around a target.
  2. Water and Sky are 3D shaders that three.js provides out of the box.

Next, we are going to define our main function where most of our logic will be placed. We'll call it the SceneManager().

function SceneManager(canvas) {
    // Magic goes here
}

I've broken down the components into functions that are easier to read and not a wild mess of code, which some three.js projects tend to become.

Like I said earlier, we need to set our scene, renderer, and camera.

A renderer is the main object in three.js, as it renders or draws the 3D space that we create based off of the scene and camera we give it.

To create a scene we simply call the scene object and return it inside of our buildScene function.

function buildScene() {
  const scene = new THREE.Scene();
  return scene;
}

Next, we want to create our camera. The PerspectiveCamera class accepts 4 parameters (field of view, aspect ratio, near plane and far plane).

function buildCamera() {
  const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 20000);
  camera.position.set(30, 30, 100);
  return camera;
}

Next, we set our renderer. You may notice we pass in a canvas argument. This will be our html element where we want to place our 3D space inside.

function buildRenderer(canvas) {
  const renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  canvas.appendChild(renderer.domElement);
  return renderer;
}

Now that we have the core of any three.js project set up, we can now create and append objects to our scene. Let's start off by building the sky, using the sky shader we imported.

All we need to do is set the scalar and then append it to our scene with the add method.

function buildSky() {
  const sky = new Sky();
  sky.scale.setScalar(10000);
  scene.add(sky);
  return sky;
}

Next, we are going to build our sun.

function buildSun() {
  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  const sun = new THREE.Vector3();

	// Defining the x, y and z value for our 3D Vector
  const theta = Math.PI * (0.49 - 0.5);
  const phi = 2 * Math.PI * (0.205 - 0.5);
  sun.x = Math.cos(phi);
  sun.y = Math.sin(phi) * Math.sin(theta);
  sun.z = Math.sin(phi) * Math.cos(theta);

  sky.material.uniforms['sunPosition'].value.copy(sun);
  scene.environment = pmremGenerator.fromScene(sky).texture;
  return sun;
}
  1. PMREMGenerator builds a Prefiltered, Mipmapped Radiance Environment Map (PMREM) from a cubeMap environment texture
  2. Vector3() defines a 3D Vector and is an ordered triplet of numbers (labeled x, y, and z)

Next, we are going to build our ocean or water plane.

function buildWater() {
  const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
  const water = new Water(
    waterGeometry,
    {
      textureWidth: 512,
      textureHeight: 512,
      waterNormals: new THREE.TextureLoader().load('', function ( texture ) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      }),
      alpha: 1.0,
      sunDirection: new THREE.Vector3(),
      sunColor: 0xffffff,
      waterColor: 0x001e0f,
      distortionScale: 3.7,
      fog: scene.fog !== undefined
    }
  );
  water.rotation.x =- Math.PI / 2;
  scene.add(water);
  
  const waterUniforms = water.material.uniforms;
  return water;
}

And just for fun, let’s create a simple sphere and set our orbit controls.

function buildSphere() {
  const geometry = new THREE.SphereGeometry(20, 20, 20);
  const material = new THREE.MeshStandardMaterial({color: 0xfcc742});

  const sphere = new THREE.Mesh(geometry, material);
  scene.add(sphere);
  return sphere;
}

function setOrbitControls() {
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.maxPolarAngle = Math.PI * 0.495;
  controls.target.set(0, 10, 0);
  controls.minDistance = 40.0;
  controls.maxDistance = 200.0;
  controls.update();
  return controls;
}

We'll define our function and call in our animate loop, which will redraw the scene every time the screen is refreshed (typically around 60 times per second).

this.update = function() {
  // Animates our water
  water.material.uniforms[ 'time' ].value += 1.0 / 60.0;

	// Reposition our sphere to appear to float up and down
  const time = performance.now() * 0.001;
  sphere.position.y = Math.sin( time ) * 2;
  sphere.rotation.x = time * 0.3;
  sphere.rotation.z = time * 0.3;
	
	// Finally, render our scene
  renderer.render(scene, camera);
}

To allow our scene to adjust to the browser window being resized, we set the following event listener and its callback to adjust accordingly.

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);

Now at the very top of our SceneManager function, we can call all the functions we just made, select our canvas element we've defined in our HTML, and call our sceneManager function while passing in our element as an argument.

const scene = buildScene();
const renderer = buildRenderer(canvas);
const camera = buildCamera();
const sphere = buildSphere();
const sky = buildSky();
const sun = buildSun();
const water = buildWater();
const orbitCon = setOrbitControls();

const canvas = document.getElementById("canvas");
const sceneManager = new SceneManager(canvas);

Last but not least, we’ll create an animate function and immediately call it to render and animate our scene. We’ll also call our update method from the SceneManager.

function animate() {
  requestAnimationFrame(animate);
  sceneManager.update();
}
animate();

By now, you should see a nice, calm ocean with a glowing sunset… along with a random sphere floating up and down. Oh, the joys of three.js!

There you have it, we just built a 3D ocean in three.js. Although I didn’t explain all of the concepts in depth within this blog, I encourage you to keep learning about three.js through the useful links provided above and through the three.js documentation.

Happy coding!

]]>
myth #001: copywriting https://liquid.fish/current/myth-001-copywriting Wed, 17 Feb 21 15:36:39 -0600 Look, I’m not here to claim that copywriting is the hardest job in the world (I taught high school, after all!). However, its power is often underestimated and undervalued. Copywriting myths abound all around us, so it’s time to debunk them — whether you’re a fellow copywriter seeking kick-ass rebuttals or you just want to convince your boss that your website copy needs a little professional TLC. 

 

Myth #1: “Anyone can write copy. It’s easy.”

 

“Copy” just means “words,” so yes, technically anyone can write it. But using that same logic, anyone who can draw a triangle can also design a logo. Good copywriting requires training, research, practice, and mastery of language. While a copywriter’s end goal is to produce work that’s easy to understand, that doesn’t make it easy to write. Simple doesn’t mean easy. It’s difficult to distill complex information into digestible tidbits that get results. In the words of French mathematician Blaise Pascal: “If I had more time, I would’ve written a shorter letter.” 

 

Myth #2: “Copywriting is too expensive.”

 

Yes, good copywriting is an investment, but your return on that investment will be tremendous. It pays for itself over time. A proven copywriter will devote their full expertise, attention, and energy to crafting a compelling story that motivates your customers to take action — whether that’s subscribing to your newsletter or making a purchase. 

 

Myth #3: “I know my business better than anyone else.”

 

Owning your own business is a rewarding, exhausting labor of love. It can also cause serious tunnel vision. When you run a company, it’s easy to miss key insights that will help you boost your brand equity and outperform your competition. Your copywriter can lend a fresh set of eyes that help you uncover the magic that’s been lurking under your nose all along.  

 

Myth #4: “Good copywriting has to be creative, clever, and funny.” 

 

Good copywriting is not about showing off with the right sentences. It’s about showing up with the right solutions. Can cleverness work in our favor sometimes? Absolutely, but only when it’s strategically sound, tasteful, and consistent with your brand’s voice. Some brands have adopted a humorous, irreverent tone from inception, like the outfitter Moosejaw (check out their joke in the fine print below). They’ve earned the right to pepper their copy with jokes, and their customer base expects it. 

 

 

But Patagonia? Their brand identity revolves around their environmental advocacy, not their wit. If they suddenly started dropping dad jokes left, their customers would feel like they’d scored an unsolicited front-row seat for a cringeworthy midlife crisis. 

 

 

Myth #5: “Only formal language builds credibility.”

 

Rigid, formal language doesn’t automatically make a brand more credible (or likable). It makes you sound like that guy at the party who’s read a lot of Shakespeare and wants you to know it. It alienates your audience, and it doesn’t allow your brand’s authentic personality to shine. Conversational copy is disarming, attention-grabbing, and effective. It simulates a real conversation, one that makes your audience feel seen, heard, and understood. This fosters a far deeper sense of loyalty than any big-money Scrabble word ever could.  

 

Let’s keep the conversation going. 

Are you an entrepreneur who’s considering a complete overhaul of your website copy (or just a little polish)? Contact us today. Our think tank of creative experts would love to help you find your voice, solidify your message, and reach your goals. 

 
]]>
transcend the tedium of 2d with immersive design https://liquid.fish/current/transcend-the-tedium-of-2d-with-immersive-design Tue, 19 Jan 21 16:10:53 -0600 The term “website” is often a misnomer. Websites don’t actually feel like “sites” when they’re as flat and lifeless as print brochures. Consider the term “surfing the net.” What are we “surfing” — a painted flat wall masquerading as an ocean? That doesn’t jive with us. 

 

Here in the liquidfish think tank, we believe sites should be reimagined as rooms with depth and perspective, where the content can function like decor or furniture. As designers and developers, we must think like explorers. Every time we brainstorm a new concept, we reach a crossroads: Do we settle for the status quo or dream up a more stimulating experience? For us, the answer is obvious: we create spaces that feel alluring, infinite, and immersive. Here’s how taking this route can benefit your business, too. 

 

So what is immersive design exactly?

 

Immersive design invites viewers to lose themselves in an experience. It relies on virtual reality (VR), augmented reality (AR), or mixed reality (MR) to create an illusion that we’re physically interacting with a realistic digital atmosphere. 

 

Here are just a few examples of immersive design experiences:

  • Art installations
  • 360° videos
  • Data visualizations
  • Home shopping
  • Traditional 2D videos presented in immersive spaces

How could it benefit my business?

Immersive design grabs and holds your audience’s attention. 

 

These days, people (especially Millennials) have grown so accustomed to advertising that we’ve learned to tune much of it out. Enter immersive design. It is dynamic, disruptive, and interactive, so we’re more likely to engage with it. And since it also reduces the number of actions to take (like clicking out to a new location), it motivates us to actually take them.  

 

Immersive design isn’t just fun and games… but gamification gets results. 

 

Immersive design often incorporates gamification elements to increase engagement. The term “gamification” describes “marketing tactics which use game elements to drive user engagement with your website, application, or brand.” Infusing your website with game elements is a fun and effective way to educate and interact with your audience. It also enables you to collect useful data from future customers, since these platforms typically require visitors to provide log-in info.

 

Immersive design invites visitors to become co-creators, not “users.”

The term “user” is impersonal at best, dehumanizing at worst. It’s almost like we forget that actual people will be interacting with our content when we conceptualize it. To fully engage them, we must anticipate their wants and needs — both rationally and emotionally. We don’t create sites for aliens or bots; we create web spaces for people like us. At the very core, we’re true believers of the power of human-to-human connection to incite emotional responses and pique curiosity. 

Flat websites, on the other hand, are boring and uninspiring. They literally leave no room for co-creation, imagination, or exploration. Immersive design offers the chance to turn visitors into our special guests. It proposes a deeper experience in which the “user” is no longer using the site but enjoying it. In its full extension, it enables people to collaborate and leave their imprint as they navigate the site. It keeps people coming back to your site (and sharing it with their friends). 

 

So are you in or out? 

The ever-evolving digital sphere requires ingenuity and innovation to stay relevant. It’s time to invite your guests to not just scroll through your content, but to weave in and out of its layers. To feel in control of their experience, but most importantly, to feel. Immersive design is like a deep sea, and to date, we’ve only explored 5% of our oceans. Within both lie endless new dimensions to uncover. Although we can’t fully escape the confines of computers, televisions, and smartphones just yet, we can trick the eye with perspective and volume, fostering a sense of wonder. So if you’re ready to level up your own site, drop us a line. Let’s float around some inspiring ideas and reimagine your digital landscape together. 

 

 
]]>
new fish in the tank https://liquid.fish/current/new-fish-in-the-tank Sat, 02 Jan 21 23:49:50 -0600 Hi, I’m Anna Kinder. Pronounced like kindergarten, it’s the German word for ‘child.’ And although I am pretty young at heart, I know when to act my age. Like at work. Duh. 

My Origin Story

I didn’t know I wanted to be a copywriter when I was a kid, but I did enjoy reading the backs of cereal boxes. I just didn’t realize a real human actually wrote the copy until I was an adult. 

All I knew was that I loved words. I wrote children’s books about cats, and I borrowed ghastly clip art for the illustrations. I couldn’t draw my way out of a paper bag. I couldn’t even draw a paper bag. I still think about the time I auditioned for the art club in elementary school. One of our tasks was to draw a crumpled wad of paper. Mine was so bad, I didn’t even advance to the second round. But I yearned to create, so... writing, it was! 

My Career Path

Since I didn’t know copywriting existed or have the patience to write the next great American novel, I became an English teacher. I’ve always devoured literature. I loved the minutiae of grammar. I was a decorated spelling bee champ. What could go wrong?

It turns out, a lot. After my five years of teaching aged me about twenty, I had a quarter-life crisis and jumped ship. I landed a gig developing instructional courses for the military. Yep, those dreaded “continuing education” courses with a million modules we all skip before hail mary-ing our way through the test. Somewhere out there, hordes of young soldiers are cursing my name under their breath.

Luckily, I soon stumbled upon the magic of copywriting and immediately knew it’s what I wanted to do. Cue the chorus of angels. I began freelancing, then I scored a full-time job at a local advertising agency. The rest is history!

Why I’m Here

So what piqued my interest in liquidfish? Their (now “our”) passion for innovation and shattering the mold. Our fierce desire to dream up, design and develop products that don’t even exist yet. Our relentless pursuit of the most groundbreaking ideas. liquidfish is a think tank full of curious, unconventional visionaries — and so am I. I already feel like I belong here, and I can’t wait to see what we can accomplish together.

What I’ll Be Doing

As the copywriter, I’ll join forces with the rest of the design team to tell compelling stories, generate original copy concepts and flex my rippling editing muscles. I’ll write anything from blog posts and website copy to scripts and slogans. Stay tuned!

The Grand Finale

I’ll leave you with a spoonful of shameless self-promotion, AKA a few fun facts about myself. I’m a glutton for puns, dad jokes, dark humor, and true crime. I’m obsessed with Icelandic culture. I’m a proud cat lady and a slightly masochistic marathon runner. I’ve ridden a bike from coast to coast (Maine to Oregon), and someday, I’d love to hike the Appalachian Trail. As you can see, I crave a challenge, which is another reason I love copywriting. My comfort zone lies in the uncomfortable — in that frustrating, blank space between a project kickoff and the breakthrough idea. It often comes at the cost of blood, sweat and tears, but that rush I get when it finally arrives? I live for it. I’m ready to roll up my sleeves and chase those creative highs at liquidfish. 

]]>
liquidfish first foray into feature film https://liquid.fish/current/liquidfish-first-foray-into-feature-film Fri, 04 Sep 20 16:39:41 -0500 It started over a year ago when liquidfish got a call from “Arkansas” Director Clark Duke, principle photography had already started but he wanted a team to come in and produce an Electronic Press Kit for the film to be included in home video, digital and foreign market releases. 

We jumped into action, our team hopped on a plane to Mobile, Alabama and within 48 hours for the next two weeks we were tasked with shooting behind the scenes vignettes, capturing still photography of the cast and crew in action and producing cast interviews which included: Vince Vaughn (Wedding Crashers), Liam Hemsworth (Hunger Games), Clark Duke (Hot Tub Time Machine) and John Malkovich (Being John Malkovich)

The entire film was shot on location so that called for us as a team to think on our feet, improvise setups for cast interviews, work within the structure of an already tight filming schedule and being courteous of the cast and crews time that we were allotted. 

The film which was released this past May was a success when it premiered in Drive In theatres and was simultaneously released onto video on demand where our teams efforts were included in a 20 minute “Making of Featurette”. Earlier this month the film was released onto Amazon Prime video where it gained even more traction and an equally positive reception.

Director Clark Duke said when we were wrapping up the project: “liquidfish and their entire team were a pleasure to work with. On a tight timeline and budget they executed at a high level. I would recommend them to anyone and look forward to working with them again!”

As we look towards tackling new projects we always look forward to new and exciting projects that push our entire team's ability to find solutions under tight timelines while providing end results that not only clients are happy with but we are proud of!

]]>
Binding Packages in Laravel https://liquid.fish/current/binding-packages-in-laravel Mon, 11 May 20 18:47:28 -0500 One of the most powerful features of Laravel is the Service Container, that part of Laravel which uses reflection to instantiate any class or interface. It allows for lots of flexibility in the structure of your site and how you make use of the Laravel framework. The service container is used to instantiate Controllers, for service injection into jobs and console commands, and even for injecting the Request and Models into controller methods. It can also be used just about anywhere in a Laravel application with the app() function.

Any class can be instantiated with the service container, provided the service container can also resolve all that class’s constructor’s arguments. If you do need an unresolvable argument (such as when an argument doesn’t have an explicit type), you can pass arguments in to the container: e.g. app(PackageBox::class, [‘tape’=>new DuctTape()]);

So obviously dependency injection and the service container are very powerful for customizing your app. But you can read about all that in the Laravel documentation linked above. What I’m here to talk about today is using the service container and dependency injection in packages. Making your laravel package binding-friendly.

To start off with, you can take advantage of bindings when building a package, using your package’s Service Provider(s). Remember that you can take advantage of automatic package discovery. Any class you bind can also be re-bound in the end-developer’s app, so they can extend your package even further. 

You’ll also want to pay attention to where else you can be binding-friendly. Your package adds a model, and you’ll be saving new instances? Instead of $box = new PackageBox(), how about using the service container to get that class in the first place? $box = app(PackageBox::class). Are you adding a relationship, a listener, or otherwise need the class name? You can use $boxClass = get_class(app(PackageBox::class)). That one feels a bit roundabout but it’s not actually that much overhead and it’s seriously helpful to the developers using your package. That said, if what you’re writing is the final application - no one else will be overriding it - go ahead and use your app classes; it’ll be simpler to write and easier to read, and if you or another developer do end up needing to override the class, you’re already editing the app code.

Another useful trick, which I hinted at above, is binding controllers. Say you’re using a package which adds routes, but you need to change how one of those routes works. You could add a new route (with the same path as the old one), build your own controller, and probably extend the old controller. That works… unless you need to make a small change to each method of the controller. Then it’s just excessive. Instead, you can simply add a binding for that controller, extend the functions you need to change, and leave the routes alone.

Another thing to keep in mind is specifying argument types. When you write a constructor or other method which will be called with dependency injection, you can either specify a class, in which case any bindings to replace that class will have to extend that class, or else you can specify an Interface, in which case any class which implements that interface will do. If you go the interface route, you will probably want to bind the interface to your own class within your package, setting the default implementation.

So that about does it. You’re now ready to go out and write your own package full of binding points, knowing your end-developer can take full advantage of Laravel’s flexibility. Just be sure to write some documentation too.

Stay safe out there.

 
]]>
Getting Started with Ecommerce: Quick Tips and Best Practices for Building Online Shops https://liquid.fish/current/getting-started-with-ecommerce-quick-tips-and-best-practices-for-building-online-shops Fri, 13 Mar 20 20:49:56 -0500 So you’re interested in building an ecommerce site. You’ve got your product/services and your domain name purchased. Now what? 

The next steps can be daunting if you’re relatively unfamiliar with running an online shop. Even though ecommerce can sound simple, there are quite a few details you should be thinking through and gathering before you even begin to build your site. Whether you are attempting to build your online shop yourself or having a professional create one for you, here’s a few tips to help you get ready for selling your products via the interweb.

Product Information

For the first step in building your online shop, you’ll need a complete product list. No matter what ecommerce platform you use, you and/or your web designer will need quite a few details for each product. I suggest creating a comprehensive product sheet (excel or google sheet) with the following information: 

  • name of product description
  • product number (SKU number) 
  • dimensions (LxWxH cm or in) 
  • weight (lbs) 
  • quantity for sale. 

Organizing all of the product photography alongside this information is key as well. This is the most time consuming part of the ecommerce process, but will be worth it! This list will not only help you gauge the size of your site, but will also help organizing the site structure and uploading products.

Product Photography

To ensure sales on your new online shop, know that photography will be the most important thing you can add. Photography helps customers know what they are getting and builds trust with you and the customer. Types of photography you can invest in for your site are product photography and content photography.

Product photography are any photos of the goods/services you will be selling. It is the most necessary photography type to have. For physical product photography, some best practices to keep in mind is keeping images simple and showing scale/context when needed. Using clean backgrounds helps customers focus on the product and any details it may have. To help customers visualize the size of a product or how it may be used in their lives consider showing a photo of the product in environment and/or with a human touch. 

Content photography is any photo that can be used throughout your site or on social media. This photography should be eye catching and on brand. These types of shots help your site and products stand out online. No matter your budget for photography, having clean and straightforward shots will help your customers trust that what you are offering is exactly what they need. 

Hidden Costs

Though you may have your product cost and retail price figured out, don’t forget to consider some of the extra costs that come with selling online. Some of these hidden costs include platform fees/subscriptions, shipping packaging, and payment processor fees. 

Most ecommerce platforms charge a monthly fee, based on the subscription level you have. The level can also determine how much the platform charges you per transaction (which can be a small flat fee or small percentage of the sale per item sold). 

The next hidden costs are shipping related. Usually shipping costs are passed on to the customer. However, did you account for shipment packaging? This cost you’ll be responsible for. Packaging ensures the customer can receive their product in mint condition. Remember this price when setting product prices. 

Lastly, each ecommerce platform offers a few payment processors to choose from. These are online softwares that get you paid! The difference between these options are usually their integration and transaction fees. When running credit cards, these processors take a percentage and/or sometimes a flat fee of the transaction. 

Do your research to see what processor and rates work best for your company and platform. Knowing where to look for these hidden costs can help you adjust product prices accordingly and make decisions based on budget and profits easier.

The Unfun Details

With any project, there are the details that are the least fun but very crucial to tackle. Important details to remember are taxes, shipping, and legal information. 

Taxes online can be tricky. Most ecommerce platforms are intuitive enough to help you collect the taxes you need to. However, I would make sure to do research to make sure you are charging the correct amount. Taxes vary based on what state/country you are selling your product from and to. Some products are exempt from tax collection too (ie. digital goods and services). Always ask a tax professional and/or consider investing in a tax reporting plugin to make sure you are following all laws and collecting correctly. 

Most online platforms walk you through shipping options as well. Shipping is often set up through either weight or custom flat rates. If you have products that will be harder to ship based on size/weight or worth, consider hiring a professional to help you with this process. 

All sites should have some legal (or policies) posted. This should at least include a refund policy, privacy policy, and shipping policy. These will help protect you and your customers. These details often get overlooked when planning out an ecommerce site, but knowing them ahead of time will help you get your site running quickly and smoothly. 

SEO

Driving traffic is mainly the job of marketing efforts. However, Search Engine Optimization, or SEO, is the most basic and cheapest (free) way to help your online shop’s search rankings. 

Make sure your domain is easy to remember and has your business’s name in it. People are more easily able to find your shop this way. The URLs on each shop page matter! Most ecommerce platforms populate the URL name automatically based on the page content. If you end up duplicating a page, this may not apply. Make sure URLs within the site match the page content. 

To make sure Google is picking up and displaying the correct page information on your site, look for an SEO section or search engine listing preview section on each of your website pages within your ecommerce platform. Professional web designers will usually set up these SEO basics for you. If you are building the site yourself, take the time to follow these SEO prompts. You won’t regret setting them up.

If you’d like your site to rank better on search engines after these efforts, hire a professional. Having traffic come to your site is key for sales. Our team’s experts know how to make sure your customers are able to find your site through better SEO.

Picking an Ecommerce platform

Once you understand your product, picking a path forward is easier. Below is a quick general guide to help pick an online website ecommerce builder/platform: 

  • Small Shop (5-15 products) : Squarespace, Webflow, Wix, Wordpress
  • Medium Shop (15-75 products) : Squarespace, Wix
  • Large Shop or Complicated Products (75+) : Shopify or custom build

From the above list, Squarespace and Shopify have the simplest backends to navigate. Squarespace and Wix are the easiest platforms to build a website (with or without experience). There are many more online platforms than the ones I’ve listed. These are just some of the most popular. 

If your inventory includes more than 75+ products, you have a complicated product to sell/ship, or you just want to make sure your site looks professional I would suggest hiring a team of experts, like my team at liquidfish, to build a custom ecommerce site for you. We'd love to talk with you about a custom solution we could build to better suit your needs. 

Now that you have some basic guidelines to keep in mind when building your ecommerce site, get out there and find what solutions work best for your business! If you still feel like a fish out of water while trying to navigate this process, our team at liquidfish is full of experienced individuals. Contact us anytime,  we're always looking for new challenges and are waiting for partners like you.

]]>
The Power of Modular Design https://liquid.fish/current/the-power-of-modular-design Mon, 27 Jan 20 18:09:50 -0600 One of my favorite quotes is by Edward T. White who said, “The quality of a product is determined by the quality of the process that created it.”

 

In my time as a designer, I’ve worked in various systems and processes built for crafting good quality products — some better, some worse. It wasn’t until I came across a book years ago by Brad Frost titled “Atomic Design” that my approach would be forever changed.

 

Atomic Design is a term Frost coined after discovering how a design system parallels to chemistry, or the process in which all matter is composed. The idea is that everything at its fundamental core is comprised of atoms, and those atoms combine to form molecules, and those molecules combine to form organisms. In much the same way, user interfaces (organisms) are created using components or elements (molecules) comprised of even smaller components or elements (atoms).

 

From: Brad Frost’s “Atomic Design”

 

For example, we can look at text, buttons, and form fields as design building blocks at an atomic level. When they are combined together, they can create a molecule such as a form.

 

 

 

When combined with other “molecules” or combinations of atomic design elements, we can construct a fairly complex interface comprised of all these small elements of design.

 

You’re probably saying, “that’s all well and good but what’s so great about these comparisons?” Aside from bringing clarity and order to your design process, the advent of global controls and symbols in modern design software has made the process itself exponentially more powerful. 

 

Atomic Design is a type of design system. Much like a guideline for a company’s brand, a design system is all of the unique building blocks and structures that make up a digital product — whether that be a website, a mobile app, or software. And, while design systems are at their best in large complex builds, the same principles can be applied on smaller scales to achieve similar benefits for both process and execution.

 

Design at Scale

 

As we looked at earlier with the form, a well-crafted design system is made of all the base components of a project’s design, which can include typography, color, iconography, character stylings, heading assignments, illustration style, layout, components, etc. Here at liquidfish, we use Sketch for our UI/UX projects, which gives us the ability to create global assignments for typography and color, as well as the ability to create smart nested symbols (symbols within symbols within symbols within sy…..).

 

This means that when we create a form field, that field is created once and utilized throughout the design in every instance that we need a form field. If there is a change to that field’s style, it becomes a single change that affects the entire project instantly. This not only means our design is set up more efficiently, but it is also a tremendous time-saver in the design process, allowing our time investment to be spent in more meaningful ways than updating a bunch of form field instances for example.

 

This approach to design is also part of bridging the gap between designers and developers — bringing design solutions into more harmony with their coded counterparts. A good rule of thumb is to think, “will I reuse this part of the design?”. If the answer is yes, it’s time to make a symbol or a global assignment of that design object. This ensures you are never reinventing the wheel in your designs or adjusting something more than once.

 

This also brings us to another important part of a design system — structure. It’s very important to consider your naming conventions. In Sketch, when you name a symbol, you can also structure that symbol by using forward slashes as a part of its name: ie. “Form/Input/Input+Label”


 

This will create a folder hierarchy for your symbols, making it very easy to navigate your design as it grows and becomes more complex. You can also name the layers in your symbols to make it easier to use symbol overrides in Sketch. Ie. “✏️Label”.


Taking care to name your layers and symbols not only makes it easier to collaborate as a team and revisit projects down the road, but it will also make the building process much clearer and easier to navigate, resulting in better quality and more efficiency.  

 

While certainly a pioneer, Brad Frost’s teaching of Atomic Design is just one of many perspectives on the topic of Design Systems. The key is eliminating redundant steps in the design process while creating modular platforms for our projects to grow and flourish over time. 

 

If you’d like to read Atomic Design for yourself, you can find it here. There are also a number of good resources on how to approach Design Systems. I also recommend the free Design Systems Handbook from DesignBetter by InVision.

 

If you’re looking for a partner to design and build your next big digital idea, be it an app, website, or software, get in touch with us!

 
 
]]>
6 Tips for Successful Client Communication https://liquid.fish/current/6-tips-for-successful-client-communication Thu, 16 Jan 20 16:49:16 -0600 Communication is key, and vital to the success of client-facing projects. As a project manager, my day consists of communication with clients. Whether it be emails, phone calls or face-to-face meetings, these tips help make my communication efforts effective. 

Set a Tone

Your tone sets the mood of a conversation. Maintaining a friendly and professional tone is important to keep a positive relationship with your client. Even if you’re having a bad day or are stressed, stay upbeat and positive. People remember how you say something more than what you actually say. On bad days, I just take a moment to breathe and become positive before I hop on a call or join a meeting.

Set Expectations

Setting expectations is vital. This establishes almost everything about the project. At liquidfish, client expectation calls are an early part of the project process, and it helps to set goals and objectives on both sides. These expectations are important to refer back to when questions come up during the process. Something to remember in this step - there is no such thing as too many details.

Say No (the right way)

Sometimes it’s appropriate to say no to a client, but there’s a way to do it. When you have to say “no,” stick to the facts. Why are you saying “no?” Refer to documentation instead of just saying “no.”

Stay Consistent

Consistency makes for clearer communication. I have a process I follow when I’m writing emails and setting up meeting agendas to ensure I don’t forget anything. This can be as simple as styling your emails the same way. It makes your life easier and helps you avoid miscommunication.

Summarize all Meetings

As a general rule, I send summaries of all client communication to the client within 24 hours. This helps me keep a record of what was talked about in a meeting. I can also refer back to these if I have any questions about what the client wants. This is also helpful for the client because it greatly decreases miscommunication. 

Proofread

I cannot emphasize how important proofreading emails is. It’s easy to quickly write an email and send it, only to realize you’ve made a mistake. Grammarly helps me avoid grammar mistakes, but I still proofread my emails for the correct dates and times, as well as deliverables I’m promising or asking for. 

Use these tips to step up your communication game!

If these guidelines sound like the basis of a relationship you'd like to share with your marketing partners, contact us today.

 

 
 
]]>
Css Preprocessors: Why You Should Get Your Sass On https://liquid.fish/current/css-preprocessors-why-you-should-get-your-sass-on Wed, 04 Dec 19 17:31:29 -0600 Css has a very powerful syntax but can sometimes become an outright mess on more complex websites. CSS preprocessors like Sass has syntax that helps developers to write cleaner and more readable code in CSS. 

Sass (Syntactically awesome style sheets) is a CSS preprocessor that lets you use mathematical operations, variables, functions, loops, imports and other useful functionalities.

We will talk about Scss (Sassy CSS) which is one of two syntaxes available in Sass. Let me elaborate further: 

Nesting

Standard CSS doesn’t support nesting. It’s not possible to write a class inside of another class. As projects get larger, readability and structure become an issue.

Nesting allows for a cleaner method of targeting DOM elements. It also reduces the time to write your styles because you don’t have to rewrite selectors multiple times. 

Nested styles look something like this:


.container {
   width: 100%;
   margin: 0;
   padding: 0;
   
   .row {
      
      h1 {
         font-size: 1em;
         color: #fff;
        }	
    }
 }

 

Variables

Scss also gives you the ability to use variables to store a value or a set of values and to reuse these variables throughout your Scss files. It’s a very powerful and useful tool.

For example, let’s say you are building a website and want to use #66CCCC as a color and Helvetica as a font on your buttons and h1s. You can do something like this:


$primary-blue: #66CCCC;
$primary-font: Helvetica, sans-serif;

button {
   font-family: $primary-font;
   color: $primary-blue;
}

h1 {
   font-family: $primary-font;
   color: $primary-blue;
}

 

Mixins

Mixins are Scss functions that allow you to store multiple CSS declarations which we can use like variables. 

For example, we can group a font selection like following:


@mixin primary-font {
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  Font-weight: 400;
  font-style: normal;
}

We can even create a mixin and add parameters:


$font-color: #ff0000;

@mixin primary-font($font-color) {
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  color: $font-color;
  Font-weight: 400;
  font-style: normal;
}

After creating the mixin, we can use it in any class with @include command. That would look something like this:


p { 
  @include primary-font; 
}

 

Imports

In larger projects, it’s important to keep our code in more defined sections. With Scss, you can split your code into multiple Scss files and include them in your main Scss file using the @import command.

The main Scss file that you will create should be included in the webpage and from this file, other style modules can be imported like so:


#layout

@import “components/ie”;
@import “partial/footer”;
@import “modules/forms”;

body {
   // your styles
}

These are just some of the important features of Scss which will help us write cleaner and more efficient code. After I started using Scss, it changed my whole approach on how I write CSS but in a great way. I highly recommend to get your hands dirty with Scss and explore the possibilities. It’s easy to pick up and a great tool to have in your frontend arsenal.

If you want to get started, you can directly start coding on codepen.io. I hope you found this article helpful.

 
]]>
The Newest Fish in the Tank https://liquid.fish/current/the-newest-fish-in-the-tank Thu, 21 Nov 19 20:25:24 -0600 First impressions are almost impossible to replace, therefore the idea of creating this blog post introduction filled me with more nervous energy than interviewing for this job did. It’s important to me that my passion and competence shine through and my new coworkers, clients, and partners feel comfortable reaching out to me for collaboration and assistance. 

So, what’s the good news? The level of my excitement about being the newest fish in the tank here at liquidfish is through the roof, which means I’m here for the challenge. So, here goes. 

Hi! My name is Kristin Alsup and I’m a digital marketing fanatic with more than eight years of professional experience under my belt. My first day as the content marketing strategist was November 11, and I’ve been swimming around my new tank with gusto ever since. 

What Does the Content Marketing Strategist Do? 

What a great question! Since my first day as part of the team, I’ve helped with a video production shoot or two, snapped still photos on location, collaborated to create content calendars, and studied existing digital strategies. I’ve analyzed hashtags, brainstormed holiday campaigns, and snagged $1 hot dogs with the team at Sonic. 

However, this list doesn’t even begin to describe all the incredible opportunities I’m looking forward to in this role. My focus each day will be to collaborate with our team of developers, project managers, digital marketers, and other strategists to develop digital content across all the different platforms. 

I’ll work with each of our clients and partners to create a custom content strategy that keeps overall campaign goals in mind while managing to stay within the agreed-upon project scope. I’m here to make sure deliverables arrive on time and to help liquidfish get better and better every day. 

In fact, since this position is as new to liquidfish as it is to me, the role is evolving each day and we’re excited to see how it all turns out... 

Where Else Have I Been? 

Another great question! For the last three years, I’ve worked here in Oklahoma City as a content marketing specialist or inbound marketing specialist (depending on who you ask), at an all-digital marketing agency. 

During that time I worked alongside teammates whose specialties ranged from programmatic display to search engine optimization and together we created custom strategies for our clients from across the country (and around the globe in a couple of instances). No matter which industry their businesses represented, our strategies were based on customized solutions based on goals and target audiences. 

Before I joined agency life, I was a one-person, in-house marketing and communications department for an agricultural organization that represented farmers from across the state. With help from agencies, contractors, and volunteers, I was able to promote the food our farmers raised, teach people about what modern-day farming looks like, and engage in larger conversations with all kinds of communities about responsible farming and our food system. 

If there seems to be a big leap from one of those jobs to the other, it makes sense when you look at my educational path. I grew up with one foot in the city and one foot in the country, raising pure-bred show pigs, and traveling the country for livestock shows. I’ve always loved being in a barn with animals and that’s where my collegiate path was born.

I graduated from Oklahoma State University (go Pokes) with a degree in agricultural communications and a minor in agricultural economics. Before that, I started my college career at Eastern Oklahoma State College, not sure what I wanted to do but knowing I loved variety and making a difference. 

Who Am I, Really? 

Does anyone have a fully-formed answer to this question about themselves? I hope someone does, but I’m not sure that it’s me. I’m growing everyday and learning more about who I want to be both as a professional and with my family and friends. 

Some things I do know is that I’m meticulously organized, passionate about creative endeavors, and dedicated to pushing the envelope whenever I can. I’m devoted to this team and excited about the opportunities coming my way. I am a football fan, delight in drinking loose-leaf teas, and Batman is one of my two heroes (my daddy is the other one). 

I’m the newest fish in the tank here at liquidfish and I can’t wait to meet you.

 
]]>