Scrum Sprints And Principle Of Liking Are Important In UX Design

You can make the best UI design, which is an important part of UX design if you incorporate scrum sprints in it. There is no doubt that UI designers should be a part of your scrum team and they must work as a part of the agile sprint. This is a big thing to consider and therefore needs a deeper probe into it.

Ideally, there are two distinct goals of an agile sprint namely:

  • Building a new functionality and
  • Building new knowledge.

Out of these two, it is very obvious that for each sprint the team has to create a new functionality which in fact is he the primary purpose of most of the projects after all. This will enable you to provide your users with better and newer capabilities.

As for the other goal of the scrum team, building new knowledge will help the team to finish each sprint in a smarter and quicker way than they started. This knowledge will help them in learning a lot of other different things such as:

  • About a new technology to use
  • About the user behavior and how they view the functionality built by them
  • About how the functionality is performing and at times
  • About the team itself.

Therefore, both these agile sprint goals are important for the UI designers during each sprint. This is because it will help them to pursue the design into implementation along with the tested code and at the same time allow them to thinkabout the next feature to build and use.

When the designers know what to expect next they will be able to make proper plans during both the sprints. This is because the team will perform at dual level.

  • One, they will focus on the coding and Usability testing aspect of the product backlog
  • Two, they will spend most of their time looking at the upcoming items when they focus further down into the product backlog.

However, there will be only one team working at a time on one sprint being able to distinguish and prioritize their work on the current sprint. If in case, a specific member of the team needs certain clarifications on a certain aspect of the UX design for a product backlog item that is being worked on currently, the designer will stop thinking about future sprint. They will answer to the question of the team member to ensure that the current sprint is worked upon perfectly and just as it is desired.

Role played by the designer

Now you may ask, since the UI designers will be a part of the team, is their role cut short or is it insignificant? Well, it is not true at all. It is the UI designer that actually creates the foundation of the design ensuring that the entire responsibility of perfecting the design upfront is shared by all members of the team equally and as per their specific role.

  • Since the designers are permitted to look ahead and the agile team taking on the responsibility of completing the design, the designer rather does just enough in advance to ensure that the product backlog item is completed by the rest of the team members on time and as desired in the later sprint phase.
  • When the team works on it at the end of the sprint they will feel that they have all the relevant info required from the designers which will enable them to finish the product backlog item within the last sprint phase.
  • This will help them to look at some product backlog items in great detail and that too more than a sprint ahead while there may be some product backlog items that might not need to be looked into at all in advance.

However, it must be remembered that any product backlog item that the designer will look into beyond the current sprint must be chosen after a thorough discussion with the owner of the product. This will ensure that the designer does not have to work on an item that the product owner may later deem unnecessary.

Fear of bad design

There is a common concern amongst the product owners that such a practice may lead to bad design since the designer in such cases are not allowed to think holistically. However, this is not true. The entire system upfront will just work as good as if was designed by the designer alone. This is because the collaborative approach will ensure a few specific things. Apart from ensuring a more persuasive design the team work will ensure that different principles are followed during the design. These different principles include:

  • Reciprocation
  • Scarcity
  • Authority
  • Social proof
  • Commitment
  • Consistency and
  • Liking.

Out of all these principles, the principle of liking is the most significant one to any UX designer.

The principle of liking

The Liking Principle is perhaps the most influencing principles to follow when it comes to UX design because it involves the psychology of compliance. Different social psychology study reports prove that it determines the nature and different aspects of liking such as:

  • Similarity – This involves the human psychology in UX design that people like those people who are similar in behavior, nature and body language.
  • Familiarity – This results in repeated and positive interaction with interface to encourage liking.
  • Cooperation – People like other people who are ready to help them out which is another principle use din UX design.
  • Association – This involves sharing of values which is one significant aspect that the designers want to give to the users.
  • Praise – This involve complimenting each other which invariably produces a positive effect in a relationship.

All these aspects taken together along with other principles such as scarcity and social proof that sped up actions, principle of liking promotes functionality of a websiteor interface which in turn helps in building a positive and long lasting relationship. This ideally is the primary intent of the UX designers as these will at a later stage lead to higher customer retention and conversion rates.

Snow Theme Website design with Photoshop

Get your Photoshop on and follow this step by step tutorial of building a snowboarding themed website layout. The design we’ll be creating takes inspiration from the typical style of the snowboarding culture, with grungy textures and distressed brush marks adding detail to the design. We’ll start by producing a core grid to base the design elements on, then use a mix of photography and Photoshop manipulation to create a concept web design for a fictional brand named ‘Snow Candy’.

 

