While we’re all familiar with the SEO benefits of a well-structured URL, this article focuses on something different: the user experience. A thoughtfully designed URL structure can provide users with a sense of cohesiveness, demonstrating that your application is well-organized and carefully considered.

And here’s the kicker: even if SEO isn’t a priority for your web application, you’re not off the hook. Good URL design is for everyone, because it directly impacts how users interact with and perceive your site.

As Richard Branson aptly put it, “When making experiences, attention to detail matters.”

Anatomy of a URL

Before we dive into best practices, let’s break down the components of a URL:

While the “https://” protocol is pretty much a given these days, every other part of the URL deserves your attention. Even if you only have control over the path and beyond, understanding the entire structure will help you make better design decisions.

Don’t forget about the optional elements:

Towards the end, you might see a question mark (?) or a hash (#) and some characters after it. We’ll talk about these as well.

But first, lets look at the Golden Rules:

The Golden Rules of UX-Friendly URLs

When crafting URLs, keep these three cardinal rules in mind:

1. Brevity is key: Shorter URLs are easier to remember, share, and type.
2. Readability matters: If a human can’t easily understand your URL, it’s time to rethink it.
3. Make it meaningful: Each element should convey purpose and context.

These rules aren’t set in stone, but they provide a solid foundation for creating user-friendly URLs.

Let’s explore how to apply them.

Mastering the Domain Game

Your domain is your digital real estate – make it count. For our examples, we’ll use the fictional company “Acme”:

Other options:

• acme.net
• acme.io
• acme.app

Notice how these domains are short, readable, and meaningful. With the proliferation of top-level domains, you have more flexibility than ever to create a memorable web address. In addition, with the wider array of available TLD’s (the .com or .net part of the domain) – you can make use of this as part of how you structure your organization. For example, “.com” will be for your public website, “.app” will be the “application” side. Otherwise, we can use subdomains:

The Subdomain Dilemma

While subdomains can break the brevity rule, they’re almost always necessary. Subdomains are also good since you only maintain one main domain. Still, use them judiciously for distinct sections of your site.

Remember: one subdomain level is usually sufficient. Anything deeper risks confusion and violates our first two rules.

In addition, having too many “.” (dots) is just annoying – agree?

SaaS URL Strategies

For SaaS products, consider offering “vanity” URLs that combine your main domain with a subdomain:

Good examples:

• acme.workday.com
• acme.salesforce.com

Avoid confusing structures like:

• na111.salesforce.com
• emea.online.salesforce.com

The goal is to create URLs that users can easily type and understand at a glance.

Perfecting the Path

The path is where you have the most control over your URL structure. Here are some best practices to keep in mind:

1. Use hyphens as separators: /user-profile is more readable than /user_profile or /userProfile.
2. Create logical hierarchies: /products/electronics/smartphones tells a clear story.
3. Stick to lowercase: /blog/latest-posts is less error-prone than /Blog/Latest-Posts.
4. Eliminate unnecessary words: /about is cleaner than /about-us.
5. Use nouns for resources: /users/123 is more RESTful than /get-user/123.

Slash, Hash, or Query: Choosing Your Weapon

Each URL component has its purpose:

• Slashes (/): Perfect for hierarchical structure and main navigation.
• Hashes (#): Ideal for anchors within a page or client-side routing in SPAs.
• Query parameters (?): Best for optional or variable parameters.

Choose wisely based on your application’s architecture and the nature of the information you’re conveying.

Navigating the Browser Landscape

Good URL design supports intuitive browser navigation. Users should be able to use back and forward buttons effectively and understand their location within your site’s hierarchy just by glancing at the URL.

For Single Page Applications (SPAs), this means implementing proper routing and history management. Tools like React Router or Vue Router can help maintain a navigable history stack, even with dynamically loaded content.

The Art of Bookmarkability

One often overlooked aspect of URL design is bookmarkability. Users should be able to bookmark any page on your site and return to the exact same state later. This means:

1. Avoiding session-specific information in URLs
2. Using proper routing in SPAs to capture the application state
3. Ensuring dynamically loaded content has a corresponding URL state

Conclusion: Small Details, Big Impact

While it’s easy to overlook URLs in the grand scheme of UX design, they play a crucial role in creating a cohesive, intuitive, and user-friendly web experience. By applying these principles and paying attention to the details of your URL structure, you’ll create a stronger, more navigable, and more professional web presence.

Remember, your URL is often the first point of interaction between your user and your application – make it count! Your users may not consciously notice good URL design, but they’ll certainly appreciate the improved usability it brings. In the world of UX, sometimes the smallest details make the biggest difference.

The post The Hidden UX: Mastering URL Design for Better User Experience appeared first on Michael Soriano.

In this guide, we’ll walk you through the process step by step, ensuring you seamlessly integrate your .fig file into your Figma workspace. So, grab your creativity and let’s dive in!

Step 1: Start Figma

Start by opening Figma. If you don’t have an account, sign up for one—it’s free! Create or Open Your Project: Once you’re in Figma, either start a new project or open an existing one where you want to import your .fig file.

Find the Import Option: Look for the “File” menu at the top-left corner of the screen.

Step 2: Select File

Choose “From your computer” from the modal pop up. This will trigger your machine’s file navigator and allow you to select your .fig file. The “From Jamboard” option is also useful – if your .fig file is shared via Google Drive.

Once you’ve selected it, click “Open”. Depending on the size of the file, you might have to wait a few moments. Figma can sometimes take a few seconds to process the file. Patience my friend.

Step 3: Start Editing

Once the import is done, you’ll see your .fig file in your project. It might be a new file or a new page/tab in an existing file. Now you’re ready to edit the file. You can now edit your imported .fig file in Figma, just like any other project.

Don’t forget: Figma saves your changes automatically, but you can always save a version manually if you like.

The post How to Import a .fig file for Editing in Figma appeared first on Michael Soriano.

The Screenshot

We’re going to use “Luispro” as our screenshot for our demo. Yes that was a shameless “affiliate” link. Gotta earn somehow right?
So grab a screenshot of your page, scale it to the size that you need. Place it in the center of your canvas, making sure that there is enough padding space around the edges.

Remember, we need space for three pages – so allocate enough. Also, you will need to make your pages the same width and size – this will make your skew transform a lot easier. Don’t forget to create guides on how big your screenshot is.

Skew and Scale

There are mainly two transform options you’d want to do with your page. First “Skew”: Go to Edit > Transform > Skew.

Then mouse over the handles on the right side of your page. Move it upward and downwards and see the page get skewed diagonally. Adjust one side to be about 25 percent shorter than the rest of the page.

Before applying, you want to go back to Edit > Transform > Scale. This time, drag the middle handle to the right – making the page skinnier. We’re talking about 50 percent of it’s original width. Try to match how it looks below:

Double click your image and “Apply“.

Now our page is skewed, drag new guides to where the edges are. These guides will help us replicate the same effect to our remaining pages later on.

Shadow and Depth

Go to your layer window and double click to bring the “Layer Style” window.

Check “Drop Shadow” and adjust the opacity, distance and size – approximately to the image below. It doesn’t have to be exact, just trust your eye and decide how strong the shadows should be.

Also, the settings above will vary depending on how you stack your screenshots. Obviously if it’s top to bottom – the shadow angle will be different.
Now create a seperate layer for your layer styles. On the layers pane – right click on the layer style and click “Create Layer“. This will make the shadow it’s own layer. This allows us to adjust the fill and opacity – even re-size the shadow to show depth.

Now using the “Line” tool, drag a 5 pixel line from the left top most of the page – down to the bottom. Adjust the background color for this line accordingly. What we’re trying to achieve is to give the page a thicker feel. This will make our page look 3 dimensional.

The image below shows the original screenshot – compared to the skewed version. Notice the guides and how they’re positioned.

Now we’re ready to do the rest of the pages.

Repeat Process

I usually like to group my layers so my file is organized properly. In our case, the groups will be page 1, 2 etc. Take another screenshot and do the “skew” and “scale” process again.

Now, if you’ve used your guides properly (and accurately) – you won’t need to do the layer effects and lines for depth all over again. Simply go to your original page and duplicate those layers.

Notice the duplicate layers above for the shadow and the lines? This saves us a lot of time of doing things over, along with making sure the effect stays consistent. Once you’re done – simply nudge your groups over each other – from left to right.

Finished Product

Below is how our pages will look once we’re done. This can be applied as a hero image, carousels or any kind of marketing material.

I’ve uploaded the original PSD file to my box.com account just in case you just want to use it instead of following my tutorial. Simply swap out the screenshots with your own. Have fun designing.

The post Create Stacks of Webpages with a “Skewed” Effect using Photoshop appeared first on Michael Soriano.

Rule #1) Subject and Text Placement

When it comes to deciding where to put the copy and the subject (the main focal point of the photo), I generally keep these 3 scenarios in mind: 1) subject on the left copy on the right, 2) subject on the right, copy on the left or 3) copy in the middle (no subject).

