Archive for 'CSS'
Showcase of 30 Beautiful Blog Designs
Posted on 11. Mar, 2010 by Vandelay Website Design.
It’s been a while since we did our last blog design showcase, so this post is a collection of 30 beautiful blogs for your design inspiration. You’ll see some that use a minimalist design approach, others that use a grunge-style design, some that are magazine-style, and more. For more blog design inspiration, please see our gallery site Blog Design Heroes.
For more design inspiration please see:
- 40 Inspiring Blog Designs
- 25 Beautiful Blog Comment Designs
- 30 Creative Website Headers
- Button Design Showcase
Article source: Vandelay Design Blog
Continue Reading
Interview with the Web Designer, Damian Herrington
Posted on 10. Mar, 2010 by Holly Lamarche.
As I have mentioned in our last interview, here at Admix Web we are doing an interview series, where we will conduct informal weekly interviews of fellow designers and developers. It is our contention that these interviews will not only give us great insight into the people behind the designs, but they will also help with networking, collaboration, and generally getting to know each other on a more personal level. We are still looking for people to interview, so please contact me at hlamarche[at]Admixweb[dot]com if you are interested in being interviewed or would like to nominate someone for an interview. Last week, I had the pleasure of interviewing the well-known designer, Brian K. McDaniel of bkmacdaddy designs. This week, I went on over to the UK and interviewed the new up and coming UK designer, Damien Herrington. Enjoy!
Thank you so much for doing this interview for Admix Web. Can you give us a brief background on yourself?
Thank you for interviewing me. My name is Damian Herrington, and I am a freelance Web Designer from Hull, East Yorkshire, United Kingdom. My core skills and services are designing and developing user-friendly, innovative and detailed websites. I can also provide content management integration in the form of Wordpress and e-commerce integration in the form of X-Cart.
Do you consider yourself a web designer, web developer, or both?
I would consider myself a web designer, but I am not afraid to get my hands dirty and do some developing.
Why Design/Development as a career? What were your inspirations for that profession?
Originally I wanted to be a programmer. I love creating something from nothing, and also I enjoy the pursuit of trial and error when something isn’t going to plan and the self-satisfaction you get from finding the solution. It was in my second year of university that the programming we were doing was going over my head, and I didn’t enjoy it anymore. I then became interested again in designing and developing websites. My inspiration doesn’t necessary come down to a single person or company; it comes down to the enjoyment of the website, where it looks amazing and is very usable, which is a winning combination. I suppose that’s my inspiration in wanting to be really good at web design.
Are you self-taught or did you study design/development?
I am mostly self-taught, touching on certain aspects through college and university as the courses were not specific to web design or development but the main impetus has been myself to learn and develop my skills further.
How many years have you been in the field, and how has the field changed during that time?
As a profession it has been since May 2009 when I started freelancing. But, web design and development has been with me since college, so about 8 years on and off learning. I think the main change in this field I have noticed over the years is website quality. If you go back 10 years and look at Microsoft’s website for example, you notice the design is flat and the emphasis was on making sure everybody could see every possible link that the user could ever possibly want to go to. Now websites are about engaging the user experience, the visual elements and the way the information is presented is now well thought out and I think that’s down to the shift being from somebody like a “techie” building a website to now a professional with a background in designing and developing websites.
Can you describe a day in the life of Damian Herrington?
As a freelancer I still like to keep my day as structured and regimented as possible, similar to what I would get at a company or agency. So it would go something like this, I get up around 9:30am, breakfast and begin checking e-mails, read some news and blogs, begin working on projects until either 1:00pm or 2:00pm depending on how engrossed I am in my work, have 1 hour for lunch away from the computer, and back to work until around 7:00pm and that’s pretty much it. The day/s I am not working on projects I am marketing and or other administrative tasks. I don’t work weekends unless something really needs doing as I feel like I am never away from the computer otherwise.
What was your first design you actually marketed? How do you feel about it now?
Because I have not been in business that long I still use one of the first websites I marketed on my portfolio. I think it’s a nice clean business website. However, I would do so many different things with it now both with its design and development. It’s funny how in a short space of time my techniques differ from when I built that website. Looking at some of the other designs I made for personal work I don’t like them at all, which just shows that designers can always better themselves by learning new things no matter what the experience.
What are your favorite types of movies and why?
My favorite types of movie genre are; Thriller, Action, Sci-Fi and Comedy. My favorite films of all time would have to be all the Back To The Futures, Shawshank Redemption, Midnight Express and Iron Man plus many others in my collection. Why? I can’t really answer that, other than the enjoyment that they bring watching them over and over again. They never lose their appeal.
What books do you consider must reads?
Providing you have the time, all books! With regards to design and development when I was writing my dissertation I really enjoyed Jeffrey Zeldman’s designing with web standards, it’s a really good book that provides the neccessary foundations for good web standards. Other than that its been a while since I read any design/development orientated books. On my list to read though I would like Smashing Magazine’s book and also David Airey’s book, Logo Design Love. Outside of the work world I am currently reading Robinson Crusoe.
If you could give a Shout Out to someone who has inspired you in your life, but may not know it, who what it be?
That’s a tough one. Purely from a design point of view it would have to be everybody who I follow on twitter, read their blogs and view their websites on CSS showcase galleries. From the point of view in succeeding in what I love to do and becoming the very best I can possibly be has to go to my mum.
What is your favorite type of design work? And, what has been your favorite project?
I think my favorite type of design has to be something with a grungy element or something that can really let your creativity be exploited. This is a design I am working on currently for a friends’ band. This has allowed me to; I think create a really good theme without any constraints. So I would have to say so far this design has been most enjoyable.
What is your least favorite type of design work?
I think my least favorite design work, and I believe it’s the same for most designers is your own website. I have so many ideas, and its difficult to separate those ideas from the good and the insane. Aside from my website I would have to say really minimalist sites. I feel like when I design a minimalist site there is too much space or I should be putting something in a particular place. But again that’s probably down to experience and good use of content placement.
Explain the significance of your company logo.
I wanted a logo that was clean, easily memorable and something that signified a connection or a bond between me and my clients and so that’s why it looks similar to an atomic symbol minus the atoms and molecules.
Are you a Mac or a PC? Why?
Mac. I was getting frustrated with my PC, as it just seemed everything that I did, it wanted to take forever or just crash and I had enough. I moved to Linux for a short period of time, but I was unhappy with the lack things I was a custom too. So I moved to Mac and never looked back. Plus you can’t beat how the Mac visually looks internally (OS wise) and externally and all the wonderful applications there are. I do however still use PC for development purposes.
What design tools do you use? Which tools would you suggest to fellow designers/developers?
I use Photoshop for mainly everything. So I would say invest in the creativity suite as you have everything you could ever possibly need. Even though it’s expensive I think it’s worth it in the long run. I also use Illustrator for specific design elements too. Development wise I did use Cyberduck (FTP) and Text-Wrangler (Text editor) both pretty good and free but recently I have been using Coda and I am very impressed. Another excellent application I would suggest to invest in is Little Snapper. It’s nicely built and manages your website snapshots perfectly, ideal for keeping a collection of your favorite websites.
What does your workspace look like?
Not the most interesting of setups, but it gets the job done. I use the Macbook and additional screen for all my daily designing and developing needs. When I need to be in Windows, I use the Mac Mini as my development area so I can stay in Leopard and use Coda and the Macbook dual boots into Windows XP where I use IETester.
What makes you unique?
I think being a one-man band I can work more closely and have more time with a client, ensuring their ideas transpire into creating their ideal website. I also believe my punctuality and the ability to help the client in what ever way after the website has been finished is also a bonus rather than just building them a website, taking there money and not having any contact after.
What are some of the design and development blogs you read on a regular basis, why?
CSS-Tricks, most of the tuts+ network, Smashing Magazine, Web Designer Depot, Chris Spooner’s blogs, CMD + SHIFT, It’s Nice That, David Airey and FFFFOUND! are just some of the blogs I read. I read these blogs because I love reading and learning about the design and development world and these blogs provide great content.
Where do you see yourself in 10 years? Where do you see design, the web, and development in 10 years?
In 10 years time, I would like to see myself either as a successful freelance web designer or taken the plunge and opened my own design and development studio. I think design won’t change that much, trends will come and go I think the difference will be how users will be able to receive and interact with the content either through mobile development or through your Television.
Please share some pearls of wisdom for up and coming designers in the field.
Do what you love and love what you do. Not everything in life is all crumpets and cream so just work hard, never stop learning, stay motivated and stay determined on doing what you want to do or where you want to be.
How can people get in contact with you?
You can contact me via my contact form/e-mail address on my website, twitter or Tumblr
Article source: Admix Web
Continue Reading
Projecting Professionalism: 5 Ways to Make Your Business Seem Bigger Than it Is
Posted on 10. Mar, 2010 by admin.
Big is good. Despite the common assumption that small companies are the best when it comes to customer and client service, many businesses look the other way when selecting a service provider or contractor. Rather than selecting based on individual attention and customer care, they look for other signals of approval – the ability to work with large clients, a proven track record, and the structure to support large assignments and long-term contracts.
For a small boutique provider, it can seem nearly impossible to get a foot in the door. The big guns are looking for companies like them – large, powerful, and very experienced – but in order to become one and gain access to their contracts, you need to become one yourself. For some small businesses, that means acquiring additional overheads and growing in size, even if its just perceived size for some of your clients and customers.
These five tips can help you transform your business’s image from small and micro-focused to large and powerful. With a few small additions, new strategies, and client interaction changes, these tips could land you ultra-valuable clients and customer contacts, long-term contracts, and the experience required to market yourself to the biggest companies in the world. Apply one, two, or all five, and watch your business’s value grow in front of you.
1. Use a virtual assistant for emails and task management.
When you run a business that operates entirely online, in-person employees for administrative tasks just result in higher overheads and greater workloads. A virtual assistant and remote employees can save your business money – virtual assistants are typically paid per-task or on contract – and at the same time dramatically increase productivity.
On the image side, employing a virtual assistant can be a major asset for your business. Clients are wowed by size, and having a personal assistant or extra employee can result in some real authority when searching for large clients. Want to make your business seem bigger and more powerful for client acquisition? Have your virtual assistant handle an individual email address (sales@company or support@company are good choices) and demonstrate your business’s size to prospective clients.
2. If you list a phone number, add an auto-directory.
Almost all phone companies offer navigation and directory systems for a small fee. For those that don’t know, that’s the “press one for…” system that pops up whenever you call a major company or well-known business. While some consumers hate dealing with automated calling directories on the phone, most businesses see them as a sign of authority and competence.
If you’re not a fan of your own voice, most phone providers will be able to provide a simple recording for your phone system. Even if you’re only routing callers to sales, technical support, or your independent phone line, a simple split-option phone system can make your business appear more professional and valuable than it otherwise would.
3. Tell your clients that you’re working with other employees.
The smartest thing any business can do is tell you that they don’t work to promote you, their team does. Large clients value the type of organization that’s present in their companies – teams, interlinked divisions, and groups of people working towards a relatively common goal. By telling your clients that you’re working with a team on their projects, you increase support and boost trust levels.
Better yet, build a team that gives your clients amazing service. Whether it’s a simple team of contractors for micro-orders and small overflow work, or a large team for corporate clients and top-ranked business in your area, building a valuable team can boost your per-project income and help you gain more big clients in the future.
4. Expand your web presence.
Say you’re a web design company that’s also offering basic SEO services and internet marketing strategies for clients. Seems smart to list them through the same website, right? While it might be best for your rankings and client acquisition goals to list them all through one website, it can actually be a poor strategy for hooking major clients and long-term corporate partners.
Why? Because with one website, you’re limited to marketing as a small business. However, with a small network of business websites, each one offering a slightly different service and promoting a different aspect of your service business, you’ll be able to market yourself to companies and prospective clients as a major provider, not just a small fish.
5. Become an expert in your niche.
Posting on blogs, business publications, and local newsletters gives you one of the most important things in business: authority. When looking for large clients and long-term partners, authority is one of the most important things available to your business. It fuels negotiation, allows you to command high prices, and makes it possible to get your foot – or in this case, your email – in the door with major companies.
So get out there and write, be interviewed, and provide content. There’s no way to become an expert but to put in the time and effort, promote yourself, and become one on your own. Contact bloggers in your niche, get in touch with major websites and offer your services, and make yourself known. Become an expert and your business becomes a brand, your clients become more valuable, and your total business income skyrockets.
Related posts:
- 6 PPC, CPM, and SEO Marketing Tips for Your Service Business Online entrepreneurs have an incredibly wide range of marketing options...
- 5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work Working online can be great for generating income without high...
- Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make It’s not uncommon to hear stories of large-scale online business...
Related posts brought to you by Yet Another Related Posts Plugin.
Article source: Reencoded
Continue Reading
HTML5 structure – div, section & article
Posted on 10. Mar, 2010 by Alex.
HTML5 structure - div, section & article. Explains the meaning of these new HTML5 elements and how to use them properly.Article source: CSS Beauty News Feed
Continue Reading
Everything you need to know about HTML5 video and audio
Posted on 10. Mar, 2010 by Alex.
Everything you need to know about HTML5 video and audio. Learn about all the nitty-gritty details of HTML5 media, the DOM API, events, and so forth.Article source: CSS Beauty News Feed
Continue Reading
Desktop Wallpaper: 80+ Most Breathtaking Places on Earth
Posted on 10. Mar, 2010 by Tony.
There are many sources of inspiration that designers look to when trying to get their creative juices flowing. I think there is none better than the breathtaking landscapes that nature has to offer. In this post you will see some of the most beautiful places on earth. You will see everything from the mountains of [...]Article source: Designrfix
Continue Reading
Comment to Win a One-Year Membership to MediaLoot!
Posted on 09. Mar, 2010 by Vandelay Website Design.
Earlier today a new membership-based site, MediaLoot was launched. It is an online toolbox of premium design resources, and they have kindly offered to give five readers of the Vandelay Design blog a one-year membership to the site for free!
MediaLoot is a project of Jon Phillips of Spyre Studios and Mason Hipp of Freelance Folder. Members of MediaLoot are able to download resources like textures, icons, vectors, brushes, templates and more. The goal of MediaLoot is to eliminate the need for pay-per-use sites by offering a subscription-based service where members can download loads of great resources. There are already some quality items available for download, and more will be added on an on-going basis.
I’ve been on the site today and have already download some resources that I hope to put to good use, including textures and icons. Both Jon and Mason have contributed a lot to the design community through their blogs, so I hope you will visit MediaLoot and check out what they have to offer.
The Giveaway Details:
If you would like to enter to win one of the 5 one-year memberships (the normal price is $14 per month), please leave a comment on this post. On Friday, March 12th the five winners will be selected at random. At that time this post will be updated and the winners will be notified by email (so be sure to leave a valid email address).
Also, if you would like to design resources for MediaLoot you can find information about that on their Design for Us page.
Article source: Vandelay Design Blog
Continue Reading
Carbon Fibre Style Inset Navigation
Posted on 09. Mar, 2010 by Richard Carpenter.
Hello, welcome. Today i’ll be showing you how to create a carbon fibre style inset menu. This tutorial comes after a request from one of hv-designs readers, which i was more than happy to oblige.
What We’ll Be Creating
Once you’ve completed the tutorial you should have something like this.
In a later tutorial I’ll also be showing you how to code the navigation into a working CSS navigation, so stay tuned for that.
Inspired By Hugo
The result of this tutorial is inspired by a flash template located here. Lets get started.
Making The Background
Create a new document 1200 x 600 pixels with a transparent background. Set your foreground color to #bebebf and background color to #d2d2d2, then select the gradient tool with a linear gradient.
Once you’ve selected your gradient drag the gradient from the top of the canvas down to the bottom.
Once you’ve filled your canvas add some noise by going to “filter > noise > add noise”, use the settings listed below.
Now blur the background by going to “filter > blur > motion blur”, use the settings below.
Around the left and right edges of the canvas you should see the motion blur, blurred too much. Simply make a selection around the best half of the canvas excluding the over blurred edges.
Once you’ve made the selection crop the canvas. You should now have your lightly brushed metal background, you can fine tune the metal strokes by adjusting the motion blur settings.
Creating The Navigation
Select the rounded rectangle tool with a radius of 10px, drag out the navigation rectangle in the middle of your canvas.
Once you’ve created your rectangle add the following layer styles.
You should have something like this.
For this part we need to make our own custom carbon fibre texture. To do this create a new document 4 x 4 pixels then copy the image below.
Once you’ve created the carbon fibre pattern go to “edit > define pattern”, then head back to your navigation.
Load a selection around your navigation by selecting the navigation rectangle layer then going to “select > load selection”. Create a new layer above your navigation, select the paint bucket tool then find your carbon fibre pattern from the patterns menu. Once you’ve found your pattern select it and fill the loaded selection.
Set your carbon fibre pattern layer blend mode to “difference”, you should have something like this.
Creating The Navigation Buttons
Select the type tool then type out your navigation links towards the bottom of the navigation.
Once you’ve completed adding your textual links add the following layer styles to your text.
In between each link add two vertical 1 px lines next to each other, the lines should start from the very top of the navigation and end at the bottom. Color the first line in black and the second line white. Once you’ve created your lines set the layer opacity to 50% and blend mode to soft light.
Creating The Navigation Orbs
Select the elliptical marquee tool then drag our a small ellipse above one of your navigation links.
Select the gradient tool with a linear gradient, drag a black (#000000) to gray (#828282) gradient over the ellipse selection.
With the elliptical marquee tool once more, create another circular selection inside your last selection.
Fill your selection with the color #8e8e8e. Keep your selection active and create a new layer above your gray circle. Set your foreground color to white (#ffffff) then select the gradient tool with a radial gradient, change the gradient type to “white to transparent”.
Zoom into your selection the drag the radial gradient from the top left corner of the ellipse. Keep the drag short as you don’t want the radial gradient too big.
change the gradient type to linear also keeping the selection active. Create another new layer then drag the linear gradient from the bottom upwards.
Keep adding the highlights changing the layer opacity’s of each layer and the position of the gradients, eventually you should have something like this.
Duplicate the orb and all the highlights then move it across to the next button. Continue to do so until all buttons have there own orb.
Creating The Hover State
To one of the buttons were going to add a hover state, i’ve chosen the portfolio button. Simply add a gradient overlay to the orb using your chosen colors.
Make a selection using the rectangular marquee tool, the selection should be made around your button in between the dividers.
Once you’ve made the selection around the button fill the selection with the color #dddddd then set the layers blend mode to “overlay”.
Finally using the polygonal lasso tool create a triangular shape, fill the triangular shape in the same color as the background, then add a drop shadow using the settings below.
Your finished hover state should look something like this.
Congratulations you have finished the tutorial. In part two i’ll be showing you how to code the navigation into a working HTML/CSS Document.
Continue To Part Two…
Learn to code this navigation into a working HTML/CSS Document (Coming Soon)
Article source: hv-designs
Continue Reading
CSS3, Please!
Posted on 09. Mar, 2010 by Alex.
CSS3, Please! The Cross-Browser CSS3 Rule Generator. Very handy.Article source: CSS Beauty News Feed
Continue Reading
How To Use Curves in Photoshop
Posted on 09. Mar, 2010 by Owen James.
If I were forced to give up all but one image adjustment tool, I would keep curves. Hands down. The curves adjustment tool is an integral part of every professional’s knowledge base and image editing package.
Even if you’ve taken a good photo, chances are it can be improved or it needs to be adjusted to work in a collage or collection. Or even to just to intensify a mood. You can always make a good thing better – and curves is a one-stop-shop way to do that.
With curves you are able to:
- Adjust the over-all contrast or tonal range
- Adjust the local contrast or tonal range
- Adjust the color
Let’s jump in and find out how. It’s simpler than it looks.
Overview
The idea behind Curves is all about re–mapping values. A pixel starts out at a certain brightness, and you change it to be brighter or darker.
The curves box opens as a straight line because you haven’t made any changes yet. That means that the brightness values before and after are the same. You will effect a change by changing the shape of the curve.
The points from left (bottom) to right (top) affect: blacks, shadows, midtones, highlights, and whites. By altering the position in these regions will affect the corresponding tonal range of your image. Leaving the line in the center will leave the tones unchanged.
You begin altering the brightness values by clicking once somewhere on the line. This will establish a “point”; this point can now be dragged to a different place within the grid, which causes that tonal value to change, either lighter or darker depending on whether you drag it up or down. The reason it’s a curve is so that the change blends smoothly throughout the image. An abrupt change in value can be very noticeable. The increasingly gradual change of the brightness values on either side of the change permit a very smooth and believable adjustment.
It’s important to note, however, that you can’t increase contrast in one region without decreasing it in another. The curves tool redistributes contrast. Therefore think of the image having a contrast allocation or budget and you need to decide how to best spend it.
Also, the curves tool will preserve the tonal hierarchy (unless you use uncommon negative slopes). That means that the brighter parts of the image will stay brighter even after your conversion – just maybe not by the same amount.
Quick Tip
Keep effects on adjustment or separate layers to enable quick alteration or removal at any time during the color correction process. (Layer > New Adjustment Layer > Curves. Or at the bottom of the Layers panel.)
S- and Inverted S-Curves
Rollover Image
The S-Curve and the Inverted S-Curve are two curves most commonly used. The S-Curve adds contrast to the midtones while subtracting from the shadows and highlights. The Inverted S-Curve does the opposite.
Often in photography, it’s difficult to expose your image perfectly. Brightness or darkness in tonal ranges can benefit from optimization. The S-Curve is often useful in these cases – not to mention, quick and simple.
Empty Tonal Range and Histograms
Rollover Image
One very useful and important function of curves is to correct empty tonal ranges – in the histogram edges (blacks and whites) or gaps in between (shadows, midtones, and highlights). An under exposed image can be helped by pulling in the black and white points to correct the exposure.
Or if there are gaps in between the tonal peaks you can decrease contrast in specific parts of your image – thereby freeing up the contrast to be used in the more visible areas of your image.
Clipped Highlights
Rollover Image
Images containing a bright light source, such as the sun, can often be harsh or posterized (also called color banding). Posterization of an image entails conversion of a continuous gradation of tone to several regions of fewer tones, with abrupt changes from one tone to another. This can create an unrealistic look, and often a smoother transition to white is preferred.
Correcting Color Balance
All curves thus far have been applied to RGB values of luminosity. But they can also be used on individual color channels to correct color casts in specific tonal regions. Often the color in an image is correctly balanced, but due to reflection or a light source with a varying temperature or color, you may see unwanted tints in a tonal region. Changing the white balance or adjusting the overall color would inadvertently harm the other tones. So we can selectively increase or decrease the amount of a color cast in the red, green, and blue channels to achieve perfect balance.
Any adjustments upward of the diagonal line in the red channel increase the red in the image. Lowering, below the diagonal line, increases the cyan. The other channels are the same: Upward in the green channel, green; lower, magenta. Upward in the blue channel, blue; lower yellow.
RGB color images should be thought of as being comprised of a composite channel and three grayscale channels containing the values of the three colors – red, green and blue. This is shown in the example above of the red on the left, green in the middle, and blue on the right.
Window > Channels to see this on your image.
Rollover Image
You can see in the image above that there is a slight blueish cast in the color tone. Not to mention, the image is slightly washed out (improperly exposed).
As you can see, the sky is already quite white, so we won’t want to effect the highlights and above. By lowering the curve in the midtones and shadows, without effecting the highlights, we solve the exposure problem. Then we’ll get rid of the blue color cast: By lowering the blue in the low end, we eliminate the problem and the gowns go to black – as they should be.
Note
If precise color adjustments aren’t required, simple color balance correction might be easier (Image > Adjustments > Color Balance).
Blending Modes
Also, curves adjustment layers (Layer>New Adjustment Layer> Curves) can be set to make curves only apply to a channel – such as Color and/or Luminosity – which allows for further, varied control. Another benefit is that it can make your adjustments more subtle through use of the opacity controls for the layer.
Notes
Practice makes perfect. The more you use the tools and techniques available to you the better you’ll get, improve your photography, and have fun.
Here are some things to remember when using the curves tool:
- Minimize use of the curves tool, as anything which stretches the image histogram increases the possibility posterization.
- Avoid the use of the curves tool on an already altered image.
- Perform curves on 16-bit images when possible. (Image > Mode > 16 Bits/Channel)
- For extreme levels of color correction, consider applying curves using LAB mode.
Article source: Tutorial9
Continue Reading
Astounding Ajax/CSS Forms: 30+ Modern Trends , Tips and Techniques
Posted on 09. Mar, 2010 by Yanuar Prisantoso.
Form is an important element in a website.The recent developments in web 2.0 scenario and the growing quantity of web apps has even make it more important. The most important point in building a form is the usability fact. Form should be easy to understand so that visitors can enter values into the form correctly without getting confused.
In this article we will explain the various techniques, tutorials, examples relating to the modern trends in building web forms to enhance the user experience.
Form Validation Techniques
when users enter values into the form, as the owner of the site must ensure that the value in accordance with the insert is expected, provide information on visitors to the validation before they are sent to the owner of the site
1. Live Validation
Live Validation is a small open source JavaScript library built for giving users real-time validation information as they fill out forms.
2. fValidator
fValidator is an open source (free) unobtrusive JavaScript tool for easy handling form validation.
3. Validation With Prototype
The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.
4. Ajax form validation
This is Ajax form Validation, you can learning how to use AJAX to process and validate your forms.
5. jQuery inline form validation
6. sForm – Ajax Form Validation
This validation form is a real-time feedback to users, when they fill out the form, they will know what happened to see the color will appear. Fields that have not been properly will appear red and after validation is going to be green. This will facilitate the user when filling out the form
AJAX/CSS Forms Tutorials
7. How to make a password strength meter for your registration form
This tutorial will teach you how to make a password strength meter
8. AJAX Form POST/GET
With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX JavaScript either displays the answer (page) or does some action depending on the answer
9. Style Web Forms Using CSS
In this article you will look at step by step how you can use CSS to create attractive and usable forms.
10. Styling File Inputs With CSS And The Dom
This tutorial will explain stylish file upload inputs via clever use of js and css. This is great tutorial form Shaun Inman.
11. Degradable Ajax Form Validation
If you’ve ever confronted the task of validating data in a form, you know about choice. Whether it’s choosing between client side or server-side scripts, or the amount of information a user should see on the screen, the results should always give the user quick and meaningful feedback, while providing a solution for when things go wrong.
12. Fancy Contact Form
In this tutorial you will learn to make an AJAX contact form which leverages modern web development techniques. You will using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin, which will style all the input fields and buttons of the form.
AJAX CSS Form Online Builder
13. Form Assembly
This is A CSS Stylesheet Collection for Web Forms
14. Web Form Factory
Web Form Factory is an open source web form generator . They will automatically generates the necessary backend code to tie your form to a database.
15. JotForm
JotForm is the First Web Based WYSIWYG Form Builder. Create and publish web forms using your browser. Its drag and drop user interface makes form building doable for anybody that wants to do it
16. Wufoo
Wufoo is HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.
17. FormLogix
FormLogix is an online form builder tool for creating web databases and web forms. FormLogix is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as: Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM
18. Phpform
Phpform is free form builder . You can create online forms quickly and there are many color options available form
19. Formspring
FormSpring’s is easy form builder that make companies and organizations an easy to create some form online to begin the integration with the web site and data collection
20. Icebrrg
Icebrrg can easily create any kind of online forms for websites and blogs – no programming skills or special skills needed.
AJAX CSS Form Best Examples
21. Masked Input Plugin
22. prettyForms
23. Ajax Contact Form with YUI
24. Ajax Chained Select – demo
25. Instant Edit
26. Anchor Layout with Forms
27. Uploadform
28. Textarea
29. CSS-based Form Template
30. Uniform
Feel free to share your tips and techniques using comments section.
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
50 Hot New Tutorials (Part1)
Posted on 09. Mar, 2010 by Tony.
Tutorials can often be your greatest source of inspiration when trying to design that project you have been putting off. In this post, I have rounded up a collection of very useful tutorials from around the web from the month of February. You’ll find everything from a stunning retro futuristic typography, to designing a brilliant [...]Article source: Designrfix
Continue Reading
Top 6 Mistakes that Newbie Designers and Online Entrepreneurs Make
Posted on 08. Mar, 2010 by Mathew.
It’s not uncommon to hear stories of large-scale online business failures. From major companies – anyone remember Webvan? – to small design firms and marketing agencies, failure is a part of doing business. With the low costs of starting and operating a business online, many businesses that would fail under other circumstances end up getting started. Sometimes they grow into leading enterprises, but more often than not, they don’t.
We’ve identified the six most common mistakes that newbie designers, entrepreneurs, and online businesspeople make when they start their own online businesses. If you’re just starting out online yourself, use this article as a template of what not to do in your business. The best business lessons are often learned from other people’s failures, and these six should give you a good foundation for creating a long-term online business.
1. Expanding Too Fast.
You started a business, saw a relatively large amount of success, and thought that the bigger you grew, the bigger the money would get. Unfortunately, the infinite growth model rarely works for online businesses, particularly service businesses which require a lot of manual upkeep and client-based attention.
Whenever your business has the potential to expand, think through the situation as a whole. Boosting your client count or product’s reach could bring in new income, but it could also create new expenses and a lot of new headaches. Business success is about weighing the ups and downs – sometimes expansion brings in more of one than the other. Plan accordingly.
2. Overestimating Their Influence.
Control is an important factor in business. Meetings tend to move according to the most influential person – the guiding presence in the meeting and the most important factor in negotiation. As a new entrepreneur it’s easy to overestimate your influence amongst clients, business partners, and potential collaborators.
It’s not so much ego as it is a misunderstanding. Business requires a certain degree of pushiness, but too much ends up poisoning negotiations and potentially alienating clients and customers. Whenever you’re reaching out to another businessperson, client, or prospective customer, treat them like a guest and remember that you’re asking them for something, not the other way around.
3. Taking on Too Much Work at Once.
This error is most common amongst designers, but results-based business of all forms are susceptible to it. In an effort to boost revenue and increase per-client profits, many service businesses simply bite off more than they can chew. Employees are pushed to the limit, deadlines are stretched, and many clients end up unhappy.
It’s hard to suggest anything other than this behaviour, as risk like this is important for a successful company. However, whenever possible it’s best to be in control of your risk. Rather than giving hundreds of clients or customers second-class treatment, aim for top-level treatment with a smaller sample of people. Position yourself as a premium provider and you’ll end up with a more fluid, controllable, and well-rounded business.
4. Pricing Themselves Too Low, or Too High.
Charge people too much and you’ll fail to gain clients. Charge too little and you’ll end up overwhelmed with low-paying work and unable to cope with the quantity. Setting prices as a service business is a balancing act, and it’s one that can take quite a lot of time to adjust to. Whenever possible, look at your business as a premium product. Price yourself above competitors to ensure that your work is profitable and worthwhile, but don’t price yourself in a range where you’re unable to gain valuable client referrals and long-term projects.
5. Ignoring Professionalism.
Online businesses are great in that they allow entrepreneurs to work from their living rooms, and limiting in that they insulate people from the corporate world. As a designer, service provider, or B2B business, you’re bound to work with some major companies and multinational corporations. Pitching, contacting, and keeping in touch with clients requires a fine touch, and a level of professionalism that’s often lacking amongst online businesses.
Invest in what’s required to get your foot in the door. If that’s nice clothes for a business meeting, it could be worth it. If it’s a customer and client support employee for providing the impression of a big company, take it. If there’s a way for you to appear more professional and experienced, do almost anything possible to achieve it.
6. Worrying Too Much.
Let’s face it, as a newbie designer or businessperson, the natural reaction is to respond to things with caution and temperance. Sometimes business opportunities come in, and rather than reacting to them with potential planning and long-term thinking, newbie designers think that all which could go wrong because of them.
This type of thinking is good for running a low-risk business, but ineffective for running an ultra-successful business. Risk is a very important part of business, and letting it control your thinking leaves you stuck at a standstill. Sometimes it’s best to apologize for mistakes – whether to clients, customers, or business partners – than to beg for the opportunity to do something.
Related posts:
- From 1 Client to 20: Expanding Your Online Service Business Online freelancers and entrepreneurs have a valuable business asset that...
- How to set up an Online Business Staring a business specially an Online Business is not a...
- 5 Ways to Minimize Project Proposals, Cut Down Management, and Focus on Freelance Work Working online can be great for generating income without high...
Related posts brought to you by Yet Another Related Posts Plugin.
Article source: Reencoded
Continue Reading
21 Resources Especially for Lovers of Minimalism
Posted on 08. Mar, 2010 by Vandelay Website Design.
Minimalism a popular style of design because it keeps things simple and user-friendly. In this post we’ll look at more than 20 websites, blogs and books dedicated to minimalism. Not all of them are related to web design – minimalism can also be applied to other aspects of business and life.
Minimal Design Showcases:
If you want to find great and inspiring examples of minimalist design, these sites will be excellent sources.
Simple Desktops
Simple Desktops is a collection of desktop wallpapers curated by Tom Watson designed to make your computer beautiful without distraction.
Blogs:
The blogs all focus on publishing content related to minimalism.
Books and eBooks:
If you want to read about minimalism in design, business, or every day life, check out these books.
The Simple Guide to a Minimalist Life
The Power of Less: The Fine Art of Limiting Yourself to the Essentials in Business and in Life
For more inspiration from minimalist design please see:
- 25 Beautifully Minimalistic Website Designs
- 25 Beautifully Minimalistic Website Designs – Part 2
- 25 Beautiful Minimalistic Website Designs – Part 3
- 25 Beautiful Minimalistic Website Designs – Part 4
- 25 Beautifully Minimalist Website Design – Part 5
- 35 Beautiful Minimal Websites – Part 6
- 40 Beautiful Minimalist Websites – Part 7
Article source: Vandelay Design Blog
Continue Reading
How to Create a Fancy Image Gallery with CSS3
Posted on 08. Mar, 2010 by Teylor Feliz.
Even though CSS3 is still in the development stages, it is the new craze that many web developers are excited about. CSS3 is something that will take web development into newer and greater heights, while modernizing the web and allowing web designers and developers to make their creativity a reality. CSS3 allows for web techniques such as: text shadows, rounded borders, animations, custom web fonts, and much more. Recently, while talking with colleagues about CSS3 animations, many of them agreed how CSS3 animation is going to replace most of the JavaScript animation once it is supported by all the browsers. However, that is the downside currently to CSS3, because right now the only browsers that support it are Safari and Chrome, even though Opera 10.50 is going to support it soon. Today, I have prepared a tutorial about how to use CSS3 to make an image gallery with animation. I recommend to use one of these browsers to see the animations; however, the gallery is going to be usable in browsers without support of the animation.
HTML Structure
First of all, we will create an HTML file with the structure below, which is a div tag with gallery as ID that has an unordered list with each item containing two images. The first image is the thumbnail with the class name “mini” and the second one is the image to display when with the mouseover action with the class name “pic”.
<div id="gallery"> <ul> <li> <img src="images/imagen1_small.jpg" class="mini" /> <img src="images/imagen1.jpg" class="pic" /> </li> <li> <img src="images/imagen2_small.jpg" class="mini" /> <img src="images/imagen2.jpg" class="pic" /> </li> <li> <img src="images/imagen3_small.jpg" class="mini" /> <img src="images/imagen3.jpg" class="pic" /> </li> <li> <img src="images/imagen4_small.jpg" class="mini" /> <img src="images/imagen4.jpg" class="pic" /> </li> <li> <img src="images/imagen5_small.jpg" class="mini" /> <img src="images/imagen5.jpg" class="pic" /> </li> <li> <img src="images/imagen6_small.jpg" class="mini" /> <img src="images/imagen6.jpg" class="pic" /> </li> <li> <img src="images/imagen7_small.jpg" class="mini" /> <img src="images/imagen7.jpg" class="pic" /> </li> <li> <img src="images/imagen8_small.jpg" class="mini" /> <img src="images/imagen8.jpg" class="pic" /> </li> <li> <img src="images/imagen9_small.jpg" class="mini" /> <img src="images/imagen9.jpg" class="pic" /> </li> <li> <img src="images/imagen10_small.jpg" class="mini" /> <img src="images/imagen10.jpg" class="pic" /> </li> <li> <img src="images/imagen11_small.jpg" class="mini" /> <img src="images/imagen11.jpg" class="pic" /> </li> <li> <img src="images/imagen12_small.jpg" class="mini" /> <img src="images/imagen12.jpg" class="pic" /> </li> </ul> </div>
Styling with CSS
The second step is styling the div tag that is going to contain the gallery. The property used from CSS3 is box-shadow.
#gallery { border: 10px solid #1D0C16; height: 300px; width: 800px; margin-left: auto; margin-right: auto; overflow: visible; background: #272229; /*box shadow effect in Safari and Chrome*/ -webkit-box-shadow: #272229 10px 10px 20px; /*box shadow effect in Firefox*/ -moz-box-shadow: #272229 10px 10px 20px; /*box shadow effect in IE*/ filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10); /*box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/ box-shadow: #272229 10px 10px 20px; }
This margin given to the unordered list sets the position in the center of the div.
#gallery ul{ /* This position the ul content in the middle of the gallery*/ margin-left:-30px; }
Now to each item of the unorded list we eliminate the list style and give a padding of 10 pixels for better appearance and display inline-table to fix the position of the image to display with the mouseover.
#gallery ul li { /* In order to create the proper effect with hover we should use display inline-table This will display the big picture right next to its thumbnail */ list-style:none; display:inline-table; padding:10px; }
Here is where we create animation with the CSS property transition which is part of the CSS3. The properties from CSS3 used are transition and box-shadow.
/* This is the pic to display when the hover action occur over the li that contains the thumbnail */ #gallery ul li .pic{ /* Animation with transition in Safari and Chrome */ -webkit-transition: all 0.6s ease-in-out; /* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.6s ease-in-out; /* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.6s ease-in-out; /* The the opacity to 0 to create the fadeOut effect*/ opacity:0; visibility:hidden; position:absolute; margin-top:10px; margin-left:-20px; border:1px solid black; /*shadow box effect in Safari and Chrome*/ -webkit-box-shadow:#272229 2px 2px 10px; /*shadow box effect in Firefox*/ -moz-box-shadow:#272229 2px 2px 10px; /*shadow box effect in IE*/ filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5); /*shadow box effect in Browsers that support it, Opera 10.5 pre-alpha release*/ box-shadow:#272229 2px 2px 10px; }
Adding the pointer cursor to the thumbnail at the mouseover action.
#gallery ul li .mini:hover{ cursor:pointer; }
To finish we create the effect of the animated gallery, modifying the opacity and height of the image gradually with the mouseover action.
/* This create the desired effect of showing the image when we mouseover the thumbnail*/ #gallery ul li:hover .pic { /* width and height is how much the picture is going to growth with the effect */ width:200px; height:200px; opacity:1; visibility:visible; float:right; }
Article source: Admix Web
Continue Reading
Collection of 30+ Stunning Hand Picked CSS-based Layouts
Posted on 06. Mar, 2010 by Siva Kumar.
Power of “CSS” is to Change the appearance of hundreds of Web pages by changing just one file and CSS represent an enormous step forward for the Web.And it’s mostly used to improvise the presentation (that is, the look and formatting) of a document written in a markup language.It has structure and rules to follow.
Seven main advantages for using CSS are
- Flexibility (In content submission and a web page that is well structured, allows for flexibility ) .
- Rendering (For browser).
- Accessibility (Build accessible websites./blogs)
- Separate the content from presentation (Publication of content).
- Consistency (Instead of inheritance and cascading, a global style sheet can be used to give effect and style elements site-wide).
- Bandwidth ( Cache matters).
- Page formatting (Ability to change).
- If you want to be a CSS master you have to follow some more principles and tricks.
Here we are presenting the showcase of “Stunning CSS websites” By CSS masters.
1. Davidjonsson
In their caption of the website itself they have declared creative intelligent design and they used creative images for their pages. Website about a freelance graphic designer,he love to design logos and illustrations.
2. Delibarapp
Delibar is a full featured client for Pinboard and delicious
3. Digitalmash
A mash of work from Australian designer
4. Sketchen
Elegant yellow design.Web development agency
5. Madebytinder
Simply beautiful design
in seven colors
6. Osvaldas
Just another freelancer’s website.Used some AJAX techniques
7. webdesigncompetition
8. coocoocore
Designer website.It’s Pretty cool and creative design one page website.
9. Atebits
Mobile software website.Color sense is very good in this theme
.
10. Weloveicons
We Love Icons is a project by designers Dan Wiersema and Nando Albuquerque. They started they Love Icons because, well… we love icons!
11. Alkhnsaa-world
Design by mimcomp.com.
12. Atombicycles
Atom Bicycles Ltd. is the creation of Joel, a passionate cyclist. It all started over 20 years ago, when Joel and his friends decided to try what was then a new sport: mountain biking. Customizable design.
13. Designadept
Standards compliant web design.
.
14. Alexswanson
Interactive media and web designer “Design’s portfolio”.Clean layout.
15. Fresh-canned
Jar Design is an XHTML/CSS website custom designed and built for Vermont-based logo, print, and packaging designer Lis Gerber.
16. Musicthoughts
17. Cromulent Design
A fun, unique website that allows visitors to choose a different layout based on their mood while displaying their work for potential clients.
18. Ignatynikulin
Ignaty Nikulin, European web designer and developer, Focus on designing high quality and custom created web solutions for inspiring projects.
19. Designdisease
Design Disease provides cost-effective Web design services focused on usability, accessibility and Web standards.
20. Arbel-designs
A beautiful portfolio website by
Idan Arbel.
21. Guerra-creativa
22. Nineteen-eighty-four
An online personal portfolio website of a Graphic designer having outstanding layout and theme.
23. Pixel-Blog
The Pixel – Award Winning Creative Design Agency.
24. Robocatapps
25. Workawesome
WorkAwesome is a resource for the worker. It’s a blog for people who want to be awesome at work. It’s also a blog for people who want to find work, or simply quit work.
26. Ormanclark
27. Desigui
Desigui is an interface design studio that creates unique, well designed and optimized interfaces web applications.
28. Eyebridge
A vibrant web design from India.
.
29. Nineflavors
30. Thecolorcure
Creative team based in the Philippines. specialize in web, identity and print design.
31. Joy project
32. Beautiful2
Beautiful 2.0 is proud to showcase the best Web Design, CSS and Flash artistry for all to view and admire.
33. Cookmateapp
34. Upstruct (Design studio)
35. Yodaa
Yodaa is a San Jose based Web Design Agency that images brands through it’s creativity and simplicity.
Article source: Graphic and Web Design Blog -Resources And Tutorials
Continue Reading
#grid
Posted on 05. Mar, 2010 by Alex.
#grid. A little tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.Article source: CSS Beauty News Feed
Continue Reading
Business Layout #8
Posted on 04. Mar, 2010 by Richard Carpenter.
Hello everybody welcome to another tutorial. In today’s tutorial I’ll be showing you how to make a business layout, the layout will feature a dark theme with hints of red and white. Lets get started.
The Finished Layout
Once you’ve finished the tutorial you should have something like this. Click the image below for full view.
Getting Started
Create a new document size 1200 x 1200 pixels with any color background. Set your foreground color #505050 and background color to #2d2d2d then select the gradient tool. Once the gradient tool is selected change the gradient type to radial.
Drag out the radial gradient roughly just above the middle of the canvas. The radial gradient should be fairly big in size so drag it out long.
Next, select the rectangular marquee tool or the rectangle tool and drag out a rectangle at the top of your canvas about 300 pixels in height. Fill your rectangle with any color.
Label your rectangle layer “header” then add the following layer styles.
You should have something like this.
Creating The Top Bar
Select the pen tool then at the very top of the canvas make an object like the image below.
Once you’ve created the points for your top bar fill it with the color back, you should have something like this.
Complete your top bar by adding the following layer styles.
On the top bar where it gets thicker, add a the word contact with a small white triangle. The triangle can be made using the polygonal lasso tool.
Creating The Navigation And Header
Using the rounded rectangle tool with a radius of 10 pixels, drag out a small button sized rectangle big enough for a navigation link.
Fill the rectangle with any color then merge the layer with your top bar, you should have something like this.
Add your navigation links underneath your top bar using the rounded rectangle as your hover state for one of your links.
Underneath your navigation add your website title and slogan, the font i’ve chosen for my website title and slogan is called “quicksand”. I’ve chosen a red color for my first two letters then a dark gray for the rest.
Creating The Service Box
Before creating the service box, directly underneath the header create two vertical 1 pixel lines, one colored black and one colored white. Once you’ve created the lines set the layers opacity to 40%.
Select the rounded rectangle tool then drag out a rectangle about 250 pixels in height underneath your website title.
Once your happy with your rectangle, add the following layer styles.
You should have something like this.
For this next part you will need some icons, preferably in red. I’ve chosen to use the ruby extended icon pack from dryicons.com.
Use 3 of your desired icons for your service box area, next to each icon add a heading with some dummy text.
In between each heading, icon and paragraph add two 1 pixel vertical lines on next to each other, color one line black and the other one in white. Finally set the blend mode to “Soft Light”.
Finally underneath each paragraph create a small red button using the rounded rectangle tool. Your service box should now look like this.
Creating The Sidebar
On a new layer underneath your service box create two 1 pixel vertical lines next to each other, color one black and one white. Set the layers blend mode to “Soft Light” then move the lines directly level with the last one on the service box.
Select the rectangular marquee tool then make a selection directly next to the sidebar line, make sure the line itself is not included in the selection. The selection doesn’t have to be really wide, just about as wide as you expect a sidebar to me.
Select the gradient tool with a linear gradient, the gradient should be set to black to transparent. Drag the black to transparent over the selection starting from the sidebar lines. Finally set the opacity to 15% you should have something like this.
Add a layer mask to the sidebar line and the black gradient you just added then drag a linear gradient from the bottom of the elements upwards. The look your try to achieve looks something like this.
On the right side of the sidebar line, inside the black gradient part add your sidebar items. I’ve opted for a latest news section, I’ve used one of the icons from the dryicons icon pack next to the header, then I’ve added some dummy news articles separating each one with a simple black line.
Creating The Content Area
Using one of the home icons from the dryicons icon pack, drag it under the left side of the service box. Next to the icon add your welcome heading with a couple of paragraphs of dummy text to follow after.
Select the rectangular marquee tool, underneath your main content paragraph create a rectangle.
Fill your rectangle with the color #1e1e1e then add the following layer styles.
Finally add an example image inside the rectangle leaving a gap of around 10 pixels all the way around the image.
Creating The Footer
Select the rectangular marquee tool then make a selection around the remaining half of your canvas. Fill the selection in the color #1e1e1e then add the following layer styles.
Inside your footer area add your dynamic footer dummy content. I’ve gone for a newsletter subscription form and some social networking text.
That’s it all done.
Congratulations
Thank You for taking this tutorial, hope you found it helpful. Don’t forget to Digg and Re-Tweet this tutorial – Thanks for all your support, il look forward to your comments.
Article source: hv-designs
Continue Reading
jQuery Resources for One-Page Portfolios
Posted on 04. Mar, 2010 by Vandelay Website Design.
A few weeks ago we published a showcase of one-page portfolios and pointed out some trends among them. Many of those sites are using jQuery to accomplish specific things. In this post we’ll feature some plugins and tutorials that are ideal for one-page portfolios. Of course, they can be used on other types of sites as well, but they are well-suited to match up with the trends among one-page portfolios.
Contact Forms:
All portfolio sites need to allow visitors to contact the designer, whether it is through an email address or a contact form. One-page sites face the challenge of including a usable contact form without using a separate page for it. These two resources can help for creating contact forms that will not take up too much space on the page.
Using Form Labels as Text Fields
CSS Globe provides a tutorial that is ideal for contact forms in limited spaces, which is often the case with one-page portfolios. The script can also be downloaded for use in your own work.
Creating a Slide-In jQuery Contact Form
Concealing a contact form can be very useful in situations where the page would otherwise be cluttered with a more traditional contact form. Design Shack shows us how to create a form that will slide in when clicked.
Navigation:
Although one-page portfolios keep everything on a single page, the size of that page usually requires some type of navigation that will make it easier for visitors to get from one section of the page to another.
Create a Hovering Scroll to Top Button with jQuery
Because one-page sites tend to be rather long, it’s helpful to have a link to allow visitors to easily return to the top of the page. Cherrysave has a tutorial that shows how to create a button that will hover as the user scrolls.
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
This tutorial shows how you can create a navigation menu that will be almost hidden before sliding out, which can save some space on crowded pages.
Scrolling:
JavaScript is often combined with the navigation on one-page sites to create a smooth scrolling effect. Here are a few resources.
Smooth Page Scrolling
Chris Coyier shows an easy way to accomplish smooth scrolling.
Lightbox:
One-page portfolios often use thumbnails to showcase their work, with larger images being shown when clicked. LightBox scripts are frequently used to give these images a nice look and to make it more usable for visitors. Here are a few options.
Shadowbox (JavaScript, but not jQuery)
Sliders and Galleries:
jQuery sliders and galleries can also be used to showcase your work without taking up a lot of space. They can give the portfolio an attractive and impressive look, and there are a number of scripts and tutorials available.
Create a Slick and Accessible Slideshow Using jQuery
In this tutorial Jacob Gube shows how to create a slideshow that could be used for showcasing your work on a one-page portfolio.
Fancy Thumbnail Hover Effect with jQuery
Soh Tanaka has written a tutorial that demonstrates a thumbnail gallery that could also be used to showcase your work with limited space available.
Create a Beautiful jQuery Slider Tutorial
This tutorial demonstrates an attractive slider to showcase your work.
How to Create a Fancy Image Gallery with jQuery
Hear you will learn how to create a simple image gallery that displays full size images when the user hovers over a thumbnail.
Coda Slider Effect
This popular tutorial shows how to replicate the slider used by Coda.
Easy Slider
This is a plugin from CSS Globe that can be used for showcasing your work.
For more resources please see:
- 15 Resources for Easily Creating Web Forms
- 35 Useful Scripts for Tooltips
- 21 Resources for Getting Design Feedback
- 60+ Helpful Resources for Portfolio Design
- 75 PSD to HTML Resources for Web Designers
Article source: Vandelay Design Blog
Continue Reading
Web Design: 40 Fantastic Examples
Posted on 03. Mar, 2010 by Tony.
In many of my previous posts on website design I have always categorized the style of websites that I was showcasing. In this post, I have decided to compile some of the most visually appealing websites from all sorts of different design styles that are out there today. From retro inspired designs to the very creative. So if you [...]Article source: Designrfix
Continue Reading
ssupak on 
