Posts Tagged ‘font’

A Showcase of Typography in Webdesign


Functional web typography is, of course, key to the usabilty of any website. But functional does not mean boring.
Big, loud and attention grabbing typography does have the presence and magnificence to truly grab the attention of your visitors.
It does not quite shout at your readers, it merely says with a slighlt harder-overtone ‘Look at ME!’.
Its effect can be impressive and memorable.

Today we have a creative and exciting collection of websites who do you use, and succesfully so, big type TO GET THEIR MESSAGE ACROSS!

Hope you find some inspiration for them.

Denise Chandler

Denise Chandler

Me In Motion

Plain and apparent typography with all the letters capitalized to catch the user’s attention.

Me In Motion

Amazeelabs

Amazeelabs

Barney Funk

A moderately sized font combined with red gives a very powerful message to your viewers.

Barney Funk

Justdot

Justdot

Glitch

Simple, clear and attractive typography.

Glitch

Bowtie Period

Bowtie Period

Takeshape

Takeshape

We Shoot Bottles

We Shoot Bottles

Ipolecat

Ipolecat

Cupcake Creative Studio

Cupcake Creative Studio

Git Tower

Git Tower

Fore Father Group

Fore Father Group

Efingo

Efingo

Marie Catribs

Marie Catribs

Stephen Caver

Stephen Caver

Rich Brown

Rich Brown

Finch

Finch

Brunet-Garcia

Brunet-Garcia

Diegolatorre

Diegolatorre

Pieoneers

Pieoneers

Thealbany

Thealbany

Wooconcept

Wooconcept

Rvlt

Rvlt

72ave

72ave

Moozedesign

Moozedesign

Tokyodigital

Tokyodigital

Weareacademy

Weareacademy

Robedwards

Robedwards

Elysium Burns

Elysium Burns

Teez

Teez

Make Photoshop Faster

Make Photoshop Faster

Bills

Bills

Visualbox

visualbox

Gapmedics

Gapmedics

Notorious Design

Notorious Design

Markboulton Design

Markboulton Design

Wordit

wordit

Polar Gold

polar gold

Yudisign

Yudisign

Fuelfuture

Fuelfuture

Sabotagepkg

Sabotagepkg

Gritti Rollo

Gritti Rollo

Cassius

Cassius

You might also like…

50 Examples of Large Photography Backgrounds within Web Design →
50 Examples of Creative 404 – Page Not Found Pages →
A Showcase of 50 Amazing Personal Blog Web Designs →
50 Creative Examples of Illustrations in Web Design →
50 Professional Web Design Agency Web Sites →
50 Bright and Vibrant Web Designs – Color Inspiration →
50 Impressive Magazine and Newspaper Styled Web Designs →
50 Inspirational and Fresh Minimally Designed Web Sites →
50 Creative and Inspirational Personal Portfolio Websites →
50 Inspiring Web Application and Service Web Site Designs →



Freebie: Colorful 3D UI Kit


We have a fantastic freebie for all of you web designers out there, you’ll love this:)
Designed by Land-of-Web, the Colorful 3D UI Kit comes in .psd format and is full of beautifully designed modern web elements covering almost all aspects of web design, including:

• Drop-Downs, Silders & Progress Bars
• Switches, Tabs, Icons, Tool-Tips and many useful Navigation Elements
• Search and Select Boxes
• Media Control Buttons and Mini Player

UI Kit Preview

Colorful 3D UI Kit

Download the UI Kit

Within the .zip file you will find all of the .psd elements from above.
Download: Colorful 3D UI Kit

Copyright

This Web UI set is free for personal and commercial use with attribution appreciated but not required. You MAY NOT re-upload or re-distribute this set on any other website, and please link directly to this page for all sharing.

Thanks

Big thank you to Nataly from Land-of-Web for designing and allowing us to release this fantastic freebie. You can also follow her on Twitter.

You might also like…

Fantastic Freebie: 3D Web UI Kit →
20 Free Web UI Element Kits and Stencils →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
10 Completely Free Wireframe and Mockup Applications →
A Collection of Useful Web Design Wireframing Resources →
40 Detailed and High Quality Mobile Phone .psd Source Files →
40 Professional and Detailed Web Layout PSD Templates →
Android App Developers GUI Kits, Icons, Fonts and Tools →
iPhone and iPad Development GUI Kits, Stencils and Icons →
Illustrator Template Toolbox for Web, Mobile and App Developers →
40 High Quality CSS and XHTML Web Layout Templates →