Subject to the Left

Keeps balance within the image. Notice that copy will most likely be left justified in order to look good. Proper alignment and spacing is very important.

Subject to the Right

This also keeps the balanced in your image. The copy can be left or right justified – this really depends on the overall effect. Squinting your eyes to see the visual weight of the image really helps.

No Subject

I call this “no subject” mainly because the focus remains on the text. The entire image in the background can actually be the subject, or it can just be a subtle background. We’ll go over how to fade or blur your background in our tutorial below.
It is important to know that the above scenarios are the most common ones. I’ve seen some hero images that do not conform to the above – but are quite rare.
Now this brings us to our next rule:

Rule #2) Know how to treat Backgrounds

Of course, a good designer already knows how to deal with backgrounds. Rule of thumb: you want to focus less on the background and more on the messaging. In many cases, backgrounds are treated with some kind of blurred filter to reduce the focus.

You also want to contrast the colors of your messaging and call to action buttons against the background in place.

Either way – the rule is: focus on the text. Backgrounds are only for, well – backgrounds.

Rule #3) Always Use High Quality Images

Once again, a no-brainer. But you wouldn’t believe the number of websites that I come across that break this rule. I mean c’mon, this is face of your business. Your portfolio. Your online identity.
Using high quality images is a definite must.

Size down – but Never size Up!

I’ve seen this so many times. A designer grabs a photo from Google, re-sizes the image bigger – to accommodate the slideshow. Now, any idiot knows that blowing up the jpeg degrades the photo. Drastically!

Avoid Stock Photos

Okay – this may not be a deal-breaker, but stock photos are so 90’s. How many times have we seen that business woman with a headset and a big smile? Fine if you really must use a stock photo (like I’m doing in this tutorial) – at least choose one that doesn’t look like one.
So enough about rules I say and get down to the nitty gritty.
The photos we’re using is Money Shot and Sun shining through trees from Creative Market. We’re creating a fictional travel banner, so I think these images are good.