Snowboard themed website design

Ideas, Research and Sketches

A good place to start any design project is in your sketchbook. Before opening up Photoshop, I took the time to jot down some keywords and create a brand persona for Snow Candy. The website would aim to present a few key elements of information such as upcoming events, latest video and focus areas that could send the user deeper into the website. I then sketched out a potential layout that balanced out the page elements, and outlined my idea of using a large header graphic to catch and draw in the viewer’s attention.

Creating an underlying grid

Using a grid to base your design on is one of the core design principles that helps bring out balance and cohesion in your designs. This particular design is based on a simple 12 column layout making up a total width of 970px, and a uses a baseline of 24px;

A useful tool for generating a grid for your design is the Grid System Generator, where you can create a template and steal the handy pink column graphic to paste it into Photoshop! To create a baseline, create a 24x24px document in Photoshop, and draw a single pixel line across the bottom. Go to Edit > Define Pattern, then in your main document fill a black layer with this pattern to give a baseline template to set your text and page items to.

Let’s shred the gnar!

With the page template ready to rock, let’s get on with some creative Photoshop work. Start by filling the background with a light blue (#b9d2f8), then add a gradient spanning from a dark blue (#02357a) at the top through to a mid blue (#295ba6) then blending out to the #b9d2f8 background colour.

Head over to Bittbox and download one of the awesome noir grunge textures. Paste the texture into the document and scale down in size. Also change the blending mode to Luminosity and drop the opacity to 25%.

Add a layer mask to the texture, then use a large soft brush to blend out the texture so that it spans from the top center of the document. Black paint renders the area invisible while white represents the visible portions of the mask.

With Snow Candy being a fictional brand, we can quickly throw together a cool logo that fits into the overall style we’re aiming for. Download the flowing Black Rose font and set out the words in lower case. Remember to make the most of your grid by scaling and positioning the logo in relation to the columns and baseline.

Rough up the logo a little by adding a layer mask and brushing over it with some grungy Photoshop brushes. I’m using my paint stroke brushes that are available for download from Blog.SpoonGraphics. Set the opacity of the brush to 10% then slowly build up the layers of distress.

To draw focus to the logo add a soft and subtle drop shadow, then draw a white radial gradient on a new layer. Set the layer style to Overlay and move into position behind the logo. Once in place tone down the effect by dropping the opacity to 50%.

Type out a simple navigation list to the right of the logo, following on the same baseline. Use a widely available font such as Helvetica or Arial to allow the text to be rendered in HTML when coded up for real.

Create a visual clue to highlight the active menu item by adding a small brush stroke in white behind the navigation text. Reduce the opacity to keep the white text legible.

Draw a large content area that spans the whole 970px width and fill with white.

Reduce the opacity of the content area to 30%, and add a very subtle drop shadow. Alter the distance and spread to 0px, while setting the size to 10px. Drop the opacity down to 25% to maintain a subtle shading effect.

One of the main features of the design is a large heading that holds a Snowboarding action shot. This area could be used as a rotating slideshow of featured content on the final website build, but for now, we’ll just mockup one of these features. Paste in, rotate and scale a photograph. This particular shot can be found on SXC.

Add some design tweaks to the shot by dabbing some vibrant spots of colour over the image. Choose a bright pink, blue and yellow and paint them onto a layer above the photograph.

Set this colour layer to Overlay and set the opacity to 35%. The result is a subtle colour shift that spices up the photograph.

Use a range of Photoshop brushes to draw a rough border around the shot. Paint the brush marks in black, then change the blending mode to Overlay to allow the colours to interact.

Painting brush strokes on a couple of layers will also allow each layer to overlap, creating more depth and interest as different levels of transparency appear.

Next, we’ll create a creative typographic layout for some event details. Here I’m manipulating the text in Illustrator for ease, but there’s no real reason to move out of Photoshop. Use guides to aid the alignment of all the words.

A few snowboading vector graphics can be sourced from FreeVectors.net that help add the finishing touches to the styling of the event information.

Paste the text into the main web design document and scale into place. Position the words between the columns and lay it perfectly on the baseline grid.

Underneath this main feauture header the secondary content can appear. Use headers to create clear visual anchors to attract the eye and give immediate regonition of the content. Manipulate the text with tight tracking and lowercase appearance, and draw some small icons with the pencil and eraser tools to back up the wording with a visual clue.

A mockup of the featured video can be created with another Snowboarding action shot. Add a grungey border using the rough Photoshop brushes.

On a new layer, draw a circular mask and fill with black. Draw a triangle using the Polygonal Lasso Tool to represent the play icon, then delete this shape out of the circle. Drop the opacity to allow the video content to show through.

To the right of the video will be a short list of upcoming events. Write out the title and back this up with an icon. Zoom right in to adjust the finest details of the icon.

Set out the event information with style. Use a range of font sizes to create a hierarchy of importance.

When laying out the content, especially the text, remember to base everything on the baseline grid. With our baseline being 24px, use a line height of 24px on all paragraphs. Finish off the content area with the desired number of elements, and end each section with an anchor that links through to deeper levels of the website.

Below this content, we’ll lay out some elements that span the width of both columns. Lay out some portrait shots to build up the Meet the Team section. Add a small white stroke and subtle drop shadow to give the appearance of a tactile photographs.

Rotate each portrait shot to give the impression of a collection of photographs that have been roughly placed on the page.

Continue the casual theme of the design by typing out the names of each team member in a hand-drawn font.

To finish off the design, copy a selection of the texture used in the header area. Move it into position behind the lower portion of the content panel.

Alter the layer style and opacity to tone down the effect and blend the colours toghether, then use a layer mask to allow the texture to peek out from the center of the panel.

Snowboard themed website design

The visual concept is complete! The blue colour scheme helps tap into the coolness of the snowboarding scene, while the mix of textures and distressed brush strokes add some gnarliness that relates well to the culture and lifestyle of extreme sports in general.

Surreal, Abstract, Metallic Text Effect

With this tutorial, we will show you how to create a unique, Surreal and Abstract Text Effect with Metal Texture in Photoshop, step by step. This tutorial involves some steps which are a little tricky, but then, who said Photoshop was easy! ;)

