Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Prototyping with XHTML?

Featured Replies

I found this article ( http://www.boxesandarrows.com/view/prototyping-with ) last night when researching prototyping for web design.

 

The planning process of a website is an important step to make sure the website is built to highest standard the client is looking for.

 

Prototyping with XHTML looks like its better than any other method and I'm really interested in the idea.

 

I would love to hear thoughts and opinions on this subject if you'd care to pitch in.

 

Thanks

Aaron.

Have been using that method for nigh on 14 years now. Up until fairly recently there were no fancy prototyping/wireframing tools such as http://www.hotgloo.com/ so HTML/CSS mockups were the only way to demonstrate prototyping to clients.

 

For my money you can't beat HTML mockups, not only do they demonstrate site structure, navigation and workflow, but if something needs tweaking it's quick and easy to do with CSS.

I have never been a fan of using code for mockups. It doesn't let the creative mind explore all options. Far too often the coder will have a "that's good enough" thinking and leave the design unfinished.

 

Also mockups and wireframes for responsive site is not that hard. Just do it in 2 or 3 sections. Desktop tablet and smart phone.

 

Usually when you go right to code, you use the first thing that sorta works instead of fleshing out the interface beforehand. Creativity shouldn't be limited to technology. That's why I start off with good ol paper and pencil. In print design you are taught to never go right to photoshop, InDesign, ilustrator. I still believe that. In web design, people are going right to code. I believe the design is suffering because of it. Everything is starting to look that same now a days. They are worried about more on trendy looks, not solving the actual design.

 

I will stick with me starting out with paper and pencil.

 

As a side note, I'm sick of seeing new designers doing nothing but 'minimalistic' designs because it is quite clear they lack the knowledge and or skills to fully flesh out a design. Outcome of going right to code? Dunno yet.

  • Author

I don't mind the old pencil and paper to draw up a layout and its elements at first.

 

Though as I do like Photoshop mock-ups for either the client to see before build phase or just using a whole psd and convert into code. I do like this.

 

But I'm slowly moving towards the idea of doing mock-ups and prototypes in code after pencil and paper and then after the code mock-up, maybe some mood boards for colour and certain aesthetics.

 

Coding a mock-up from the start gives a lot of advantages, you get to see how the site will respond in different browsers, you can spot mistakes early on, the client can actually see how the site works, all be it, in a simple unpleasant basic design. That's the next phase can be mood boards to show different colours and fonts, then move on and code the css and add the fonts before signing off and getting the work finished and completed.

 

Also you already have the code typed up. The Photoshop mock-up displays it as a picture, not functional and not entirely what it will eventually look like after the site has been finished.

 

 

If there is anything I've missed or if you think different or I'm wrong, please comment.

I wouldn't say your wrong, just not how I would do it. code first doesn't let creativity breathe. You are also wasting time with changes that the client may or may not want. I can draw and even mockup something in photoshop ten times faster than actually coding it.

 

I've also never met a client who can't understand how to read and figure out how flow charts and static wireframes work. I think most of the arguments are for the coder... Not the client. And as such I don't think we should waste time on coding a layout that is still in the thinking process.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.