Take a look at our subject image. Notice that we’ve selected an image with little or no background at all. This makes it easy to manipulate in Photoshop. The man’s arms are also 100% visible – meaning, it’s easy to use for hero images that need to cover the entire web page.

Using Photoshop’s pen tool, you can easily trace an outline and remove the background from our subject. This will let us add the other image for our background, making the man look like he’s in the woods.

Remember to duplicate the layer – just in case we need to go back to the original.

At this point, you can place your background underneath the select layer – you can also visualize what copy you need to add. Remember our scenarios above on where to place the text? Again, you may need to adjust a little bit depending on the image.
We’re not going into detail on how to style the text or the call to action – this will be totally up to you. Remember that text may have to be done in HTML code – so I won’t cover it in this tutorial.
So as soon as you decide where text goes, let’s blur those spots in the background. Select with the Lasso tool – with a feather of 20%.

I like the “Gaussian Blur” because you can adjust the density of the effect. Feel free to try out the other blur effects. Note that blurring the background gives the text that overlays on top of it a bit more “importance” in visual hierarchy.

Finally, squint your eyes with the text overlay and call to action in place. Ask yourself these questions? Does the image feel “balanced”. Can you read the text clearly? Does the call to action button stand out enough? How about the colors – do they compliment each other? Contrast? Do they work well with the entire page?

Other Considerations

I mentioned that text is ideally handled through code. This is good practice when it comes to SEO. However, some text effects may not be handled as well in code than through an image. So this is one thing you need to consider more important.
Lastly, in today’s responsive world. Your hero image needs to render properly in different devices. This is definitely something to think about. Not only does the text need to move around (it might end up directly on top of the subject), but the subject itself will need to be handled accordingly. So responsive hero images is a topic that we’ll have to revisit.
So take a look at our final product – on an actual web page.

Again, this banner is completely fictional. We just picked a random website and slapped our hero image on top. I think it works well and does the job. I sure would love to click that big red button!
If you like this tutorial, kindly let us know in the comments below:

The post The Ultimate guide on Creating Stunning Hero Images for your web pages appeared first on Michael Soriano.

Mistake #1: Linking to an image that is the same size

This one is a biggie. How many times have you clicked on an image, then you wait for it to load, then behold – it’s the same stupid size. This is a total waste of your viewer’s time. Even worse is when the image loads in a new window. You’d be lucky if your user doesn’t completely close the session.

How to Avoid

The easiest thing to do is to remove the link. If you don’t have access to the larger image then what’s the point. If you DO have the larger version – then of course, switch the links.

Mistake #2: Changing the default Right click behavior

I don’t know about you but whenever I go to websites and I try to use the most I can with my mouse and keyboard. Especially opening links and images in new tabs. Saving them or even just copying text.

By overriding the default right click behavior you may not have access to these things. And that’s a big mistake. Especially for users like me who have become accustomed to this handy technique.

How To Avoid

Basically nothing. The default right click behavior is already in place. To avoid it is basically not writing custom code that override it (Javascript code similar to above).

Now depending on your application, you may have no choice but to use this “contextmenu” item. But at least still give users access to “copy” or “open in a new tab” in your custom right click menu.

Mistake #3: Using the Default Javascript Alert Box

You may not see this that often anymore. But there are still some sites out there that use the default (and ugly) Javascript Alert boxes. Web developers resort to this type of notification – because it’s the easiest to implement. The result: an ugly box with a message that looks like below.

This is mostly used in forms that validate to make sure what you entered in a field is correct. Although it serves the general purpose – which is to “alert” the user. The fact of the matter is – it’s just not a friendly way of doing things. It’s a definite eyesore, therefore, a UI mistake indeed.

How to Avoid

There are plenty of newer ways to present user with “alert style” notification. Plenty of these come in a form of library such as jQueryUI, or modal boxes in Bootstrap.

The example above is a much pleasant way of notifying your users. May it be an error, a success or just a simple note – this type of messaging is much easier on the eye. In addition, background colors and styles can be added to them as supposed to the default Javascript boxes – where you can’t do anything to them.

Mistake #4: Not submitting the form on “Enter”

Once again, let’s go back to our desktop users. These are the ones that fill out forms ultra fast. They stick to the keyboard and yes, they will hesitate to make that extra click of the mouse when submitting a form. Instead, they would rather hit “Enter” and see it submit.

Even though this is not something that you “see” in the page, it is in fact – part of the behavior of the form. Therefore, it is part of good user interface design. Remember, we want to make our user experience as “bullet-proof” as we can.

How to Avoid

Submitting a form by pressing the “Enter” requires a little bit of Javascript. This means that somewhere in your web page, you will need a set of “script” tags that includes code such as below.

Although a bit cumbersome to write, Javascript will add an extra layer of goodness to your web pages. Javascript is the language that takes care of the events that happen in a web page. So if you want something to happen when you click, press a key or even move your mouse – Javascript will handle it.

Mistake #5: No font style variation between elements

This is more of a style preference but is considered good practice in UI design nevertheless. We normally style elements different from each other because of two things: 1) to distinguish them from each other and 2) to determine their importance.
The screenshot below shows the title, body and meta elements closely resembling each other. If you squint your eyes – you can barely tell where each element start and where they end.

By contrast, if you look below – we’ve styled the elements with the purpose of setting them apart from each other. You see the title is much bigger and prominent. The paragraph is a bit more subtle while the meta is also quite distinguishable.

The interface above serves our two purposes better than the previous example. On top of that – it’s just so much better to look at. Note that the changes may be subtle – but the experience is way better.

