Web designers collaborate with business analysts, UI specialists, and developers to create a wire-frame mockup. Typically, these wireframes are low-fidelity visual diagrams that represent the skeletal framework of your outfacing website. Aspects of the wireframe include page layout, various UI elements, and navigational systems. A wireframe bridges the underlying information architecture with the visual design of the website.
Low-fidelity wireframe example:
After the wireframes have undergone an internal review, web designers create high-fidelity, Photoshop design files (.psd) or Sketch files. These files reflect the modifications made to the wireframes and add presentation elements to the website pages and their states.
These graphic designs should meet your organization's business and content requirements and align with best practices for the end user experience. (When graphic design tasks are complete, a business analyst may include screen captures of portions of the design, containing areas that have been boxed out to define the functional areas of each page.)
After developers have markup to work with, the next step is to build views in the ASP.NET Core MVC framework. Developers integrate HTML and CSS code - often referred to as cut up - with the view files that render live pages. In effect, the HTML and CSS code is "cut up" and distributed within the views. When an end user's client requests a page, these view files piece the cut up back together and serve it to the client as a web page.