Weekly Design News – Resources, Tutorials and Freebies (N.117)


This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :)
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

Developing a Responsive Website: Background Images

Developing a Responsive Website: Background Images

Webfont Icons: an Alternative to Images

Webfont Icons: an Alternative to Images

How Commercial Plugin Developers Are Using The WordPress Repository

How Commercial Plugin Developers Are Using The WordPress Repository

HTML5 Reset Version 2

HTML5 Reset Version 2

The All-New CSS3 Click Chart

The All-New CSS3 Click Chart

Animated Web Banners With CSS3

Animated Web Banners With CSS3

Prevent Password Reset WordPress Plugin

Prevent Password Reset WordPress Plugin

iPhone, iPad & Browser Wireframe Templates

iPhone, iPad & Browser Wireframe Templates

Meander Free Font

Meander Free Font

Free Typeface NeoDeco

Free Typeface NeoDeco

Social Media Icons Pack

Social Media Icons Pack

Mini Cards: 15 Credit/Debit Card Icons

Mini Cards: 15 Credit/Debit Card Icons

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here are our favorite webdev resources from the past week:

Create

Create

CraftMap

CraftMap

ResponsiveSlides.js

ResponsiveSlides.js

impress.js

impress.js

Revolver.js

Revolver.js

PxLoader

PxLoader

W3Clove

W3Clove

CSSrefresh

CSSrefresh

Previous Weekly Design News…

Design News Roundup Archives →



Benefits and Pitfalls of Using Code Frameworks

Advertise here with BSA


A code framework is nothing more than a collection of pre-formatted classes and functions. There are frameworks created for practically every language out there – even including frontend web development like JavaScript and CSS. Developers would be wise to follow these trends of working on top of pre-built code.

There are reasons both for and against building on top of web frameworks. You need to spend time learning the code and adjust your website accordingly. But in the long run you’ll save a lot of frustration as many common features are already created for you! Let’s delve into these ideas a bit more and consider some of the most popular frameworks today.

Improvements for Web Developers

Building products for the web can be one of the toughest development jobs. Rules are not set as standards in the same way Windows or Mac OSX programmers follow. Web developers need to work on a server architecture, generally writing in a backend programming language such as PHP or Ruby on Rails.

PHP is by far the most recognized development language for creating dynamic websites. You can build snappy applications working with databases in a short amount of time. And the new PHP5 specs have included a whole slew of additional functionality. The benefits of working on PHP frameworks means you don’t need to start from the very beginning. It can be stressful to include a set of 3rd party libraries and build up your own system from scratch.

Happy Wintertime Snowman

But there are plenty of alternative PHP libraries which each focus on a different set of functions. Some may help you setup a simple blog, backend CMS, social network, or a handful of other common templates. And when you build upon open-source frameworks you’ve actually got a whole community of developers behind you for support.

Model-View-Controller

The MVC hierarchy is crucial to understand when building with frameworks. If you have ever coded software or applications before then developing for the web seems very cryptic. MVC doesn’t appear to make much sense on a standard web page.

However when you include a database connection the functionality of a framework starts to take form. You have a model of functions crunching information to save/pull from the database. Then you have a view of HTML/CSS styles on the frontend, along with a controller generally represented by forms or inputs on the page.

industrial smokestack for business

Frameworks which follow the MVC coding style are generally a lot faster and easier to debug. You know exactly where to look for errors and bugs within the code. It also naturally separates the backend programming from your frontend design view. Because of this, much of the code you find online will also likely work on your own site.

There is a lot of room for recycling code to use on a similar project. This can save you loads of time as a developer and many hours of debugging!

Focus on Custom Functionality

When you start coding with a framework it allows you to jump right into the detailed programming functions of your own project. Since all the ground work is already setup you don’t need to rewrite any of the basics. If you understand the basics this can provide an immensely helpful system.

Most code sources are extremely reliable and thoroughly checked for bugs. This allows you to develop out with your own models, following a similar syntax as the framework itself, without any unnecessary worries. If you enjoy writing code from scratch then this method is not likely to suit you. But the expendable nature of these frameworks means you can write code externally and port it over into the model.

