About design and nearby

How to create amazing Instagram feed for business

Posted: May 17th, 2018 | Author: | Filed under: Tips and Tricks | Tags: , , , | No Comments »

If you look for promotion your business on socials, Instagram ranks high on the list. This app is all about the visuals. While using Instagram for business keep in mind that you should build a unified and recognizable brand identity.

Your Instagram feed is a reflection of what and why :) your company is. It’s all about being deliberate with your posts. Your brand colors and could they be highlighted in the feed, any graphical elements, photo filters, other effects to underline a company style – anything that creates aesthetic – works.

One more important point for me is a great picture. Good by quality, interesting by subject photos should be your priority.

So how to build amazing Instagram feed look?

Let’s do a research for the BJL travel agency.

1. Establish a consistent theme.

Instagram account should be the same style as all of the branded materials — such as website, logo and marketing collateral. A big part of understanding your brand also means that you need to remember who your audience and what type of content is the most preferred.
I produced such set of elements (keeping in mind that the company slogan is ‘travelling over the world with compatriots’):
Read the rest of this entry »

Share Button

How to bundle an Angular app for production to non-root path

Posted: March 14th, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , , | No Comments »

Bundling steps are pretty easy.. till you do it yourself for the first time :)

1. Start with the development build:

ng build ––prod

2. By default files will be placed in the ‘dist’folder of your angular project:

angular files
Read the rest of this entry »

Share Button

How to change another element styling on a CSS hover event

Posted: February 21st, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Pretty simple question, isn’t it?
What I want to do is affect the properties of one element when another element is hovered:

Hover over screen

My HTML looks as below:
Read the rest of this entry »

Share Button

Working with Angular: how to fix “Cannot find name ‘require'” issue

Posted: November 15th, 2017 | Author: | Filed under: Development, Tips and Tricks | Tags: , , | No Comments »

Sometimes building an app with Angular 4.. after including file in component and compiling, you can get such type of error:

Cannot find name ‘require’.

I have the following in one of my components:

angular component error issue
Read the rest of this entry »

Share Button

How to animate SVG on scrolling

Posted: October 15th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , , , , | No Comments »

Working with SVG consists of two parts: designing itself and development. They are tired very closely and depend each on another. The nature of SVG as both an image format and a XML format, every step taken in the graphics editor directly affects the resulting code.

There are a lot of ways to animate SVG. It could be done with the tag that goes right into the SVG code, with javascript libraries or using inline SVG code inside HTML) and animating the parts right through CSS. My task was animating SVG on page scrolling and as a base I used “Masking SVG Animations” by Nathan Gordon tutorial.

Final image
I love to work with Adobe Illustrator, so I started with my design firstly. The final image should be:

Creating your *.svg image is the most critical step — if you have problems making it work, probably it’s because your SVG assets weren’t correctly produced.

1. The design stage: drawing vector image.

I decided to draw my picture using ‘path’.
*The ‘path’ element is the most powerful element in the SVG library of basic shapes (lines, curves, arcs, etc.). The shape of a path element is defined by one attribute – ‘d’ (‘d’ stands for data and it could just as well stand for directions.).
There are a number of stroke related properties within SVG that allow us to control the details of strokes, some of them are: stroke, stroke-width, stroke-linecap, stroke-dasharray, stroke-dashoffset.

It’s important to start drawing the path with the right direction – to avoid a headache at the development stage. Well, you can change the direction in the XML code or via styles or javascript.. but for complicated shapes it’s easier to think about the final result while drawing )).
Read the rest of this entry »

Share Button

Ready to contact a Freelance UI & UX designer for your project? I’m ready to jump onboard!

Let's discuss your project now