Design after familiarising yourself with a platform

Take the time to get to know the platform, web technologies, and end output you’re designing for as each platform has design and functionality related limitations. If you don’t do this first, there’s always the danger that you’re going to design something that is completely wrong for the platform or cannot be coded within a reasonable amount of time. So make sure it’s possible first!

How do I do this? The easiest way to do this is to use the platform and see how it works. Being aware of what scenarios and platforms you’re designing for will help you figure out how big your sandbox is. It also means setting the right expectations for what’s possible with tech. This way, you don’t over promise to your client or product owner only to later say that a key feature you designed can’t be coded.

For example, within WordPress, get to know:

• The content pop workflow in Gutenberg and see what the output is on the frontend
• Widgets
• Custom post types
• Popular plugins like Gravity Forms, FacetWP and FooGallery

For web tech, get familiar with knowing:

• Solid responsive design knowledge from small to 4K screens
• Bootstrap components
• How social sharing works
• How designs will affect website performance

This is by no means an exhaustive list, but it should give you a good idea of what you need to know. Still unsure? Talk to a frontend (FED) and backend (BED) developer for some guidance.

Keep in mind coding effort

It’s very possible that a little bit of design will result in a lot of coding. A typical scenario I’ve encountered is when a designer has designed a seemingly simple feature in a minute, however, it ends up taking much longer to code during FED and BED. The reason for this significantly longer development time is that making designs functional may require more complex backend logic. The danger of not considering coding time and effort is that you’re designing development heavy features that are time-consuming to code which can result in your product development running behind schedule.

Say you’re designing a product sash for products on an ecommerce website. The designer has already designed several product sashes like Sold Out, Popular and On Sale that have backend logic (rules that dictates behaviour) attached so that these sashes will only appear in certain cases. For example, the backend logic for the Sold Out sash means it only appears when the product inventory is 0. Now let’s say that we want to add a new sash for “Popular”. Design and FED-wise, this would probably be pretty fast because there’s already an existing sash template for the designer to modify and existing sashes implemented from which to create a new HTML element in FED. However, the effort to backend code the Popular sash is much higher.

Track time with Toro Timer

Toro helps remote teams stay productive no matter where they are.

Get early access

In order for the BED to code the Popular sash’s backend logic, they first have to know the rules for what constitutes as “Popular”. Different versions will also take different amounts of time. For instance, one possibility is where the product owner wants the Popular sash to show if more than 20 units have been sold within the last two weeks. Alternatively, they may want to be able to manually control what is labelled as “Popular” in which case the admin can tag the product as “Popular”. So depending on these two types of BED logic, there would be a big difference in the time needed to code.

Now, developers generally do not shy away from coding (or at least we hope that they don’t!), but you have to consider how much work you’re creating for them down the line. This is especially important when you have multiple designs and products to juggle and client or colleague expectations to manage. In this light, it might be better for you to give up on this feature (for now) or coming up with a pared down version for the sake of staying on schedule and not overworking your developer.

What should I do? Think about what kind of logic would be needed to execute your design first then consult your client, product owner and friendly neighbourhood developer before proceeding with design. You may find out that what you want to do is not realistic or of low value to the end user. Alternatively, you may find that it’s easy to design, code and has great value! Either way, you’re better informed about the effect of your designs.

Design reusable UI components

It’s important to remember that designs need to be practical, not only in terms of how it will be initially coded but how it will be managed in the long term. In tech terms, this means thinking about designing UI components so they can be reused across the website or app. This adds to the longevity of a design because it can be easily maintained from a backend standpoint while still looking good on the frontend. In order to achieve this you may have to reach a compromise with your design’s aesthetic elements in favour of ease of maintenance.

Let’s explore the consequences of this in an example. You may have chosen to design a website which has varied irregular shapes (think jellybeans and splats). Though this may make for a more visually interesting design, it might become hellish for developers as variations might lead to the writing of bad or unmaintainable code. This is because every unique shape has different margin and padding requirements and the more variations there are, the more low-level coding is required to fine tune them. If the developer is inexperienced, there’s a possibility that the way it’s been coded may not be so readable, elegant or maintainable. This means that if another developer, or even the same one, comes in later, they will have trouble understanding the code and will therefore have more trouble fixing it. More design and coding variations also means that the developer cannot use a blanket fix on them and must spend more time coding a fix for each one. Another problem is that with more code comes more opportunities for older code to break. The end result? Massive headaches.

The last point is that people usually do not end up using all the bells and whistles you designed. Though the website may look fancy after you initially deploy it, your client or whoever ends up doing the content updates and maintenance may not choose to follow suit, or, may even get confused if there are too many options. They may very well end up sticking to one or two elements that they’re comfortable with for content population and forego the other options. All the other stuff you designed and coded will then be wasted effort.