The objective of this tutorial is to show how can you manipulate texture/stock image with layer masks and blending options to create an eye candy with special effect. Also we will show you how to use adjustment layer to add colours in the end.

Required Resources:

Step 1

Create a new document sized 800px * 1040px with black background. Create a new layer and use the space brush to paint a background pattern, compress it down and set some perspective to it as shown below:

1 persp1 500x676 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Create a new layer and further add some space pattern, reduce the layer opacity to around 80% and use a soft eraser to erase the centre portion as shown below:

Hint: by performing the above two things, we added some depth to the image and get ready for adding the text in the following step.

1 paint1 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Let’s add some simple light effect – create a new layer and use a big white brush to paint a dot light as shown below:

1 paint light 500x414 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Use a soft eraser with smaller brush size than the dot light, erase the top right part of the dot as shown below:

1 erase2 500x359 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Duplicate this layer and rotate the duplicated layer 180 degrees, you will have the following effect:

1 effect1 500x656 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Step 2

We can now work on the letter. Type a letter on the centre of the canvas, as shown below:

2 type1 500x633 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Load the “metal texture 1″ image into Photoshop. Then load this text layer selection and move it to the metal texture, copy and paste it back onto our text:

2 sel2 500x344 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Turn off the original text layer, and you will have the following effect:

2 paste2 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Open up the liquify filter, grab the forward warping tool and make sure you enable “Show Backdrop” and use the following setting: (this will make the background visible, easier to apply the liquify effect)

2 liquid sest Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Go crazy with the liquify tool, add some flowing effect around the text edges as shown below:

2 liq 500x595 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Then erase the following area with the a soft eraser:

2 erase Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Step 3

We can now apply some adjustments layers on the metal texture as clipping mask:

Black and White

3 bw2 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Levels

3 lv Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Curves

3 curves Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Then use the Lasso Tool with 30px feather, draw a selection on the following area:

3 sel 500x370 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Then add another Levels adjustment layer as clipping mask: (this will darken the Lasso Selection)

3 levels Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Render or paint some cloud (with cloud or smoke brush, plenty of them on the internet) around the text to add dramatic effect:

3 cloud 500x583 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Step 4

We can now add some small metal particles into the image – load the “metal texture 2″ image into Photoshop and use the quick selection tool to select a few small pieces on the image:

4 quick sel 500x348 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Copy and paste the selection onto our document, erase the edges to blend those small pieces into the main text:

4 erase1 500x346 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Duplicate the selection a few times, attach them to different parts of the text, as shown below:

