Posts Tagged ‘download’

The wireframing process is the straight-to-the-point and completely non-tech stage of any web project. It only requires that you define a skeletal outline of essential page elements such as headers, footers, navigation and content area and should illustrate how to cater and respond to any possible interaction from a user.It is the most important, yet underused, stage of any web or apps development.

There are several avenues you could take for sketching a wireframe, most notably pen and paper (the easiest and most cost effective way), but for the sake of this article we have focused on apps that are not only highly effective and easy to use, they are also completely free.

We have covered free wireframe apps before (here), but a year is a long time in web development – some of the apps we had previously covered are either no longer completely free or are no longer available. And as such, we felt that we should compile a new list with more detail and covering all areas of design including web pages, mobile apps and application dev. As well as showcasing a variety of free apps (11 in total), at the bottom of the post, we have also highlighted some premium wireframing services that do offer free, yet limited, options. You may like to try them.

With Lumzy, you can create mockups of how your site or application will function by adding events from the extensive list of controls on offer. As well as having great tools for creating your mockup, you can also create Message Alerts, interactive Page Navigation, add Links to external content, and much more. It does offer a great set collaboration tools for live team editing and a chat engine for deliberating over designs. All of this and it is absolutely FREE.Lumzy Homepage →View Editor →

Lumzy Editor Screenshot

Mockup Builder has just recenly been released and looks very promising. It is feature-rich and versatile by allowing you create various prototyping styles, including: UI mockups, interactive wireframes, website layouts, desktop software prototypes and even sitemaps & screen navigation. Of course, it does come with great collaboration tools for sharing with clients and colleagues. And yes, it is completely FREE.Mockup Builder Homepage →View Editor →

Mockup Builder Editor Screenshot

The idea behind Tiggr (currently in beta) is to give you the resources needed to create prototypes (for web, app or mobile) that look and feel like the final product. It allows you to design from a large number of components, share (via email, Twitter or Facebook), you can collaborate with any number of users and will generate an HTML/JS/CSS so that you can preview your UI mockups very quickly. A 10 second registration (email & password) is the only thing you have to go through to use this fantastic FREE tool.Tiggr Homepage →

Tiggr Editor Screenshot

Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface. Again, this app is FREE and only requires a quick registration.Frame Box Homepage →

SimpleDiagrams (free version) is a tiny Adobe Air app that helps you express your design ideas quickly and simply. Drag & drop symbols from its libraries, add images or post-notes, export as a PNG are all of its features, adding up to just just enough functionality to create a decent mockup.SimpleDiagrams Homepage →

With iPhone Mockup you have a choice of using either the Pencil styled editor (screenshot above) or the Illustration editor (screenshot below). Whichever editor you decide to use, the functionality remains the same: Its a very simple and easy to use app that allows you to create your own iPhone mockups very quickly, share them with other people at the click of a button, and any changes you make will by synced to everyone who has the mockup’s URL.iPhone Mockup Homepage →Illustration Editor →Pencil Editor →

iPhone Mockup Editor Screenshot

fluidIA is a downloadable web based design tool for prototyping rich user interfaces. It allows for rapid refinement and exploration of concepts using an object-oriented approach to design. The original idea behind fluidIA is to discover whether a group of interaction designers, IA’s, UX professionals and developers can create there own prototyping tool in an open way. Progress on FluidIA has been a little bit slow recently, but the actual app works perfectly for designing a wireframe mockup.fluidIA Homepage →Fluidia (GitHub) →

fluidIA Editor Screenshot

Pencil Project is a free and opensource Firefox addon for designing GUI prototypes. With its built-in stencils you can create linked multi-page UI documents and finally export your mockup in either HTML, PNG, Openoffice.org document, Word document or PDF. What more would you want from a wireframing app? This truly is an essential Firefox extension that any serious developer or designer should use.Pencil Project Homepage →Screenshots →

Pencil Project Editor Screenshot

CogTool is a FREE and powerful general purpose UI prototyping tool with a difference – it automatically evaluates your design with a predictive human performance model (a “cognitive crash dummy”). You simply create a storyboard of your design idea with sketches, images or on a canvas with CogTool’s widgets, demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks. CogTool offers a lot of support via its extensive user guides, step-by-step tutorials (video and articles), its forum and also offers example files to help you get started.CogTool Homepage →

Prototype Composer makes it possible to simulate how an application will look and function before any code is ever written. Instead of endless text entries, complex data hierarchies, or too technical UML diagrams, Serena Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high fidelity prototypes that simulate a working application. It is a tool for prototyping data, processes, activities and most importantly, user interfaces. The application also works as a fairly easy to use Project Management tool. The Community Edition is its free version which allows users to work in a sample project as well as in one user-defined project.Prototype Composer Homepage →

DENIM is a free desktop application that is available for Windows, Unix, and Mac OS X. DENIM describes itself as “an Informal Tool For Early Stage Web Site and UI Design”. It combines many of the benefits of paper-based sketching with existing electronic prototyping tools. It allows designers to quickly sketch an interface, preserving the important properties of pencil and paper: a rough drawing can be produced quickly and the medium is flexible. However, unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified.DUB – DENIM Homepage →