Mistake #6: Not “Blocking” the page when there is activity behind the scenes

Supposed you have a filtering mechanism on your page for your search results. Once this filter is clicked, it sends data to the back end and refreshes the content on the page. But the mistake is, when you don’t “block” your page, users can continue to click on your filters – bubbling up more requests, and ultimately crashing the browser.

A simple solution is to add an overlay with a progress symbol on the page. Hence, “blocking” the page from further action.

How to Avoid

While you can’t control impatient users from clicking all over the place, you will have to implement a solution similar to above. There is a good jQuery plugin that achieves this functionality real well. It’s called jQuery BlockUI. The plugin’s main goal is to block the whole page so users can’t continue to click when there’s processing behind the scenes.
Now that your page may be blocked from your “clicky” users, you still need to let them know of what’s happening at that moment.
This brings me to the next big UI mistake:

Mistake #7: Not informing your users of what’s going on

Whenever some kind of processing is going on (form is submitted, filter is clicked or searching for results), it is good practice to inform your users of what the page is doing. This usually happens in conjunction with your blocking mechanism (described above), or with your loading spinners and progress bars.

How to Avoid

As I’ve mentioned, adding these messages means that you will need to find all the places you are using a loading screen or a progress bar and add them there.
Now it’s important to NOT get too technical on your messaging in this area. Your users do not care that you’re parsing through the GET variables and validating each entry. Instead, a more personal status message (like shown above) will get your users excited and ultimately become more amazed on how pleasant your design is.

Mistake #8: Not remembering Form field values

This one can be a real nuisance. This is when your users have gone through the trouble in filling your big form, only to lose it on the next step. This is common in forms that have failed server side validation. If not coded correctly, form values will become empty since the page is refreshed and loaded again.

How to Avoid

