About
Hi! My name is Mike.
I am an IT Specialist with a multidiscipline background in product and process design, government services, technical support, and compliance.
I hope to provide a unique perspective to an incredible team that can leverage some of my past successes towards our future goals. In past roles, I led the user interface and experience modernization effort of an industry-leading software platform, acted as a key team member in the operations of a Federal Agency, and guided business practices towards a better future.
I enjoy exploring ideas around interactive design with a focus on user interface design, user experience, and business intelligence.
If you came here from LinkedIn or Indeed - Thank you for your consideration
UI/UX
You are the U in UI
Interactive design, designing for the user, and a user first approach are keys to a solid design; If users are confused, we need to review our design.
I believe in a curious approach to problems, examining multiple options for one idea and always say that "a blank page cannot be edited."
Empathising with our users is an important part of modern software design and the design of software needs to be fully integrated into the Customer Journey - where the different pillars of an organization align to deliver a great product - Sales, Marketing, Design, Development, Support.
Tools
I like to use most of these:
Frameworks
Angular.io - Angular is a TypeScript-based free and open-source web application framework.
Bootstrap - Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Wireframe, Prototype, Collab
Sketch - Sketch is a vector graphics editor for macOS used for user interface and user experience design of websites and mobile apps.
Draw.io - A free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams.
Balsamiq - Wireframes
Figma - Collab
Zeplin - Collab
Marvel - Rapid prototype
Reference
Stack Overflow - Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky.
Report
Observable - Data and Reporting
D3 - Data Driven Documents. D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. Based on Protovis.
Google Analytics - Website Data
Snowflake - Mobile Data
Create
Animate - Adobe Animate is a multimedia authoring and computer animation program developed by Adobe Inc. Animate is used to design vector graphics and animation for television series, Online animation, websites, web applications, rich web applications, game development, commercials, and other interactive projects.
InVision - Design
Swift - App dev from Apple.
Unreal Engine - 3D game designs
Principle - App design
Native Instruments - Hardware and Software for Music Production
Style
Material.io - Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.
Material - Color - Google's Color Picker
Adobe Color Wheel - Interactive Color Picker from Adobe
CSS Gradient - Cool Gradients
Ideas
Different designs of the same page.
varizoom.com (old)
Recent Design
This design uses SVG and negative space to draw circles on the page.
Recent Perspective
Some thoughts on design, user interface, and user experience.
Design for the User
User Experience, or UX, is a method of design that focuses on all aspects of the solution in regards to the user. This means looking at both the design and function of a product, and also the human side - the emotiontional response, creating positive feedback, increasing user engagement - concepts that are subjective and difficult to code.
This Page
This page uses position, hover, and some JQuery.
$("div.expansion-btn").click(function (){
classes = this.className;
var divNumber = classes.slice(-2);
var toGetId = "#div-"+divNumber;
if ($(toGetId).hasClass("expanded-div")){
$(".normal-div").removeClass("compressed-div expanded-div");
}
else{
$(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");;
$(toGetId).removeClass("compressed-div").addClass("expanded-div");
}
});
See juststuff.io on Google's PageSpeed juststuff.io @ google