Premium Wireframe/Prototype Apps with a Free Option Available

All of the Wireframe/Prototype/Mockup web-based applications below are premium services that do offer a free, yet limited, option. You may like to try them:

Drupal has perhaps one of the most misunderstood reputations within web design. It is generally thought of as an overblown and hard to learn CMS that is aimed only towards large corporate/business websites. Yes, it can handle very large and complex web sites, but the truth is Drupal can be used effectively for any type of web site, from blogs, personal portfolios, community driven sites, and, as we have already mentioned, large corporate, business and government sites as well. And, especially with its latest release (Drupal 7), it has never been easier to learn and use. It is a truly remarkable CMS.

We haven’t published anything related to Drupal in awhile, so this post is long overdue. What we have aimed to do is blow away any idea you may have had that all free Drupal themes are basic and ugly – we think we have achieved that. You will love the varied selection of beautiful themes we have for you below.

Please note that even though Drupal 7 was released last month there are currently very few compatible free themes available (we are sure that this will change in the coming months). You will find a small selection of Drupal 7 themes below, but the vast majority are only compatible with Drupal 6.

The Jackson Theme is a feature-rich, well-organized, theme based on the NineSixty (960) Theme. Its clean layout and lightweight code make it a perfecttheme for small tomedium-sized business to get up and running quickly.Download & Docs →View the Demo →

The beautiful Modernist theme is a minimal theme focused on great typography. Beautifully built yet transparent, it has been designed with a focus on optimal typography in order to better showcase your content: text, images and video.Download & Docs →View the Demo →

This is a free under construction theme for Drupal. It comes with a choice of 6 colors (blue (default), brown, green, orange, pink, purple) and you can customise the logo, favicon, title, add Google Analytics code. all within the themes setting page.Download & Docs →View the Demo →

Frameworks and Base Themes

The Square Grid theme has been inspired by the Square Grid CSS Framework. The concept of this theme is simple: To provide a base theme defined by the Square Grid framework, for designers and front-end developers to use as a parent theme for a Square Grid-based design.Download & Docs →Docs

This theme has been developed to allow rapid creation of custom (sub)themes and includes basic styles and features. Compared to many existing Drupal theme frameworks it works right away, it is lightweight, and there are not many of settings to obey.Download & Docs →View the Demo →

Drupalizing is a resource that allows you to suggest (and download) your favorite WordPress themes' port to Drupal. Just visit the site, drop in the WordPress theme's link and name, and if your suggestion is appealing enough, that particular WordPress theme will be ported to Drupal by the Drupalizing guys. The only catch is that only GPL licensed themes can be ported (you know the drill, copyright issues etc.)! So far, four themes have been ported: JournalCrunch, Bluemasters, Magazeen Lite and ImpreZZ, you can view them below:

It has become a common necessity for website owners to collect data and manage it properly. Creating a MySQL CRUD class allows you to conveniently create, read, update and delete entries for any of your projects, indifferent of how the database is devised. CRUD allows us to generate pages to list and edit database records. So, in this tutorial I will show you how to build a simple CRUD web app, that will empower you with the basic functions of database management.

Before continuing with the tutorial I would like to discuss the following definitions:• What is CRUD?• What is a database?• What is a table?• What is XAMPP?• Why we use Dreamweaver or any other IDE for website development?

What is CRUD?

CRUD stands for create, read, update, delete. So before working on any language, we are going to get our hands wet by going to CRUD operation.

What is database?

“A comprehensive collection of related data organized for convenient access, generally in a computer.” This means database is something we use to store our data.

What is table?

A table is a container that holds information about like items. For example, an “Employee” table would contain the same basic details on each employee: name, title, department and so on.

What is XAMPP?

XAMPP is a free to use software that comes with three major services:-1. Apache ()2. Mysql ()3. PhpMyAdmin ()

Why do we use Dreamweaver or any other IDE for website development?

Dreamweaver is a very popular IDE (Integrated Development Environment). IDEs are used for fast website development as it is more reliable and makes it easy to remove and identify errors at no time.

So let start our topic as we have gone through all the necessary knowledge we have to be known.

Step-1: Creating the database:

First run the XAMPP and start the Apache and MySQL services. If it does not initially start then try to see if you have Skype or any other application that may be using XAMPP’s ports. Close these applications to avoid any conflicts. Open phpMyAdmin and start Apache and MySQL.

Step-4: Insert records in table:

In the above statements ‘user’ is table name, ‘username’ is the column name of the database table, ‘user’ and ‘password’ are also the column names of the table ‘user’. To run this query we use mysql_query($query).

The above code runs when the delete link is pressed. It first checks whether the operation keyword is set or not. If it is set then check whether it is delete operation and then runs the delete query. If the query runs successfully then it shows ‘Record Deleted!’ with center align to the page.