While I’m a strong advocate of server side validation, I think adding a front end component to this is even better. A good jQuery plugin called .validate takes care of this scenario. This plugin prohibits the form from submitting until the user fills all the required field values. It also provides nice inline error messages – which can take care of Javascript alert boxes (described in Mistake #3).
For other forms that have subsequent steps (a review page for instance), then you will have to write the form values into a temporary storage such as session. This enables you to refill the form fields as needed.

Mistake #9: Too many form fields

Although you would think that this one is already a given, it’s still a UI mistake I see way too often. A form should never have too many fields. It’s intimidating, ugly and is hard for users to fill in. Really, I don’t think anybody have ever felt joy in seeing a hundred fields to fill out.

How to Avoid

Reconsider your fields. Do you really need a first and a last name? Can you get away with combining them? What about that extension field? Is it really necessary? A lot of thought is required when designing forms. Only the important fields stay, while the rest must go.
In cases where you really need all those fields, you might want to use tabbed content. Divide the form sections into parts where you can hide, and only show them at the right time. This type of UI design especially works on large, intimidating forms.

Mistake #10: Not having a responsive page

And finally, the big UI mischief. Your desktop version might render fine in a PC. But If you don’t have a mobile version of your site, think of how bad the user experience is when your site is accessed through a phone.
Vertical and horizontal scroll bars all over the screen, having to swipe your finger to view the content on the right side of the page. Elements that are so small they’re barely readable. Links so tiny – they’re not even clickable. The list of bad experience goes on. The bottom line: it’s not meant to be viewed on a phone.

This is what responsive design aims to fix. The same website as desktop is served no matter what device. The pages adjusts accordingly depending on the resolution of your screen. Responsive design takes in consideration these key areas: readability, accessibility and functionality.

How to Avoid

Switching to a Responsive design might need a major rewrite of your code. If you’re running a CMS such as WordPress, this can actually be as simple as installing a responsive theme. If not, then there are responsive frameworks and utilities that will make the rewrite a lot faster. A couple of my favorites are Bootstrap, Foundation and Skeleton.

Conclusion

Keep in mind that many of these mistakes are so small, that you may not even think that anything is wrong with it. But they are mistakes nevertheless. Sooner or later, they will result in some loss. May it be in user retention or goal conversions.
Remember, today’s content is so competitive – that if you don’t give users a good experience, you may have just lost their business.

The post 10 Common UI/UX Mistakes and How to Avoid them appeared first on Michael Soriano.

Step 1 – Create your pattern

Fire up Photoshop and create a new file. The dimensions are 3 pixels wide and 3 pixels tall:

Ctrl + Shift + N to create a new layer – leave it untitled and click okay. Zoom in to the document as close as you can (by pressing Ctrl and + at the same time). Hide the background layer by clicking the “eye” icon from the layers palette:

With the Layer 1 selected, grab the pencil tool – decrease the size to the smallest (1 pixel), set the color to black and click 3 times onto the layer (in a diagonal line). Not to worry about being perfect – it will snap into place:

Go to Edit > Define Pattern. You can name you pattern and close the file without saving. Your pattern should be saved in your options palette.

Step 2 – Set the Background

Create a new file in Photoshop – a good size is 800 pixels wide and 500 pixels height. Add a daub of color to the background layer – I chose #c8bcb2:

To amplify our text effects even more – I like to add some texture on top of our background layer. A new website called Tileables specializes in such textures. I grabbed the “Fabric” pack from the Tileables-Pack-04 collection – open the .psd file from the zip file and drag your desired texture into your file. Decrease the Opacity of this layer to about 20 percent:

Create another layer. Select the paint brush tool – set the pixel size to 600, color to #ffffff, and Opacity to 31 percent. Click on the center of your document.

Step 3 – Create your Text

Using the text tool – type in your title, set the font size to real big (I’m using New Clarendon Font type and its set to 176 pixels, and bold type)

Right click on the layer and duplicate it. Nudge the layer downwards and rasterize it (right click the layer > “Rasterize Type”).

Double click on the rasterized layer and this will bring up the layer style window. Click on the “Pattern Overlay” option and select the pattern that we’ve created from Step 1 (should be the very last swatch).

You should see our layer with our newly applied pattern. The problem is – the original white background bleeds through.

Double click on the layer again to bring up the styles. In “Blending Options” – make sure it’s on “Blend if Gray” and slide the first handle to the right all the way to the middle. This should take care of the white bleed:

By now you should be a master of duplicating layers. Duplicate the original text layer once more, rasterize and fill with #ffffff. Nudge this layer downwards just a couple of pixels. This will give it a more dramatic outline effect:

Step 4 – Embellishments

The word “flyer” – will have an entirely different font type, partnered with a horizontal line with an etched effect. Here’s how that’s done:
For the word “Flyer” I chose Nevis, and made it all capital letters. The font size is 36 pts, color is #000000.
Place the subtext directly in the center of the main heading:

Using the Line Tool, draw a line underneath the main heading (hold the shift key while drawing). Use a 2 pixel line with #000000 fill:

Duplicate that layer and change the fill to #ffffff; then nudge the layer a couple of pixels downwards.

Combine both line layers by selecting them, right click and hit “Merge Layers”. With the selection tool, change the feather to 2 pixels; select over the word “Flyer” with just enough padding – then hit delete:

Conclusion:

And that’s it! Take a look at the screenshot below for the final product. You can download what we’ve just created – but it will contain rasterized text layers. I did this because chances are – you won’t have the fonts that I used. Feel free to leave a comment below.

The post How to Create Diagonal Text Shadows in Photoshop appeared first on Michael Soriano.

Step 1: Set the groundwork

In Photoshop, create a new document, 800 pixels width x 340 pixels height. Add a new guide – 70 percent from the top border of the document:

Add a dark background (I chose #292929), add a text layer and type out your words. The text settings are: 100 pt in size, color #ffffff, and type is “Myriad Pro – Black Italic”. Note that if you don’t have the same font – use something a similar italic, block type font.

Now, delete all the letters in your text layer and duplicate the layer for each letter. What we’re trying to do is have a layer in its own layer like below. Nudge each letter so they’re quite close to each other:

Step 2: Create the Text Effects

Now we’re ready to create the text effects. Double click the first letter and apply the following effects:

Drop Shadow:

Inner Shadow

Gradient Overlay

Add the following colors for the gradient (to do this click the gradient box from above). Move the color handles in the bottom bar to the position indicated. Leave the colors at #000000 and #ffffff.

Step 3: Copy and Paste the Layer Styles

Right click the first letter layer, select “Copy Layer Style”

Go to the next letter layer, right click and select “Paste Layer Style”

Continue doing this process to all the layers.

Step 4: Final Touches

Adjust your letter positioning according to your text content. The point is to just have enough spacing for subtle shadows to appear onto the next letter. I also decided to change the font color to the word “flyer” to #d30000 to match my color schema – choose your own color for yours.
Finally, create a new layer just above the background layer. Using the brush tool with these presets: (choose a really soft tip, adjust to 300 pt, with color #ffffff, opacity level to 24 percent). With just one click – daub right in the center of the document to give it that really soft glow in the background.

Conclusion

There you have it, a simple yet beautiful logo from nothing more than layers of text subtly overlapping each other. Play with the effects to your heart’s desire. You can even adjust the vertical positioning of each letter – just to add a bit more kick. Feel free to Download the PSD file.

The post Create a Simple Logo with Overlapping Text Effects appeared first on Michael Soriano.

Convert the Feature into a jQuery Powered Slideshow:

Our feature section looks good as it is. Though it would be better if the large image on the right would change and cycle through other images. In other words, we need to convert it into a slideshow of our best work.

Adding the Script Files

First thing we need to do is download jQuery. jQuery will be powering all of the javascript we’re using for our page. Head on to http://jquery.com/, download and save it into our current directory.
Inside the head section of our HTML, insert our script tag. Now all of jQuery’s magic is in our fingertips. Download the slideshow plugin from: http://jquery.malsup.com/cycle/. Right below our first script tag, insert directly below:

Getting the images ready:

Now that our scripts are intact, let’s get our images and our stylesheet ready so the animation will take place. Open feature.png in Photoshop and create new guides as shown below. Make sure you cut right down to the pixel.

Cut out the center image and fill with solid color.

Save the file under the same name.
Create several images that will go inside the slideshow – all must have the same dimensions – in our case: 476 pixels and 349 pixels.
Insert the HMTL right below the feature div. Of course you will replace the image names with your images, along with the right path:

Append this code inside your existing style.css file:

This ensures that the slideshow will sit on top of the designated box in the feature div:
Preview index.html in your browser. By now you should see your new slideshow swapping your images in your feature section:

Next up: The expanding sections, and the “lightbox” effect.

Adding the “More” click events on the sections below the fold:

We have two sections below the fold that showcase what our work is all about. One is the useful “Testimonials” section – where visitors read what others are saying about our services. And of course, the “Previous Work” area – where you plug in screenshots of work that you’ve done. This may be websites, photographs, software; anything that can be screen captured you can apply.
The point is to only show a few of testimonials, and a few thumbnails of your previous work. When visitors click on the “More” buttons, the section expands to show the rest.
This approach is also best for people who have plenty of work, but only would like to show a little at first.

Insert the code below inside the $(document).ready function:

The above code first hides our testimonial DIVS (that are greater than 3) and our previous work list items (that are greater than 4). Then it alters the HTML of our buttons, as well as toggle our hidden sections to appear while sliding slowly.

Adding the light show effect for the Portfolio gallery:

For the portfolio thumbnails – it would really be nice to add a “lightbox” effect once the images are clicked. Lightbox provide a way for viewers to see the detailed image without physically leaving the page. For our portfolio – we’re using http://fancybox.net/
Download: http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip
Extract the files and copy the folder “fancybox” from the unzipped file and place in the root folder of our portfolio. Inside index.html, place the code in the head section:

In our un-ordered list of thumbnails, insert this “class” and “rel” attributes for each anchor tag. Refresh index.html in your browser and click a thumbnail. You should now see the effects of Fancy box from your portfolio:

Last step: The contact form.

Completing the Contact Form with PHP

Since HTML and javascript doesn’t support contents of a form to be sent through email, we need a little help from PHP to bring our contact form to life. We are now working with server side technology, so won’t be able to test our file without a web server. So in order to test our code, upload your file to your web host or run apache locally using WAMP or MAMP.

First thing we have to do is change the extension of index.html to .php. We will be working with the .php file from now on. You can discard the .html version – or keep it for archive.
Look for the form tag inside index.php; add a method “post” and an action attribute.
This enables our form to use the $_POST array and be processed by the same page. To test the contents of our post array, type the following code right above the form:

Now, add some stuff to the form fields, click “Submit” and see what our pre tags have spitted out:

Now we know what we need to work with as far as the contents of our post array. We can now remove the pre tags and continue to work on our code. Add the following code on the very top of the page (even before the !DOCTYPE declaration):

What the above code is doing:

• Checks to see if the “submit” button has been clicked by checking if an array key by the name of “send” exists. If it does, the rest of the code executes:
• We’re creating several variables that we can work with – this includes $to – email address to send to, along with the contents of the post array
• We’re compiling the message by concatenating the variables we’ve created
• Finally, the “mail” function which is what allows you send mail

Now it’s time to test the code. Enter your email address into the $to variable then upload index.php to your web server. Fill out the form fields and click “submit”. You should receive an email similar to below:

Now remember that this is a stripped down version of a contact form. You should seriously consider adding several things such as form validation and formatting the entries for safe and legitimate values. Also add error and success messages to let the user know what’s going on. (I won’t cover such things because as you can see – this tutorial has gone waaay too long).

Final Words

There you have it – a complete single page portfolio. We started all the way from scratch: Mocked up the concept in Photoshop, hand coded the HTML, while slicing the images and writing the CSS. We’ve added some jQuery magic as well as a little bit of PHP functionality. As you see – a lot of work does go into it (and that’s just a single page!)
In closing, I hope that you may learn something from this 3 part series. I also would like to thank the script and plugin developers which I included in this tutorial. You can download the finished product from this link, and of course view the live demo from here.

The post Create a Single Page Portfolio from Scratch – Part 3: jQuery and PHP appeared first on Michael Soriano.

What is FlowPlayer?

FlowPlayer is an open source video player for the web. It is a way for you to stream videos in your pages, from your own server. Thus, eliminating the need for external video serving services such as YouTube. FlowPlayer is highly extensible and customizable. Though it may take a little more than a few clicks – the benefits far outweigh the work needed to get it running. Consider these pros and cons:

Pros:

No Links to External Sites – As I’ve mentioned, this alone is enough reason to use FlowPlayer. Your visitors cannot escape your website when video is live. They stay in your site during playback and when clicked. In addition, you can configure your player to use custom events (see below)
CSS Skinning and Branding – You can totally change the appearance of Flowplayer. This includes player controls, backgrounds and logo (custom logo is supported in the “Commercial” version). Best of all – skinning FlowPlayer follows strict web standards using simple HTML and CSS. Check out this demo using a billboard sign as the background of the player: http://flowplayer.org/demos/skinning/container-background.html.

Set your own Splash Image – one of the annoying things about Youtube is it automatically selects the splash image for you. With Flowplayer you can select a high quality image as the splash state – before the actual player loads.
You can add your own Events – configure your player to do more than just playback videos. Examples can be adding captions during playback, extracting clip information as well as chaining video clips to play one after the other. See some examples of events here.
Extend with Plugins – Plugins are already made functionalities that other developers have created and made available for you to download. Examples of kick ass plugins are Flash Content, Javascript Embed and Streaming Slow Motion.

Cons:

Need some HTML experience – you will need to touch the source code of your pages to use. For advanced functionality – scripting technologies such as javascript and flash is also required
You need to convert the videos locally first before uploading – at the time of writing, FlowPlayer supports FLV, H.264 and MP4. You will need to convert your video to the said formats before uploading. Check this article for good information on Flash Video Conversion: http://worldtv.com/blog/guides_tutorials/flv_converter.php
Bandwidth – Since videos are served locally you may see an increase in bandwidth usage.

How to use FlowPlayer

What I really liked about FlowPlayer is their extensive documentation. It includes walkthroughs for beginners, as well as in depth instructions for the expert programmers. To start using FlowPlayer – all you need is to do the following:
1) Download the FlowPlayer Files – This download includes the actual FlowPlayer .swf files as well as the .js file to get you started. It also includes an HTML page that demonstrate the basic installation of FlowPlayer.
2) Include the flowplayer.js in your HTML:

3) Setup the player container – Simply add an anchor tag with 3 important attributes: a) href – the pointer to the video file, b) style: determines the size and basic display properties of the player and c) id: very important – this acts as a selector for the javascript to target to load the player.

