Create a basic framework for an application UI

  • Status Closed
  • Budget $750 - $1500 USD
  • Total Bids 20

Project Description

Create all relevant HTML, CSS and exemplary working dynamic components as basic frontend-framework for a management user interface. See the attached wireframe for an example. The project is *not* about implementing screens for the actual application, but only to build up a generic framework and set of (visual) components like forms, buttons, lists, etc. to be used throughout the application. Actual application implementation will be part of a follow-up project.

Important remark: The bid can also be lower or higher as the given range. Just a rough guess.

A. Deliverables

0. Select a basic JavaScript framework to use. Preferably AngularJS. If a different one is selected then it must be explained why. We might still stick to Angular though.

1. Create a HTML & CSS blueprint (framework) containing all outer elements like meta and main menu, page structure

2. Create styles for all basic html elements (buttons, input fields, dropdowns, etc.)

3. Create several visual components that can be reused

a. Date-Picker

b. Forms

c. Paged lists

Of course these should just be styled versions of the underlying JavaScript framework

4. The visual appearance should be

a. Modern and mostly flat

b. Fitting the overall CI/CD as can be seen in the attached picture

5. Non-functional requirements

a. Very clean naming following modern paradigms

b. Clean implementation, easy to understand, modular CSS

c. Reusable CSS i.e. easy to use component styles

d. Unobtrusive JavaScript principles. No JavaScript directly in source html

e. Clean, modern and modular JavaScript

Delivery will be in form of functional HTML Prototypes

1. Several HTML sites showing:

a. A form including post, dynamic reloading of data, validation, Datepicker element and tabs for several form sections

b. A list including paging

c. Clickable menus

2. Using a simple PHP script simulating AJAX calls (i.e. taking requests and returning JSON results) independent from the true backend logic (the actual backend is not written in PHP but in C#. But we always build functional HTML prototypes first that work independent from the backend based on simple Mock JSON calls before the frontend is actually built into the application).

3. Documentation of the visual components and how to use them

B. Procedure

1. First create one or two visual proposals (can be done in html or as pictures)

2. Then implement basic framework (no forms, not lists, just the wireframe with menu and basic layout)

3. Finally create sample pages for forms / lists. Use the wireframe example as basis for the list implementation

C. Further steps

If this project is successful then further work will follow. Further work will be actual implementation of application page frontends based on the new framework. The communication with the backend will mostly happen using as RESTful API (using JSON). An example would be a page to edit a application configuration (including several sections with options, that may contain drag&drop operations, dynamic adoption depending on values, etc). Another example would be a comfortable search interface (with result highlighting, recommendation features, etc.). A visual timeline showing the distribution of versions over time (similar to the on on the mockup).

Again: All this is not part of the current project, but would be done as follow up. We are interested in building up a long term relationship with a frontend-developer.

D. Attachments

1. Wireframe showing the basic building blocks of the management UI (site elements, overall structure)

2. Image showing the Basic CI of our future website (the management UI is *not* part of the future website. It is just the management page for our core product we sell. So it should reflect our CI).

Get free quotes for a project like this
Awarded to:
Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online