I have a task/mini project to complete which is along the lines of GUI development.
Things given to me
A Visual Studio project (on top of which I am supposed to work) which is a HTML, JavaScript and CSS based web application project that does adding, deletion, editing data and other small tasks upon button clicks. But the GUI for this project is in the basic style containing simple buttons (e.g “Add”, “Delete”), Text boxes and tables.
I have also been given an adobe illustrator file that contains the image of the expected rich GUI. Image attached towards the end of this post
My task
“Create a high-fidelity version of the application from the provided basic design (project) to match the expected concept design (the rich GUI expected)”
I am supposed to create a rich GUI (fancy looking) (by any method) and when I click the new GUI’s buttons “Add”, “Delete”, it should call the javascript functions as in the original project.
CAN SOMEONE TELL ME HOW DO I GET STARTED WITH THIS
I thought of using Silverlight or WPF for creating the rich GUI but it generates xaml code. A HTML output will be of great help to me so that I can call the javascript functions.
What is the best approach to get this done. Thanks 🙂
HELP GREATLY APPRECIATED! THANK YOU VERY MUCH! 🙂 🙂 🙂
No problem, when designing the UI I like to begin with getting the basic layout of the controls wire-framed onto the page. Once the wireframe begins to take shape then I’ll hook up my javascript events. It’s recommended that you get your layout pretty much where you want it before you start fine-tuning your CSS branding.
Here’s a quick starter wireframe for you: http://jsfiddle.net/KodeKreachor/8sPRx/5/