This defines the form with the method post. The difference between post and get method of form is that with get method the form submitted values are showed in the url and there is limit to insert values with the form. Post is used if we want to submit some private data and want to hide the information from the user. The data is not attached with url. Action defines where to submit the values. We have to submit the values in the same page so we type the name of the same file i.e index.php.

Hidden type means this field is hidden from the user but it contains the data and is also submitted when the form is submitted while pressing the button. I am using this hidden field to check whether the form is submitted or not.

These statements are used to add some data to the url i.e id, username and password.

How this application works

First the page loads and then there is an option to insert record. If any record exists in the table then it shows up with the edit and deleted links. When we click on edit link, a new form opens and we can edit the record and then click on update record button and the record is updated in the database. The page loads again and this time it shows the new updated records with the same edit and delete links. When we click on the delete link the record is deleted and a message will be displayed at the top of the page that the record is successful deleted. This is how the application works.

These are the terms that may help you more:-

isset() isset() is used to check whether the variable passed to this function has assigned any value.

Hidden field The hidden type of html field is that which is submitted with the form but not visible in the page displayed. We use hidden fields to transfer values in the form such as id of the table.

How to run the code

Run the code in Firefox or Chrome by first running XAMPP with apache and MySQL started. Also note that you have to create the database and table with same name I used column names with same name as I have used in this application.

So, you now know the basics of CRUD in PHP. I hope you liked this tutorial and you have learnt CRUD in PHP.

Japan plays host to some very impressive website designers. Their skills in the arts cannot be compared and demonstrate a powerful digital force among Internet readers. Luckily understanding how to read Japanese isn’t required to admire their website graphics and animation effects.

We’ll be looking into a few Japanese website designs which have pushed the limits on conventional development. As a designer it’s a refreshing feeling to work with alternate design concepts and build your own unique ideas off these.

The Rise in Flash

Many of the most popular Japanese websites have been built in Flash, and this is no surprise. Although Flash-based websites do not rank very well in Google (at all) they offer a unique user experience which can’t be found anywhere else.

In fact, Flash offers so much extensible content you may be surprised at just what is possible. Motion backgrounds and animated menu effects are just the tipping point on many Adobe Flash powered websites. Intricate portfolio layouts and detailed characters almost spring to life off the webpage.

One overlooked misconception is the loading speed of each page. Because the entire website is Flash-based it will require a large amount of bandwidth to transfer and download all of the page content. This frequently leads to very long loading/splash pages which are a huge loss for potential user experience.

Although in the end it’s difficult to provide any judgement on the Flash-based approach. There are also many Japanese websites which are built off HTML5/CSS3 so I’m not categorizing all layouts as Flash-based. However with such a wide range of out-of-box thinking Japan has shown us a new outlook on envisioning the modern day website design.

Animation Ignition

It seems the Japanese community is well renowned for their work in the digital animation arts. Ranging from television to video games it seems the artistic works meld into the islands’ society and culture.

In many new-age web designs we are seeing much more illustrated artwork and digital graphics. Icon designers have also integrated an enormous amount of hand-drawn effects into their works. Japanese website designs have become much more branded by the likes of mascots, illustrated vectors, and small page icons.

Similarly artists who offer these graphics showcase their work on many places throughout the web. Twitter backgrounds and Deviant Art accounts are full of some amazing illustrations from past designs.

Custom UI Pattern

This is a common trend amongst web designers and has been growing rapidly. Many Japanese companies which involve their products in the entertainment sector have gone above and beyond to create a dynamic user interface to match their website.

Many of the websites coming to mind include innovative virtual worlds from video games. Katamari Damacy and Kingdom Hearts II specifically stand out as offering a very powerful user interface presence. The striking similarity between menu links in-game and on the webpages are resounding.

This can be seen not only for these games, but countless other series. The most common approach of course is an entire Flash-based website constructed through ActionScript events. Even so, other Japanese graphics artists are creating unique UI effects outside of just the video game industry.

Elements of Physical Reality

It’s not too often we’ll see images of physical reality built into the most popular websites of today. This is quite the contrary of many popular Japanese artists which in fact specialize in building outstanding modern-day layouts.

These include shots of arial birds-eye-view photos from cities and taller buildings. Many times the background or Flash animation on a page will include common everyday natural elements such as cats, trees, cars, and entire human cities. There are neat user effects applied to create a natural mood (e.g. website colors changing from day to night).

These graphics of buildings and people can sometimes even be built into the website itself. The varied degree of creativity from Japan shows even entire websites using a small land mass as navigation for the entire website. Pages can be accessed via buildings, lawn signs, even blimps flying atop the page heading!

Web Gallery Showcase

Below is a small collection of Japanese website designs. These include mostly Flash pages with animation effects and custom UI elements. If you’re looking for design inspiration this may be one of the most creative and “out-there” galleries.

The designs are from a selection of varied topics and niches from a handful of time periods. If you have other suggestions for similar websites feel free to share them in the comments below.