4 dup 500x532 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Merge the duplicated layers and apply the following black and white adjustments to it:

4 bw1 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

and here is the effect so far:

4 effect2 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

You can also further duplicate this metal texture layer a few more times, resize them to small scale and move them around the text, as shown below:

4 small part 500x618 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Step 5

To add some extra effect, I decided to use the Pen Tool to draw some red lines around the text. So let’s use the Pen Tool to draw a work path as shown below:

5 draw path 500x431 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Prior to stroking the path, go to the brush panel and set the brush size to 3px, hardness 95%, red colour as shown below:

5 colour 500x397 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Then go back to select the Pen Tool, right-click and choose “Stroke Path”:

5 stroke 500x389 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Stroke this path with the following settings:

5 stroke brush 500x272 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

and you will have the following effect:

5 effect1 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Duplicate this line layer a few more times and resize each duplicated layer and rotate them, attach the lines to different part of the text:

5 effect 2 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

You can also mix some yellow lines via adjusting the Colour Hue, in order to add some variety on the text:

5 yellow 500x255 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Step 6

OK we’re almost done! For some final retouches, we can flatten the image and apply the following Smart Sharpen filter to the image to sharpen the text a bit:

6 smart sha 500x317 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

To add some colour effect to image, I apply the following image adjustment layers to the image:

Selective Color

6 sel red Design Abstract Surreal Text Effect with Metal Texture in Photoshop

6 sel white Design Abstract Surreal Text Effect with Metal Texture in Photoshop

6 sel neu Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Curves

6 curves Design Abstract Surreal Text Effect with Metal Texture in Photoshop

Brightness and Contrast

6 bc Design Abstract Surreal Text Effect with Metal Texture in Photoshop

I then further added some slight colour adjustment and here is the final effect I have: (click to enlarge)

metal text flatten 500x650 Design Abstract Surreal Text Effect with Metal Texture in Photoshop

That’s it for this tutorial! Hope you enjoy it and find it useful! Don’t forget to share!

Make Content look Impactful with different Web Design Techniques

One of the unanimous truths of the web world is that content is the king. However, in order to present this content in the best possible manner, it is important to implement contemporary web designs in the website. A content marketing strategy is incomplete without powerful web design as the World Wide Web is full of information and a website can scores good only if the relevant information is portrayed in unique pattern. Even professional web content writers can’t deny the fact that website designing forms an integral part of content marketing. Mentioned below are the famous website designing trends that compliment content marketing strategies, have a look.

Implementation of Responsive Website Design

The present day generation has shifted from PCs to tablets and Smartphones and thus it is important that a website adjusts its dimensions as per different devices. With Responsive Website Design, one can create a web portal that fits well in all devices. This helps the website in enhancing its reach to the targeted market. The increasing use of tabs and Smartphones for browsing internet has led to the popularity of responsive design. If a website fails to fit in the gadget of the prospects, they take half a minute to switch to another portal.

Conveying Message via Embedded Videos

Embedded videos are one of the latest web design trends prevailing in the cyber space. Visitors today want everything quickly; they don’t have time to go through the entire text and there comes the role of videos. Videos are interactive and conveying information via this medium is best for getting a hold on the visitor’s attention.

The Magic of Special Effects

As mentioned before, it’s all about presenting the information in a unique pattern and what can be better than a pinch of special effects. The best part is that with the emergence of CSS3 and HTML5, it has become easy to embellish the website with feature of visual effects. Lightbox, slideshows and interactive buttons are a few effects that can be implemented to enhance the content marketing strategy of a web portal.

Use of Minimalist and User-friendly Design

One can avail custom web design services for incorporating minimalist and user friendly outlook for the website. Yes special effects and videos do leave an impact on the viewers, but the more professional the content looks the more prospects turn into leads. One live example of minimalist and user friendly design is Tumbler. It’s simple, it’s professional and thus attracts maximum amount of targeted audience.

Increasing the Role of Social Media Integration

The rising popularity of social media is not hidden from anyone. Social media is one of the biggest players of internet marketing and therefore it is important to use it wisely. The use of share buttons is not new; it’s just that with the spinning wheel of time its use is increasing.

This makes it crystal clear that getting proper website design is as important as availing professional web content writing services. Irrespective of the device on which the user is browsing a website, he always wants a beautifully laid down content to please his eyes and comfort his knowledge hunger. With these new emerging wed designs, it will become easy for the websites to serve exactly what their visitors expect from them.