1stwebdesigner |
- 40 Fresh and Colorful Patterns to Spice Up Your Designs: 2012 Edition
- 40 Beautifully Designed Mobile Apps With Excellent UI Experience in Mind
- How to Create an Infinite Scrolling Gallery in 10 Minutes
- 25 Sets Of Clean Icons For Perfect Minimal Web Design
| 40 Fresh and Colorful Patterns to Spice Up Your Designs: 2012 Edition Posted: 13 Jun 2012 06:00 AM PDT Patterns are everywhere around us. In art, patterns are an important medium of expression. Is a pattern worth more than a thousand words? We can leave that discussion for later, but it’s certain that patterns do liven up everything they’re applied to. Patterns can be used for nearly everything from website backgrounds to your phone case, for example. For this roundup we’ve prepared 40 fresh, colorful and jovial patterns from this year that’ll conjure up the mood of summer. 1. 25 Seamless Pixel Patterns for Photoshop
25 incredibly versatile, easy to use patterns that make a brilliant addition to a plain background. 2. Morning Coffee Pattern
A retro and coffee-flavored pattern in vector and Photoshop (.pat) format. 3. 11 Light Subtle Patterns
A super-handy set of subtle patterns – great for giving backgrounds a little edge. The download includes the .pat file along with jpgs for quick and dirty use. 4. Geometric Patterns
A set of Subtle Seamless Geometric Pattern for you to download for free in .PNG and .PAT file format. 5. Jeans Pattern
Simple, easy to use jeans pattern (.pat). 6. Dark Wall
Simple dark wall pattern from SutblePatterns. 7. Escheresque
Cubes as far as your eyes can see. You know, because they tile. 8. Plaid Pastel
Free seamless pattern with a tartan look. 9. Playing Cards Symbols Pattern
Attractive playing card pattern (.gif and .pat). 10. Plaid Pattern
Plaid floral pattern in honour of summer. .gif and .pat. 11. Subtle Light Tile Pattern
These subtle light texture patterns are comprised of 4 light tile patterns ideal to create a subtle and original light web background for your next project. 12. Blue Geo
Free repeat pattern with a blue geometric theme. 13. Leaf Curls
Seamless leaf curl pattern. You can modify the colors, scaling and design. 14. Daisy Chain
Seamless flower pattern. You can modify the colors, scaling and design. 15. Sine Wave Tartan
Seamless wave tartan pattern. You can modify the colors, scaling and design. 16. Seamless Grungy Beige Patterns
6 seamless grungy beige patterns. It comes with a .pat file that you can easily generate any size pattern you want. 17. Seamless Grungy Heart And Flower Textures
8 grungy heart and flower textures that come with several colour schemes and are totally repeatable. 18. Heart Pattern
Heart pattern background is available in vector (.eps) and .jpeg format. 19. Victorian Wallpaper
Interesting pattern for various artwork since it’s a low-quality photograph. 20. Hearts and Peace
Abstract and striking. Perfect for madly creative ideas. 21. Swirls
This is intentionally created for Facebook covers but there’s no limits in using such a great pattern. 22. Diamonds
Diamonds. Pure diamonds. 23. Rose Pattern
24. Pattern
25. Black and White Floral
26. Light Green
27. Hibiscus Stripe
28. X
29. Lovesong
30. Warm Day
31. ♥
32. For xxLynxx
33. lonely as a cloud
34. jacked up rainbow
35. Damask seamless pattern
Vector damask seamless pattern (.eps). 36. Flower pattern
37. 1699
38. Flower patterns
Pack of 14 flower Photoshop patterns looks like tapesery. 39. SockHop
40. Sutra
Want more?Colourlovers
You’ll find over 2 million user-created seamless patterns to use in your creative projects here. Absolutely best resource for free patterns. print & pattern
This is a website that celebrates the world of surface pattern design. A lot of artwork is showcased here. PatternPeople
Pattern People is a surface design studio founded by designers Claudia Brown and Jessie Whipple Vickery who came together with a mutual appreciation of patterns and a shared vision. Collectively they bring their illustrations to all types of surfaces from fashion to interiors. They have a regulary updated blog which offers a lot of inspiration. What do you think of these patterns and designs? Got any that we missed? Share with us in comments! |
| 40 Beautifully Designed Mobile Apps With Excellent UI Experience in Mind Posted: 12 Jun 2012 06:00 AM PDT With so many apps being released in such a short period of time, designers need to really create apps that stand out. In this roundup we’re sharing 40 beautifuld mobile app designs with excellent UI experience in mind. Also at the end of the post you’ll find some more resources to follow top mobile app design trends. Mobile apps are even changing the way we design anything nowadays! Everybody is pushing to higher resolution with new retina displays (ipad3) and I believe whole web will get super beautiful and sleek soon enough!
But before it happens we can inspire from these high quality inspirational mobile app designs! It doesn’t matter for which platform you create design, you can transfer experience from mobile to web, from web to tablets! As you can see even print and web is not so different now! Big typography, textures, images are used everywhere! Only one big difference in my opinion is touch screens – for mobile and tablets you need to put big attention in UX, usability. Make sure buttons are easy to click, you effectively use touch controls to swipe, expand, minimize with your fingers. If you are designing mobile apps yourself I would strongly encourage to download a lot of these apps on your mobile, tablet and play with them! Even if you are just designer not developer you need to plan whole experience with your design! Ok, now off to the inspirational part – enjoy this roundup we put together for you! Which is your favorite mobile app by design and usability? Leave your feedback in comments! 1. Camera Genius
Camera Genius is a camera application that significantly increases standard functionality. It has separate focus and exposure areas, picture editing tools and effects, social network sharing features and more. Great idea to blend SLR with phone and the UI design is nice and clean. 2. Istid
Overview of the shops selling good quality ice cream. The usability and typography are great. 3. Jauntly
Mobile website of Jauntly - a simple goal setting web application. Simple design with a beautiful color scheme. 4. ChowNow Tip
Tip screen for the forthcoming ChowNow mobile ordering platform. Crisp design with a gentle touch of texture. 5. Wieden + Kennedy BlackBook
Browse employees alphabetically. Awesome contact list. 6. Nike Fuel+ App Concept
A new concept for Nike Fuel+ app. Fine contrast and vibrant colors. 7. Moodswings
Moodswings helps you add and track your daily mood through time and location. Check how people in your neighborhood are feeling and understand the reasons behind your mood swings. Good concept brought to life with a beautiful design. 8. MemoCards
MemoCards is the ultimate flashcard app for language learners. Excellent design that combines both usability and creativity. 9. Grocery List
Make shopping easier with ordered lists. 10. Quote Roller
Quote Roller for iPhone lets you access your QuoteRoller account from wherever you are. Lucid and neat web app’s transfer to mobile. 11. AirCasette
AirCassette is a unique cassette player application for iPhone and iPod Touch. Creative design but the functionality lacks a bit. 12. Meernotes
Another to-do list app yet this one really feels like a notebook in your pocket. 13. Mingle
Mingle is the new, fun way for professionals to network anywhere they are. Modern and glossy interface which might not go with the app’s goals. 14. Sudoku
The best sudoko app for iPhone. Tough game but at least you have a beautiful interface. 15. I Do Lists
I Do Lists is a list creating app. But it’s for lists of things that “I do” rather than things “to do”. It combines good graphic design with ease of use. 16. RaceSplitter
RaceSplitter is an easy-to-use, yet powerful race timer, that allows you to time a race or training session, and get splits and relative standings while out on the course. Clean interface and great functionality. 17. Billings Touch
Billings Touch is a part of a unique time tracking and invoicing solution called Billings Pro. Clean and crisp design makes it easy to keep an eye on your money and projects. 18. Ogorod Stuff
Ogorod Stuff is a great way to share pictures of your clothes, gadgets, vehicles and all the other stuff that you use everyday. I don’t see the point of this app but you got to admit that the design is neat and refined. 19. TV App
TV Show tracker app idea with glazed and pixel-perfect interface. 20. WoooBee
WoooBee is a location based service, where you can share the hottest spots in town with your friends and receive discounts. Beautiful color scheme with pixel-perfect elements, yet it looks like the functionality of the app won’t be that great. 21. Probki.tv
Blogging app for those who are unlucky enough to spend their lives in traffic jams. Clean interface with a touch of retro. 22. Arla Köket
A cooking app with trendy design and great color accents. 23. Air Dictate
An iPhone app that uses Siri’s speech to text to dictate text to your Mac. Luxurious look with a nice touch of texture. 24. iPhone Restaurant App
A restaurant app concept with a warm and cozy look. 25. Jet Lag
Suffering from jet lag? Flying between timezones may cause your biological clock to run amok making you feel tired and disoriented. Jetlag App helps combat these feelings so you can enjoy your trip and be alert all day long. Minimal design with a nice color scheme. 26. Italian Challenge
Deepen your knowledge of Italy by answering more than 1000 questions that this app offers. Attractive design with cool illustrations. 27. UN News App
The UN News Reader is a free mobile news application for quick and easy access to all stories from the UN News Centre. Perfectly aligned elements and plain design. 28. redpepper
Mobile website of an advertising agency. Bold and engaging design, a great transfer from web version. 29. Bosquet
Your new favorite Forrst app? The appealing design might help make it. 30. My Seeen
A movie app concept with clean, pixel-perfect, detailed design. 31. tmn wallet
With this service customers can purchase products in vending machines, catering spaces and custom food delivery services using just their mobile phones. Clear and bold. 32. Mountain High
The official Mountain High app for your next ski and snowboard experience. Bright and rich interface with bold accents. 33. Readability
Readability turns any web page into a clean view for reading now or later on your computer, iPhone or iPad. It’s all about simplicity and the reading experience. 34. Red Stamp
Email, text, tweet, facebook, and paper mail personalized photo cards, notes, invitations + announcements right from your iPhone, iPad 35. Snapguide
Snapguide is a simple, beautiful way to share and view step-by-step how to guides. The good looking design and usability makes creating a guide fun. 36. crouwelclock
Clock made from kick-ass typography. 37. Calvetica
A super simple calendar app using helvetica typography that looks worlds better than inbuilt. 38. robick
Robick is an audio player for listening to music deeply. change and visualize the way you listen to music. 39. eBoy FixPix
Tilt your iPhone to explore eBoy's mind-boggling art and find the right angle to solve the puzzle. Graphics by the Eboy artists. 40. SKTCH
SKTCH is a generative drawing application for the iPhone and iPod Touch. Instead of adopting traditional “brush” based drawing, SKTCH is about presets, created by a number of digital artists around the globe. In this app you’re the designer. Want more?Mobile UI Patterns
Website showcasing various mobile UI design elements. app.itize.us
app.itize.us is a painstakingly curated presentation of the best produced and designed iPhone and iPad applications available for download via the App Store. They Make Apps
Home of the finest mobile app makers. Meer.li
Meer.li is a place where exceptional mobile designers connect, show off their designs and promote themselves. Aware of some more awesome mobile apps? Share with us in the comments! |
| How to Create an Infinite Scrolling Gallery in 10 Minutes Posted: 11 Jun 2012 06:00 AM PDT Pagination is a technique used to break large data sets into small blocks in order to reduce the server load. We used to create pagination buttons with page numbers and next/previous links. Now pagination has gained a new perspective with infinite scrolling.
Are you new to infinite scrolling? Then take a quick look at the demo before we start. What is Infinite ScrollingInfinite scrolling is where you can keep scrolling and data will keep coming until all the data is displayed. In this technique, the first set of data will be displayed initially. Once you scroll to the end of the window the next page of data will be generated and so on. No pagination buttons are required and you get the data on demand. Let’s see how we can create infinite scrolling. What are we going to do?We are going to create an infinite scrolling page with images, similar to Pinterest. These are the requirements needed before we start coding.
Generating the Initial Data SetWhen the page is loaded we have to get the data from the database and display the initial result. I have stored the names of the images in a database table. I have simplified the code using basic syntax so that beginners can go through the tutorial without any problems. <!--?php $con = mysql_connect("localhost", "username", "password"); mysql_select_db("database_name"); $result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 12"); $row_object = mysql_query("Select Found_Rows() as rowcount"); $row_object = mysql_fetch_object($row_object); $actual_row_count = $row_object--->rowcount; ?> The result will be broken into pages of 12 images. So the above code generates the first 12 results from the database table. Also keep in mind that $actual_row_count variable will hold the total number of images available in the table. So lets move onto creating the initial version of our HTML document. Infinite Scroll <script type="text/javascript" src="jquery-1.7.2.js"></script></pre> <div id="more">Loading More Content</div> <pre> </pre> <div id="no-more">No More Content</div> <pre> </pre> <div id="result"></div> <pre> "; } ?> I have included jQuery and some sample CSS code to style our page at the top. In the body section you can see 2 div elements called more and no-more. These are used to show the status when we keep scrolling and position of these divs are made fixed. Next we are going to display the images inside the PHP code using the results we generated earlier. So the initial data set is displayed now and we have to create the scrolling part. Paginating Data Using ScrollingLet’s add the jQuery scrolling event to our page. jQuery provides a built-in function called scroll as shown in the code below. $(window).scroll(function () { }); Whenever you scroll to the top or bottom, the code inside this function will be executed. Identify end of the Page We are loading the next set of data, once the scroll reaches the end of the page. So first we have to identify the end of the page. Now I’ll show you a simple technique for that. if($(window).scrollTop() + $(window).height() == $(document).height()) { } jQuery scrollTop function will return the area hidden on the top of your page. $(window).height() gives the height of the browser viewport. So addition of both values will be equal to the page height, when scroll reaches the bottom. Pretty simple isn't it? Now we got the basics covered and we can move onto the full script code as shown below. <script type="text/javascript">// <![CDATA[ var page = 1; $(window).scroll(function () { $('#more').hide(); $('#no-more').hide(); if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { $('#more').css("top","400"); $('#more').show(); } if($(window).scrollTop() + $(window).height() == $(document).height()) { $('#more').hide(); $('#no-more').hide(); page++; var data = { page_num: page }; var actual_count = "<?php echo $actual_row_count; ?>"; if((page-1)* 12 > actual_count){ $('#no-more').css("top","400"); $('#no-more').show(); }else{ } } }); // ]]></script> Code Explanation
Requesting Data for Next Page We have to use an Ajax call to request the next page from server as shown below. This code should be inside the else part we left empty in the earlier code. $.ajax({ type: "POST", url: "data.php", data:data, success: function(res) { $("#result").append(res); } }); Creating Page for Data Generation We need a separate PHP file to request the Ajax request data. I have created a file called data.php to generate results as shown below. <!--?php <br ?-->$requested_page = $_POST['page_num']; $set_limit = (($requested_page - 1) * 12) . ",12"; $con = mysql_connect("localhost", "username", "password"); mysql_select_db("database_name"); $result = mysql_query("select * from scroll_images order by id asc limit $set_limit"); $html = ''; while ($row = mysql_fetch_array($result)) { $html .= "</pre> <div><img src="images/" . $row[" alt="" name="" /></div> <pre> "; } echo $html; exit; ?> We are done with creating the infinite scrolling pagination. Let’s have a look at how it is used in popular websites. Inspirational uses of Infinite Scrolling1. Google Reader Google Reader uses this technique to generate feed items. You can see a 3 colored circles at the end of the page while more data is loaded.
Facebook uses infinite scrolling to display the posts in the wall.
3. Pinterest Pins are generated on demand as you keep scrolling.
4. Twitter Twitter tweet stream is generated using the infinite scrolling technique.
We have learned how to create an infinite scrolling page and various kind of practical uses of this techniques using most popular sites in the world. Now it’s your chance to make a move and create something new with infinite scrolling. How are you going to use this technique? Feel free to share your comments. |
| 25 Sets Of Clean Icons For Perfect Minimal Web Design Posted: 10 Jun 2012 06:00 AM PDT Trends come and go, minimalism stays. Icons bring designs and interfaces alive, they engage people and help them interact. Minimal, glyph-type icons are still the most used ones around. Simplicity of them is also their advantage. In this roundup we have prepared 26 clean and minimal icon designs to brighten up your designs. All of the sets are fresh (except for one, couple of weeks till 2012, sorry), there are also some premium (really stunning) sets included. Be sure to check licenses before using any of them.
1. Premium Pixels Icon Set
The icon set contains 58 pixel-perfect icons which you are free to use in personal and commercial projects. The download includes the PSD, the CSH file for the shapes, and PNGs. 2. Pixicus Icon Set
A set of 106 pixel perfect icons by Fabio Basile (@fffabs). 3. Soft Media Icons Set Vol 2
A set of 32 icons in 32x32px with subtle and useful icons including e-commerce icons such as shopping basket, price tag, delivery box and more. 4. Glyphicons
GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation. You get 400 small PNGs for free. 5. Clean Icon Set
A set of 20 clean action icons at 32px x 32px in size and in PNG format, the original PSD is also included. Free for personal and commercial use. 6. MimiGlyphs
Hand crafted, infinitely scalable icons for user interface designers. 80 icons, 16 by 16px. Photoshop file, CSH file & PNG. Free for personal and commercial use. 7. Micro Icon Set
A set of 110 icons at 16x16px. Vector and fully scalable. A backlink is required if you use them. 8. Glyph UI Icon Set
Hand crafted set of 48 icons at 16x16px. PNG, PSD, CSH (custom vector shape). A backlink is required if you use them. 9. Minicons.
A set of 30 minimal icons at 16x16px. You can also purchase the full version with 110 icons at GraphicRiver. 10. Broccolidryiconsaniconset
A set of 108 at 32x32px. Comes as PSD. 11. Geomicons
A set of 32 icons. .EPS Licensed under Creative Commons 3.0 12. Tinycons
A free preview of 310 carefully crafted interface icons. Unfortunately the checkout process is quite time-consuming and you’ll have to leave your email at yet another website. But you can purchase the full set here which will be more useful. 13. Delicious Berries
Delicious Berries Icons is a premium icon set containing 560 vector Photoshop shapes, perfect for apps or projects of any kind. You can download a preview of 50 icons for free. 14. 350 Pixel Perfect Icons
A set of 350 pixel perfect glyphs icons, perfect for apps, websites or just about anything you can think of. You may use this icon set for both personal and commercial use, which means this resource can be used in any project without worrying about licensing. 15. Freecns
A set of 218 UI icons (16px) for free download. 16. pixiconz
A set of 285 hand drawn 12/12 pixel icons for designers, in a single PSD file. A pack of 33 icons can be downloaded for free. 17. Pixeds
Set of 209 perfect pixel icons made in16x16 for your projects in a single .psd file. The free pack includes only 20 icons but the price is just too good to not to buy the full set. 18. Jigsoar icons
A free, creative commons licensed custom designed icon set with 60 vector shapes, perfect for the web. 19. Impressionist UI
Impressionist is a kit of UI design elements. It also includes an icon set designed by Sergey Shmidt. You can find all icons in the paid version. 20. Pace Social Icon Set
24 social icons in JPG, PNG & PSD format. 21. 21. Vector Icon Set
A set of 35 crisp minimal vector icons. 22. Northwood Icons (premium – $9)
The set includes 150 icons (vector shapes) available in formats .csh and .psd. 23. Aircons (premium – $9)
241 icons glyphs in PNG and PDF – 16×16 px. A CSH to import the vector shapes to Photoshop. 24. 70+ Simple CSS3 Icons (premium – $6)
This is a very high quality icon set made that can be used anywhere and for any purpose. These icons are not limited for a particular use and hence, you can combine the techniques used here to create new icons or use these techniques in your designs in any way. 25. Metro Vector Icons (premium – $4)
This awesome set of vector icons contains 28 different elements, in the style of the Windows 7 "Metro" interface. They're bold and simple, with plenty of impact. The icons are provided as an Ai & EPS file, and are fully editable vectors. 26. Free Mini Vector App Icons
A collection of 150 pixel-perfect, mini vector icons. Each one has been optimized for display at sizes as small as 16 x 16 pixels, and they are all infinitely scalable for larger sizes. Multiple formats are included for easy customization, including PSD, EPS, AI, and the original Fireworks source file. |
| You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Niciun comentariu:
Trimiteți un comentariu