4) Install Flowplayer – The final code tells FlowPlayer to install in our anchor tag:

FlowPlayer and WordPress:

Oh yes – you can actually embed Flowplayer inside your posts. The beauty of it is – there are actually several Flowplayer plugins already available for WordPress. Though I’m just going to cover the two most popular:
FV WordPress Flowplayer – developed by Foliovision, is a straight forward FlowPlayer plugin made exceptionally easy. All you need is to install, upload your video and add the plugin shortcode to your posts. Note that this is the plugin I’m using for my video demo above. The screenshot below shows the plugin options page:

Flowplayer for WordPress – created by David Busby of Saiweb, this plugin also includes player customization features as well as commercial license key input for advanced settings:

Embed FlowPlayer in your Theme:

If you’re like me, you may come across a website project that requires videos hosted in their own server. Of course WordPress and FlowPlayer is a good combination. What about if the requirements for the player are so extensive that may not be achieved with any sort of plugin? This is when you’d want to embed FlowPlayer in your theme.
The process is pretty much the same as the basic FlowPlayer installation. The only difference is we’re using custom fields for the href attribute of our player. In your theme folder, edit single.php and include this code inside the loop:

This sets up a default player for each post, wrapped in an “if” block. This way you customize the page to your client’s extensive requirements. A screenshot of my page mockup is shown below:

