Ipad Web Page Design App

Read Time: 6 mins Languages:

We've been talking about the tablet and web design together for nearly two years now, but always as the consumer device that we're designing for. However, the tablet is not only for our consumption of websites, but also the creation of them through the availability of a bunch of great design-oriented apps.

From basic planning apps to code editors for the development of your site, the iPad has a nice selection and we'll showcase some of the best today.

Adobe Ideas

Adobe Ideas is a digital sketchbook app from Adobe that allows you to draw out content on your iPad including finger-drawn wireframes and other planning-oriented drawings. Adobe Ideas is a great app to just sketch on, anywhere you are, doing so naturally with your finger.

Adobe Ideas features all the basic tools including size and opacity sliders for your mark. For an in-app purchase (which is marketed as a "premium feature" even though Adobe now charges for the basic app), you can also get layers functionality to build up your drawings layer-by-layer.

Adobe Ideas is a $5.99 app available in the App Store for iPhone and iPad, although layers require a $0.99 in-app purchase.

iMockups

Where Adobe Ideas is mainly a general sketchbook app, iMockups is something much more specific. Through its apt name, you can likely guess that iMockups is an app for creating mockups and wireframes for websites and iPhomne/iPad apps.

Like many wireframing tools, the main creation process consists of using a bunch of pre-design elements and arranging them on your canvas. When you have them on, modal controls allow you to move them to pixel perfection by using nudges or co-ordinates.

iMockups is great for rapid wireframing, especially when you're away from your desk. It's available on the App Store for $6.99.

Mocking Pad

Mocking Pad is another wireframing app with a similar story to iMockups. The app allows users to pull in a number of elements branded with the Marker Felt-style font that has become synonymous with wireframing apps.

Mocking Pad is $9.99 in the App Store.

OmniGraffle

OmniGraffle is one of the more expensive apps on the App Store, clocking in at $49.99, and it's all about the planning stage. OmniGraffle is a planning app for creating diagrams, charts, wireframes and other layouts that's promoted as being highly adaptable to a bunch of different situations including web and graphic design. OmniGraffle uses the multitouch input of your iPad to help you do everything from basic, freehand drawings to extensive, structured charts.

The app is available for $49.99 on the App Store. However, you should note that reviews criticise export limitations and the near-requirement to have a Mac if you want to edit files off the iPad since OmniGraffle is not available for Windows.

SketchyPad

One more wireframing app for iPad is SketchyPad. Like all the others, SketchyPad allows you to create wireframes and plans for your web designs on the go on your iPad. While the concept of what the app does is majorly the same as the others, SketchyPad does so with a little bit more color than the monochromatic-based elements of the others.

SketchyPad is in the App Store for $4.99.

Dropbox

Now we're moving into the apps you can actually use in the creation stage of web design. Dropbox is more of a behind-the-scenes utility that can be used for syncing content between your multiple devices so a document on your iPad can be fully synced with your computer, and vice versa.

Dropbox is also integrated into some of the other apps on this list which has an almost-silent footprint on your workflow yet facilitates the syncing of your documents between devices.

Dropbox is a free app on the App Store and a free account will get you 2GB of storage space with paid, more spacious plans available.

Evernote

Evernote is a notetaking and archiving app that's not web design-specific but can be used within a designer's workflow. In web design, Evernote can be a great way of storing inspirational imagery and ideas to be later recalled across one of your connected devices.

This iPad app has been placed on a ton of honorable lists including the New York Times' "Top 10 Must-Have Apps". It is available for free on the App Store, with paid plans available for higher storage and other features, including offline notebooks.

Adobe Photoshop Express

Adobe Photoshop Express is another app from Adobe which is less focused on creating new images (like Adobe Ideas) and more on editing existing ones. That means, should you be using your iPad as a web design device, it's really simple to do some light image editing including cropping, rotation, exposure/saturation manipulation and applying borders and effects.

Adobe Photoshop Express is available on the App Store for free. There is a $4.99 in-app purchase too which gives you the "Adobe Camera Pack", a set of tools for your phone/tablet/iPod camera.

Textastic

Textastic is a versatile text editing app for iPad, an app I used to use a lot. Textastic includes all the basic functionality of a good text editor such as syntax highlighting, line numbering, line/character count, previews and more.

Additionally, Textastic is one of those apps I previously mentioned with Dropbox support, allowing you to work on a site on your iPad and have it sync to your other devices (and vice versa).

Textastic is available in the App Store for $9.99.

Gusto

Like Textastic, Gusto is a code editing application that allows the iPad to become a real productivity platform. Many Mac-based web designers choose to use Coda, and Gusto shares many similar features including a "Sites"-esque file system that organizes your files by each of your different products.

Of course, just like Textastic, Gusto includes all the basic traits of a good code editor including syntax highlighting, line numbering etc. Gusto also includes built-in support for file transfer over FTP and SFTP which shares some of the benefits syncing over a service like Dropbox provides.

Gusto is available for $9.99 in the App Store.

Typography Insight

Good typography is a fundamental element of good web design, and, for that reason alone, Typography Insight should be in any good web designer's iPad toolkit. The app has a bunch of tools for trying out and comparing different typefaces through methods such as typing in a font, looking at them with different levels of zoom enabled and measuring.

The comparison tools may be the best feature, however, allowing you to put fonts side-by-side and on top to make more educated decisions about what to use in your work.

Typography Insight is relatively cheaper than other apps on this list, selling for $1.99 in the App Store.

CSS3Machine

CSS3Machine is an iPad app for creating CSS styles and trying them out in a preview. With the app, you can create various CSS styles including transformations, gradients and more, and then transfer them to your computer over WiFi.

The app is in the App Store for $3.99.

.net: Practical Web Design

.net is a web design and development-focused magazine covering topics like CSS, PHP, JavaScript and HTML5 written by "many of the world's most respected web designers and creative design agencies".

.net is a magazine available in the App Store, and issues are priced at $6.99 or available through subscription plans for three months ($20.99), six months ($34.99) and one year ($64.99).

So there you go, thirteen great iPad apps that should be on any good web designer's iPad! If you have any suggestions, feel free to leave them in the comments.