About design and nearby

Xamarin.Forms: Power of RelativeLayout

Posted: January 4th, 2017 | Author: | Filed under: Development, Mobile Design and Development | Tags: , , , , , , , , | No Comments »

RelativeLayout is used for creating adaptive layouts based on their parent’s and other views’ position and dimensions.

For me RelativeLayout is the solution to apply an image as the background for some components. Say, I have a Label on page and would like to overlay it with a background image:

RelativeLayout - Image as a background

Each element in the RelativeLayout can define a constraint (RelativeLayout.YConstraint, RelativeLayout.XConstraint, RelativeLayout.WidthConstraint, RelativeLayout.HeightConstraint) which defines how the element relates to other items.
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

Responsive Tables for Mobile Devices

Posted: August 14th, 2016 | Author: | Filed under: Development, Mobile Design and Development, Tips and Tricks | Tags: , , , , , , , | No Comments »

You have a great website with responsive design and number of tables which fit the smaller viewports well.. say, like described in my post Responsive Tables. Every table has horizontal scroll for mobile-sized view, without breaking layout. It happens because of CSS settings for the table ‘display:block;’ and ‘overflow-x:auto;’. A user can swipe right and left to horizontal scroll the table to see the content.
A bad news is the user has no indication that they can swipe to the right (the momentum effect) – many mobile browsers don’t show scrollbars at all, while some show them only while scrolling…

The solution is to use

  1.  overflow-x: scroll; /* instead of 'auto' */
  2.  -webkit-overflow-scrolling: touch;

Read the rest of this entry »

Share Button

Javascript and CSS-powered Spinner: spin.js with Overlay

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

The days of using images to provide the visual effects are over. Now we can create gradients, shadows, rounded corners, use animations with styles only. And spinner image is not the exception.

So if I need spinner for my project, I use spin.js by Felix Gnass usually.
javascript-powered spinner It’s highly configurable, resolution independent, uses VML as fallback in old IEs,
uses @keyframe animations, falling back to setTimeout().

Spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.

The only thing I missed with this library was an overlay option – to cover the rest of the page and prevent a user from clicking any element while the required content is loading.

I decided to add a ‘div’ which appears while spinner is working and removed after content has been loaded:

  1. <div id="overlay"></div>
  2. <div id="waitSpinner"></div>

Read the rest of this entry »

Share Button

SVG for Web: Hover Over Effect

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

SVG (Scalable Vector Graphics) is an image format for vector graphics.

Sweet Web Design vector icon

I love to use SVG in web and mobile projects and applications because:

  • *.svg files have small file sizes and compress well.
  • *.svg files scale to any size without losing clarity.
  • *.svg files look great on retina displays.
  • You can manipulate the SVG file with CSS

You can create such vectors with Adobe Illustrator.

After you save your image as *.svg, open the inline svg with any editor:
Read the rest of this entry »

Share Button

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

Let's discuss your project now