Please Not: All Of The Examples Below Use The UI Design Process:
I have worked for LELA and Easy2 for a total of 6 months. Below I have a mockup of the LELA tabs area and login page, as well as a mockup for Easy2's custom and generic applications. I learned that making a visual representation like this before I actually work unties a lot of question! Following extremely useful Graphic Design Process like that of Lisa Kurt Design, really gave me the ability to design User Interface pieces, logos, and other graphics. Another resource Webdesigner Depot, also steered me in the right direction of what a graphic design process includes (and included a lot of useful Wire Frames too!). Lastly, but importantly, you will find my Final Compositions deployed online below.
Very very last reminder, the two fake companies I made up (Infinite Sound and Image World) after all of the examples I talked about above, have the Graphic Design Guidelines in practice for their logo and their User Interface Design. Enjoy!
Lake Erie Landlord Association Project:
1) Sketch (Only Step needed because final result is already given!):
5) Final Composition:
Actual Links:
Tabs section link (Tab modification with Adobe Dreamweaver, Photoshop, and Illustrator):
http://www.lela.cc/
Login Page link (Login notification with Adobe Dreamweaver, HTML, and CSS):
http://lela.cc/CMS/wp-login.php
Easy2 Technologies Project:
1) Sketch (Only Step needed because final result is already given!):
5) Final Composition:
Flash Custom Application:
CSS/HTML Custom Application:
Flash Or Website Generic Application:
HTML/CSS Generic Application:
Actual Links:
Custom Application Interfaces That I Changed From Flash to HTML/CSS:
Link To Flash Version: http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=35786163¬racking=yes
Link To Custom HTML/CSS: http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35786163¬racking=yes#
Generic Application Interfaces That I Changed From Flash to HTML/CSS:
Link To Flash OR Website Version: http://www.ulta.com/
Link To Generic HTML/CSS: http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35947450¬racking=yes
More Custom Application Interfaces Flash to HTML/CSS:
Flash:
http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=35917203¬racking=yes
http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=36173214¬racking=yes
http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=35965146¬racking=yes
HTML/CSS:
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35917203¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=36173214¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35965146¬racking=yes
More Generic Application Interfaces Flash to HTML/CSS:
Flash:
http://www.discountgolfworld.com/
http://www.us-appliance.com/
http://store.calphalon.com/department/tools-gadgets/1913-1903-1982-1957
HTML/CSS:
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35896714¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=36157107¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=36104334¬racking=yes
These last two examples show the full Graphic Design Process (5 Steps) for two fake company logos and their User Interface Design for a Mobile Website:
Infinite Sound And Image World Fake Companies:
Logo Graphic Design Process Steps: 1) Research, 2) Thumb Nail Sketches 3) Wireframes (or Mockups), 4) Sketch Compositions, 5) Finalize Compositions
Steps 1, 2, 4:
Steps 3 and 5 (Adobe Photoshop and Illustrator CS6 were used):
User Interface Design Steps and Design:
Graphic Design Process Steps: 1) Research, 2) Thumb Nail Sketches (Not needed in this case) 3) Wireframes (or Mockups), 4) Sketch Compositions, 5) Finalize Compositions
Step 1 and 4:
Steps 3 and 5 (Adobe Photoshop, Illustrator, and Fireworks CS6 were used):
User Experience Development (UX) Process is clearly explained by Oracle.
Using the Agile User Experience (UX) Development Process, a team needs to follow Scott Ambler and Associates to successfully make a technology stack diagram and UI flow diagram for a thourough explanation of how the interface is developed.
Scott Ambler and Associate's Technology Stack Diagram:
Scott Ambler and Associate's UI Flow Diagram:
I have worked for LELA and Easy2 for a total of 6 months. Below I have a mockup of the LELA tabs area and login page, as well as a mockup for Easy2's custom and generic applications. I learned that making a visual representation like this before I actually work unties a lot of question! Following extremely useful Graphic Design Process like that of Lisa Kurt Design, really gave me the ability to design User Interface pieces, logos, and other graphics. Another resource Webdesigner Depot, also steered me in the right direction of what a graphic design process includes (and included a lot of useful Wire Frames too!). Lastly, but importantly, you will find my Final Compositions deployed online below.
Very very last reminder, the two fake companies I made up (Infinite Sound and Image World) after all of the examples I talked about above, have the Graphic Design Guidelines in practice for their logo and their User Interface Design. Enjoy!
Lake Erie Landlord Association Project:
1) Sketch (Only Step needed because final result is already given!):
5) Final Composition:
Actual Links:
Tabs section link (Tab modification with Adobe Dreamweaver, Photoshop, and Illustrator):
http://www.lela.cc/
Login Page link (Login notification with Adobe Dreamweaver, HTML, and CSS):
http://lela.cc/CMS/wp-login.php
Easy2 Technologies Project:
1) Sketch (Only Step needed because final result is already given!):
5) Final Composition:
Flash Custom Application:
CSS/HTML Custom Application:
Flash Or Website Generic Application:
HTML/CSS Generic Application:
Actual Links:
Custom Application Interfaces That I Changed From Flash to HTML/CSS:
Link To Flash Version: http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=35786163¬racking=yes
Link To Custom HTML/CSS: http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35786163¬racking=yes#
Generic Application Interfaces That I Changed From Flash to HTML/CSS:
Link To Flash OR Website Version: http://www.ulta.com/
Link To Generic HTML/CSS: http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35947450¬racking=yes
More Custom Application Interfaces Flash to HTML/CSS:
Flash:
http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=35917203¬racking=yes
http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=36173214¬racking=yes
http://webapps.easy2.com/cm2/flash/generic_index.asp?page_id=35965146¬racking=yes
HTML/CSS:
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35917203¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=36173214¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35965146¬racking=yes
More Generic Application Interfaces Flash to HTML/CSS:
Flash:
http://www.discountgolfworld.com/
http://www.us-appliance.com/
http://store.calphalon.com/department/tools-gadgets/1913-1903-1982-1957
HTML/CSS:
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=35896714¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=36157107¬racking=yes
http://webapps.easy2.com/cm_mvc/GenericIndex?page_id=36104334¬racking=yes
These last two examples show the full Graphic Design Process (5 Steps) for two fake company logos and their User Interface Design for a Mobile Website:
Infinite Sound And Image World Fake Companies:
Logo Graphic Design Process Steps: 1) Research, 2) Thumb Nail Sketches 3) Wireframes (or Mockups), 4) Sketch Compositions, 5) Finalize Compositions
Steps 1, 2, 4:
Steps 3 and 5 (Adobe Photoshop and Illustrator CS6 were used):
User Interface Design Steps and Design:
Graphic Design Process Steps: 1) Research, 2) Thumb Nail Sketches (Not needed in this case) 3) Wireframes (or Mockups), 4) Sketch Compositions, 5) Finalize Compositions
Step 1 and 4:
Steps 3 and 5 (Adobe Photoshop, Illustrator, and Fireworks CS6 were used):
User Experience Development (UX) Process is clearly explained by Oracle.
Using the Agile User Experience (UX) Development Process, a team needs to follow Scott Ambler and Associates to successfully make a technology stack diagram and UI flow diagram for a thourough explanation of how the interface is developed.
Scott Ambler and Associate's Technology Stack Diagram:
Scott Ambler and Associate's UI Flow Diagram:
0 comments:
Post a Comment