What should I do? Although it is possible to use as many shapes as you like, think about how they’re actually going to be coded and maintained later. One strategy is to design UI components in a way that makes them reusable. Set a fixed number of variations e.g. 4 and stick to those only. The definition of maintainable code is that it’s code that is easy to modify, extend and debug. By designing a custom shape that you can then flip horizontally and vertically to make “new” shapes, you will get the visual variety that you need while still making it easier for the developers to write fixes if ever they break. It’ll also hopefully be simpler for whoever maintains the website in the end.

There you have it folks! Though it’s easy to create aesthetically pleasing designs and features, you have to consider the direct effect design will have on FED and BED and beyond. Remember, design isn’t just about how it looks, it’s also about how it works and what the experience is like for others that you’re working with. Talk to your developers often to discover limitations and peek into what it’ll be like to maintain the design in the future so that you design with development in mind.

The post Designing with Development in Mind appeared first on Stampede: the strategic design & technology company.

What is Zapier?

The post shares how 13 companies on their use of Zapier to connect their work apps together. At Stampede, we use a number of these apps on a daily basis due to the remote nature of our workplace, so an automation service like Zapier helps by optimizing the work process. The platform currently supports over 500 apps meaning that many combination of automated process flows can be created.

How does it work?

By all means, Zapier isn’t as complicated as you might think. How it works is that you can connect apps together to create a process flow, this is called a Zap. For example, you can tell Zapier to notify you on a specific Slack channel if a new message is posted on Basecamp. Once you get good at it, you can start doing really advanced flows like creating filters so that Zapier will only notify you after certain conditions are met. For example, if Google Analytics hits a page view milestone of 10,000 users, a message on Slack will be posted as a notification.

How we use Zapier at Stampede

At Stampede uses these apps to automate and channel tasks into Slack. If we didn’t do so, we’d have to manually transfer details from one app to another. For example, if one of our clients were to post a new task on Basecamp, we’d get an email notification, but we’d also still have to go to Basecamp and move the details manually onto Slack. Zapier eliminates that distraction for us.

Examples of how Basecamp, Gravity Forms and Facebook are integrated into out Slack channel.

You can head over to their site and read the full article here. In the meantime, we’ll keep doing what we do best, doing great work and staying awesome.

The post Stampede in Zapier appeared first on Stampede: the strategic design & technology company.

There was one time…

… when I just finished a project and decided to sign off from work. Confident that everything had been uploaded, I drove off to meet my friends about 2 hours away from home. I didn’t notice somehow I (stupidly) forgot to upload the files into our development server. My phone rang and it was our Lady Boss (Shaza: I wonder who this Lady Boss is) asking the link to the project that I have done earlier. She needed it because my team is ready to review the work.

I told her I would send the link through Whatsapp. So I proceeded to verify the link on my phone and noticed that the latest files were not there. I felt like I’m somehow intoxicated by Ghom’s Poison (Diablo 3 was not released yet at that time, but that is the equal thing). At the end, I screwed up. The worst part is I screwed up not because I didn’t finish my job, but just because I couldn’t access my computer using my smartphone for the files.

Did I drive back home 2 hours for the files, you were asking? Yes *facepalm*

But we have cloud storage!

I’m not a big fan of cloud storage (can’t resist Cloud 9 though!). Even worst, if I want to sync it on cloud storage, it will be the revised, polished and final .zip file meant for clients unless clients requested to sync it on cloud while work in progress. Since the project is not reviewed yet, I have not even thought to sync it.

Old story

Well, it was back then. When I just started working with Stampede.

Now, things have changed. Last month, I’ve been in the same exact situation. The only different is I was well prepared this time!

I have assigned two padawans to deal with it.

Accessing your computer using smartphone with Teamviewer

Teamviewer has been around for quite some time. Easy to use, simple and capable to store your computer on your Teamviewer Account.

What I need to do is just launch it on my Note 3 (this is the time when big screen comes in handy) and log in to my account. It will list all the computers that I’ve stored. Tap on it and it will let you remote that workstation.

Access computer using smartphone with Teamviewer

Accessing your computer using smartphone with Chrome Remote Desktop

Earlier this year, I discovered Chrome Remote Desktop. It is similar to Teamviewer but it is much simplified. And quite fast too!

Access computer using smartphone with Chrome Remote Desktop on mobile

Both of them are capable to let you access your workstation from anywhere around the globe, with Internet connection of course. They are not limited to just grabbing files. You can do everything such as scanning virus, grab passwords stored on your computer, troubleshoot computer, etc. in essence – you can easily access your computer using smartphone even if you are miles away. How about that?

There are several other applications that allow you to access computer using smartphone remotely but for me, I’ll stick with this two for time being.

What about you? Are there any applications you have been using to access your computer remotely via your smartphones? Please share!

(First image credit: Startup Stock Photos)

The post Accessing Your Computer Using a Smartphone appeared first on Stampede: the strategic design & technology company.