The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web We have set out to create the most beautiful, elegant and complete icon font on the web…for free! We have been struggling to find the best icon font to use in our own projects, so we decided to create our own instead. This font will be used in our themes, and we will continue to update the collection to satisfy the needs our designs. Unlike traditional graphics, these icons are housed within a font file, which means they are vector based and can expand and contract without quality degradation. Download The Icons Why Icon Fonts Are Awesome Icon fonts are great because they are flexible and fast loading. Complete Set and Unicode Reference Guide Complete List Of Class Names By Nick Roach I am the founder and CEO here at Elegant Themes.
Make Your Mockup in Markup We aren’t designing copies of web pages, we’re designing web pages. Andy Clarke, via Quotes on Design The old way I used to think the best place to design a website was in an image editor. Does this process sound familiar? That process is whack, yo! Recently, thanks in large part to the influence of design hero Dan Cederholm, I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser. Die Photoshop, die Some of you may be wondering, “what’s so bad about using Photoshop for the bulk of my design?” The application Adobe Photoshop CS4 has unexpectedly ruined your day. Photoshop’s propensity to crash at crucial moments is a running joke in the industry, as is its barely usable interface. Text rendered in Photoshop (left) versus Safari (right). Crashing and text rendering issues suck, but we’ve learned to live with them. A necessary evil? Get started by getting naked Content precedes design. In the beginning, don’t even think about style. RGBA? Yikes!
10 Websites With Creative Moving Elements Designers spend countless hours making careful color, typography, and layout choices, but despite those worthy efforts, nothing draws the eye as powerfully and dependably as motion. Proven evolutionary and behavioral psychology demonstrates our instinctual draw to visible elements that move and change. Despite vast technological advances, the human mind still works as it always has — with a visual penchant for dynamism and motion. With this reliable principle in mind, why shouldn’t we add some animation to our web design and Internet marketing efforts? Adding animation to your design is a great way to make it stand apart and command attention. Blue Acorn Clean web design is perfect platform for adding animation, no matter how big or small the animation is. Universeries If you want to add animation to your web design, make sure that it serves a clear purpose and isn’t just there as a superficial addition. Flip-Universum Quechua Blacknegative Denise Chandler Kikk Festival Metal Junk Wondros
Choosing the Right Font: A Guide to Typography and UX - Anyone who took Graphic Design 101 knows that serifs help readability and black is the best color for text. But, wait! We also know that type for the web is different from type for print. A lot of design experts insist that sans serif, grey text is easiest to read—and much more beautiful, too. And then there’s mobile to consider. The purpose of any text on your website or app is to help your users accomplish their goals. Unfortunately, there are a lot of conflicting opinions out there about typography for web and mobile, and there isn’t one strict set of rules that apply in every case. But there are several things you can do to make sure the fonts you choose for your website or app are working with you and your users, not against you. While every designer should strive to create something beautiful and remarkable to look at, don’t forget the main goal of your text. Size and line length The size and layout of your text can make a huge impact on the experience of reading something online.
Open Iconic, a free and open icon set Displaying Open Iconic's SVGs are a snap. Just treat them like your typical image and away you go! Pro tip: Don't forget the alt attribute. SVG Sprite Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag. <head> ... Sizing icons only needs basic CSS. Coloring icons is even easier. Font Icon fonts are a great fallback for SVG—and our font is pretty great. Head Body Bootstrap Font Use Bootstrap? Foundation Font Iconic also works for Foundation and functions just like Foundation's icon font.
Créer un site responsive - La maquette | Thibaut Soufflet - webdesigner [Total : 3 Moyenne : 5/5] Vous souhaitez réaliser un site responsive ? Que ce soit pour un projet en code html/css pur ou bien pour créer un thème sur mesure pour WordPress, Joomla, Drupal ou autres… C’est ici que ça se passe. Pour cette première étape de la création d’un site responsive « from scratch » (depuis zéro), nous allons commencer par l’étape de la création des maquettes graphique. C’est l’essence même de la qualité du résultat final, donc autant faire les choses proprement et ne pas se compliquer la vie. A savoir : Les sites actuels ont un « standard » de 960 pixels de large, même si avec l’évolution des tailles d’écran, la tendance va s’étirer petit à petit vers du 1200 pixels. Aller cette fois on attaque le gros du morceau : Qui dit responsive, dit grille. Ou trouver cette grille ? La grille se trouve sur le site 960 Grid System. > Cliquez sur le gros bouton de téléchargement (on ne peut pas le louper). > Ouvrez le ZIP, puis cliquez sur le dossier « Templates »
The ultimate guide to email design While a lot of online communication has moved to social media, email is still a very important part of any online marketing campaign. And when we think of marketing emails, what generally comes to mind is HTML email, rather than plain text. Designing for email is much like designing a simple webpage, but there are some key differences you need to take into consideration. You also need to keep in mind that email is a push, rather than pull, communication. People often get emails at an overwhelming rate, and not always when it’s convenient for them to look at them. But as long as you keep that in mind—that you have only an instant to catch your reader’s attention—you’ll have a much easier and smoother experience in designing effective emails. Mobile or bust After all, if the email doesn’t look right when they check it on their phone, what are the chances your subscribers are going to look at it again when back at their desk? There are two ways to go about designing for mobile. Newsletters Ink
Prototyper vos applications : la méthode en 5 étapes Dans ces quelques lignes je vais vous exposer ma méthode de travail de designer pour prototyper mes applications. J’espère vous fournir certaines clefs pour bien mener et réussir vos applications tant d’un point de vue ergonomique que graphique. Le maître mot lors de la création d’une app qu’elle soit mobile ou tablette, est la cohérence. - Cohérence dans l’arborescence de votre projet, vos différentes pages de contenu doivent être organisées de façon logique. Pour assurer cette cohérence globale il faut éviter de commencer à travailler avant d’avoir en main tout les éléments et informations concernant le projet. Note : tout au long de cet article je m’appuierai sur mon récent projet de refonte graphique de l’application Collecto pour Windows Phone, développée par David Catuhe. 1.L’arborescence. Ces premier grands ensembles de contenu définissent vos rubriques. Arborescence partielle de l’application Collecto. 2.Le mockup Mockups de deux écrans de l’application Collecto 3.La charte graphique
20 Mobile User Interface Design for Your Inspiration Designers of mobile interfaces are becoming more prominent in today’s faced-paced web space. While mobile-optimized sites may lighten the burden on a site developer, some prefer building a full featured app instead. App designers and developers are in high demand now particularly in user interface. Today I’d like to show you some mockups, sketches, buttons, tables, splash screens, and many more examples of iPhone app (UI) designs for your inspiration. Recommended Reading: Design Killer Mobile App Websites: Tips And Examples
Ma première application Android avec Cordova Having previously written a tutorial to demonstrate the ease of creating an application Firefox OSArticle on Firefox OS with web technologies, I'll do the same for Android. To allow this technical prowess (an Android without Java application), we will use the application open source Cordova. In this article, we'll port my app to web failure on the Google Play Store . If you are interested in web development on Android, you have heard from PhoneGap. The idea is simple: compile a shell using a module "webview" charging our application. PhoneGap still exists and can be used via an offer "cloud" to generate its applications for Android and iOS, Windows Phone, BlackBerry... For information, it also allows to compile to desktop platforms: Windows 8 and Ubuntu. The address: Developing GNU/Linux, I'll give the instructions for installation on Ubuntu. Cordova requires Node.js to be installed, so let's start with this. In a terminal: This allows to install the famous Cordova:
gulp-cordova-build-android Build the cordova project for the Android platform. Build the cordova project for the Android platform. Installation npm install --save-dev gulp-cordova-build-android Usage const gulp = require'gulp'; const create = require'gulp-cordova-create'; const plugin = require'gulp-cordova-plugin'; const android = require'gulp-cordova-build-android'; gulptask'build' => return gulpsrc'dist' pipecreate pipeplugin'org.apache.cordova.dialogs' pipeplugin'org.apache.cordova.camera' pipeandroid pipegulpdest'apk'; This plugin will build the cordova project for the Android platform. Because the plugin returns the apk files, you can pipe it to gulp.dest. Build a release apk By setting release to true, the plugin will build a release version of the APK. pipeandroidrelease: true Sign the apk To produce a signed apk you need to pass signing options to the plugin. pipeandroidstoreFile: '/Path/to/key.keystore' keyAlias: 'my_alias' When running the build task, it will now ask for the key store password and for the key password.