CakePHP Coding backend framework

Or in many scenarios you can actually build out a custom module! Not all frameworks support the plug-and-play mentality. Yet it is a fairly common feature even among some frontend libraries. jQuery is the first which comes to mind featuring dozens of techniques for building your own plug-in. The web development framework Alloy is also modular and written for PHP 5.3+ environments.

Examples of PHP Frameworks

When just getting started you want to stick with something reliable and easy to use. Newbies just getting into frameworks will enjoy Zend or CodeIgniter.

home page design for CodeIgniter

Both of these projects have been under development for a few years. The PHP community is very adapted to their code style, so you will not likely have a difficult time solving problems. But if you start on any of these I highly recommend skimming their documentation pages first! This will give you an idea of how these frameworks behave, and if you can even utilize them.

Below are just a couple ideas for enticing PHP frameworks to check out. I have been a fan of CakePHP in the past, although I mostly work with custom CMS’ these days.

  • CakePHP – A very flexible option for newbies. There is no configuration edits or custom code required – just install the database and Cake is good to go. The whole development team is very knowledgeable and willing to help with issues. There are also a handful of published books geared towards explaining common Cake trends. Check out the CakePHP training videos online if you want to learn more.
  • Recess – A RESTful PHP framework for newbies and advanced programmers alike. Recess is lightning fast, super easy to learn, and perfect to install on a standard LAMP server environment.
  • Adroit – A lightweight PHP5 framework to get you developing faster! The core is built around an MVC hierarchy and utilizes the Smarty template engine. It’s also a breeze to implement your own Ajax calls between the database and frontend view.
  • Flourish – More of a general object-oriented library for coders. With this modular framework you aren’t limited to the MVC paradigm, although it is an option. The code is very secure and provides tons of examples on their website.
  • Yii Framework – A much more detailed framework for web developers. Yii allows you to rapidly prototype dynamic features such as user authentication, Ajax calls, caching, custom themes, and a whole lot more. Check out their full list of features on the website.

CSS Design Bundles

Code frameworks started out popular in the areas of backend development. Both software programmers and web developers have been utilizing these for years. But now there are countless frontend developers releasing their own design frameworks.

CSS is by far the go-to style language for the web. You can mockup an entire web page with fonts, colors, content boxes, alignments, and tons of other effects – all without touching the HTML. It’s a brilliant coding system which has revolutionized the field of web development(especially with HTML5).

Tokyo Japan at Night

CSS libraries can save you even more hardships on coding frontend. There are code frameworks which work on CSS grid systems, resetting browser defaults, dynamic webpage fonts, and a few other nifty concepts. Best of all many of them are free to download and come with an open-source developers license.

Common Recommendations

In the list below I’ve compiled some of my favorite CSS frameworks. This list will not be useful for everyone as not all developers enjoy using these code libraries! I admit that at times it’s just easier to write all your own code from scratch.

But when you really need to shave time off a project there’s no better solution than these libraries. Most can be downloaded and forked on GitHub from the original author. If we skipped over any good ones let us know in the post comments!

Conclusion

I hope this article has paved the way for some interested developers to get started using frameworks. In the modern era it has never been easier to get moving building a website. There are many open source databases of code you can start working on which are scalable in the long term.

Don’t try to push yourself into a single framework on the first day. I find it’s best to tread the waters a bit and try out a couple different names. See if there are any which fit your needs best, as different developers need different tools to work with. Whether coding frontend or backend you’ll slowly develop a sense of trust with these frameworks. Not only do they make your job easier, they provide a stable grounding for nearly any project you create in the future.

You might also like…

CSS Form Templates, Tools & Services →
40 Professional and Detailed Web Layout PSD Templates →
25 Completely Free Fonts Perfect for @fontface →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
30 Pure CSS Alternatives to Javascript →
40 Essential CSS Templates, Resources and Downloads →
Website Speed Part 1: Write More Efficient CSS →
50 Free Tools and Apps for Web Designers and Developers →
CSS3 Compatibility Tools, Resources and References for Internet Explorer →
10 Online Tools and Apps to Help Optimize and Format CSS →
50 Useful Tools and Generators for Easy CSS Development →


Advertise here with BSA