Don’t forget the call to install FlowPlayer:

Now all you need to do is upload the movie using the default WordPress media uploader, and plug in the url in a custom field set to “movie”

Conclusion

If you haven’t already noticed – almost every aspect of FlowPlayer can be customized. Having this much control over video content is invaluable and cannot compare to services like YouTube. Best of all, the basic version is free under the GPL license which you can use for personal or commercial purposes. Note that there are also paid versions that determine the amount of branding you can as well as legal domain usage. Head on over to FlowPlayer’s website for more information.

The post Embed Videos in your Web Pages with Flowplayer! appeared first on Michael Soriano.

The Wrap, Header and Feature Divs

First of all, you will notice that our layout doesn’t really have anything in the header. This is because I’m sure you will use your own logo for your design – so I left that out. Second, is there really is no need for a navigation bar because we’re only building a single page. Although we may include some anchors in this area so we can quickly jump from one section of the page to another. Also important to recognize that most modern websites now have a large “feature” section which packs the main message of the website. This effect is proven to be pretty effective – that’s why we’re applying the same concept to our portfolio site.
In Dreamweaver, create a new HTML page, name it “index.html” and save it.

Create a CSS document – name it “styles.css” and save it in the same location as “index.html”. Link to the stylesheet from index.html by using a link tag:

Now, we create the main DIV – we’ll call this the “wrap”. In this DIV we’ll house almost all of our elements (all but one: the footer – which I’ll explain later). In index.html, enter the code:

Next, we grab the body style of our page. Go to Photoshop and open our mockup. Flatten the image (“Layer” > “Flatten Image”) and grab a piece of background:

Still in Photoshop, press Ctrl + C to copy the selected area, create a new document – and paste (this will be our HTML body background that will span horizontally). Save this file as “body-bg.gif” inside a folder called “images” in our root directory.

Next is we apply some fixin’s to our CSS:

The above code tells everything to reset to 0 padding and 0 margin. It also applies the body background to the image we just created, repeat it horizontally and apply the color #f3f2ed everywhere else. View your file in the browser, you should have something like below:

Now remember we created the main div? That is just sitting in somewhere in the page. Let’s apply some standard measurements to it and align it so it settles perfectly in the middle of our browser.
Note that in the beginning of this tutorial – I was going to use the 960.gs framework, but feel as though I’m cheating because the tutorial calls for “from scratch”. So I decided, I’m not using the framework and code everything by hand, hence – “from scratch”.
Add this code to your style.css:

This centers our wrap in the middle of the page, as well as set the default 960 pixels width. The background color and the minimum height properties are added temporarily so we can tell from the browser what we’re working with. Refresh your page and you should have something like below:

Go back to index.html and add the header div inside the wrap div:

Back to our style.css – add this piece of code:

Refresh your browser – and you can see where our header sits nicely on top. The background color again is temporary.

Next is our feature div. Create a new div tag in your index.html with the id of “feature”, place in between the “feature” divs. Add two paragraph tags inside with your own text. In my case – I’m using the default Lorem latin filler text:

Notice the first paragraph tag has an id of “slogan”. This is because this is the primary text that we are going to style with an image. We are treating it as regular text for SEO purposes.
Go back to your mock up in Photoshop and press “Step Backward” (ctrl + z + alt) several times until you get the fully layered version once again. Make sure the guides are showing – select the feature section like below:

In your layers panel, make sure you hide all the layers that shouldn’t be shown. This includes all the background layers and text elements. The only layer that should remain is the large feature image and the borders and glow to the left. Select the feature area and hit crop (“image” > “crop”). Save this as “feature.png” inside our images folder. This will be our feature div background image:

Now in our styles.css – add the following code:

Go back to your mockup and click “Step Backward” (“Edit” > “Step Backward”) to uncrop. Unhide the slogan layer and select it according to the guides. Crop once again and save this as “slogan.png”.

Now add this code to your styles.css:

The above code styles the two paragraph tags inside the feature div. The first one with a background image, and the next one as plain text. Now when search engines crawl our page – it still thinks both are plain text – which is a good thing.

I’ve also taken out the color property in our wrap div to see how our feature looks like. Another thing to remember is that since our feature sits in its own div – it will be easy to add a slideshow or something to that effect as replacement.
Now that our wrap, header and feature is in place, we’re ready to move to the next sections: Testimonials and Previous Work:

Testimonials and Previous Work Sections

If the feature section is our hard hitter – a testimonials area is our “counter punch”. Testimonials are a sure fire way of telling our viewers: “we’re good – read what others are saying about me!”. Also another proven way of increasing business, it is also the reason why we’re putting testimonials right below our feature section. Ready to continue coding? Let’s keep going.
In our index.html, add the code for our testimonials. Place this directly below our feature div:

Of course, you substitute real testimonials and authors in its place. Notice the “first” and “last” additional classes to the columns – we need this to fix our margins in our css. Next, go back to Photoshop and go backwards again so you get back to the original uncropped file. Select the Testimonials title all the way to the rightmost guide. Crop and save as “testimonials-title.jpg” inside our images folder.

Inside styles.css, append the below code:

This code adds the background image that we just created to the main testimonials div. It also adds proper styling to the columns inside the div, and fixes to the margins so it remains inside our imaginary grid.
The optional “more” tab
The more tab is only necessary if you have more than 3 columns of testimonials that you would like to show. The point is just show 3 columns at first, and by clicking the “more” tab – more testimonial columns will slide below – most likely to be achieved by jQuery (I haven’t gotten there yet – remember – I’m writing this tutorial as I go!).
To add a more tab – add this code to your HMTL, right underneath the last column div:

Note that we used a class for our div instead of an id. This is because this div can actually be reused in another section of our page.
Go back to your Photoshop file – click “Step Backwards” to the uncropped version – select the section that shows the “more testimonials” border and button according to your guides. Remember to hide the text layer over the button.

Crop and save this as “more-bg.jpg” inside the images folder. Add the code below to your .css file:

For the “Previous Work” section – it’s pretty much the same process as testimonials. The difference is – we are actually using an unordered list instead of div columns. Add the following code inside your HTML:

The thumbnail sizes are going to be 200 pixels width by152 pixels height. My sample code contains dummy thumbnails along with temporary images for the bigger image. We are incorporating a light box effect in the final product so users do not actually leave the page when viewing your gallery. Notice the addition of the “more” tab – which is again, purely optional.
For the “Previous Work” title – you do the same exact process in Photoshop as you did previously in the Testimonials title. Save this image in the images folder – name it: “previous-work-title.jpg”.

Now we add some styling to the list items, thumbnails and the entire div section:

I also created a couple of thumbnail image backgrounds for the active and hover states. Again this is purely optional and I won’t go over in this tutorial.
Now refresh your page in your browser. You should have something like the image below. It is also good practice to start viewing your page in different browsers. This way – you can start fixing bugs this early in the development process. Next stop is the footer.

The Footer

Let’s go back to our Photoshop file – you may have to go back in history a couple of times to get you to the uncropped, fully layered version. Another thing to remember is NOT to save your original mock up file. This file is to stay in its original form – we are just cropping, hiding layers as we go to get the parts we want. But in the whole, this mockup .psd file remains in its original state. Select the footer area – starting from the guide a few pixels above the dark brown area.

Once selected – crop the selection – but don’t save as of yet; we’re going to save a couple of images from this selection – one is the footer wrap, the other is the actual footer background.

Once cropped, select the first 20 pixels from the left and crop once again. Save this file as “footer-wrap.gif” inside our images folder. Now go back to the Photoshop file and step backwards a couple of times to bring us to entire cropped footer image. Hide the layer group named “form”, as well as all the text layers in the footer area.

Save this file as “footer.jpg” in the images folder. Unhide the text layer that says “Hire Me for Professional Work”, and hide all the background layers so you get full transparency. Select the text area using the rectangular marquee tool and crop. Save this file as “slogan2.png” in our images folder.

Now hit “Step Backward” (ctrl + alt + z) a couple of times to get to the uncropped footer image and unhide the “form” group of layers. Make sure you hide all the layers inside the form – all we need is the rounded container that embodies the form. Select this area, crop and save this file as “form-bg.png” in our images folder.

Finally, unhide the button text, shape and glow. Create guides that surround the button image and select accordingly. Crop and save as “submit.png” in our images folder.

Now go back to our index.html, add the following code right underneath the entire wrap div.

The above code sets up all the content in the footer. This includes the two paragraphs on the left side and the contact form. Note that the form is still static. We will be converting this into a working form once we convert this to PHP.
Next up, is to style the contact form. Add the following code to your styles.css:

The above code sets up our footer wrap to span the entire width of the page with its own background image repeating horizontally. Now you understand why we excluded this from the main wrap div? The rest of the code applies the styling to the footer and contact form – tied to the images we created in the previous steps.

Finally, we add the final touches to the two paragraph tags on the left side. Add this code to your styles.css:


That concludes are HTML and CSS tutorial on our single page portfolio. Remember, we still have the scripting side to do – which is handled by PHP and jQuery, which we’ll cover in the next series. Click Here to see the DEMO Version of what we just created. The source code is also available to download – which includes all the files covered in this tutorial.

The post Create a Single Page Portfolio from Scratch – Part 2: HTML and CSS appeared first on Michael Soriano.