Check out my portfolio and contact me.

Archive for February, 2016

Wireframes and Data Models, a look into building a web application

Posted on: February 14th, 2016 by Redd No Comments

For my first post in a very, very long time we’ll be looking at the Wireframes and data models of a web application I’m currently building in grad school. The application is an asset/project manager that will track as much of the user interactions within the system along with a visual flow of assets through the pipeline of the project for CG Studios. I’ll be doing several blog posts where I’ll discuss the different parts of the creation processes of the web application. The vision I have for the web application is one where it will be entirely modular and can be setup anyway when it comes to adding departments, users, and projects into the system. Along with control on a per project basis of the users and departments involved. Along with having greater information on the users like salary, average time on tasks, etc, I hope to then be able to visually demonstrate for project leads to be able to see the flow of assets (binary files, images, 3D models, scenes) through the production pipeline. Being able to give accurate eta updates or bids on work is a goal as well (yay big data).
This first post is going to be about the initial development of the application, where I’ll be discussing the wireframes and data models that I’m looking to use with the web application. So sit back and enjoy as I flop around while trying to figure out how to one man build a large complex application. I’m neither perfect nor an expert and comments/suggestion left below are always welcome.


To begin making sense of any kind of user interaction with the web application, I started with just simply sketching out the potential interactions on graphing paper creating wireframes. Some of these are just simple quick drawings where I explore just one potential look or interaction. I sketched out some of the core pages and how some of the interactions on those pages might play out. Nathan Barry does a wonderful job of explaining his workflow when designing the views of a web application.

Project View

Departments View

Asset Views

Task Views

Data Models

Continuing on while looking at the wireframes and data models of a web application, we will look at the data models. These models listed below will form the core of the management system. These models are all still a work in progress. If you are unfamiliar with data models and would like to learn more checkout’s course on the subject. Simon Allardice does a fantastic job of explaining relational databases in a format that is agnostic.


Project Model

  • name = CharField
  • date_created = DateTimeField
  • is_active =BooleanField
  • created_by =ForeignKey(CustomeUser)
  • client = CharField
  • icon=ImageField

Department Model

  • name = CharField
  • date_created = DateTimeField
  • is_active = BooleanField
  • created_by = ForeignKey(CustomeUser)
  • projec(s)t =ManyToManyField(Can belong to many projects)
  • description = CharField
  • icon=ImageField

Asset Model

  • name =CharField
  • date_created =DateTimeField
  • created_by =ForeignKey(CustomeUser)
  • project =ForeignKey(Project)
  • current_department =ManyToManyField
  • icon=ImageField

Sub Asset Model

  • name = CharField
  • date_created =DateTimeField
  • last_modified =DateTimeField
  • created_by =ForeignKey(CustomUser)
  • parent_asset = ForeignKey(Asset)
  • checked_out = BooleanField()
  • current_checked_out_user =ForeignKey(CustomUser)
  • location =FilePathField(allow_folders=False)
  • type =ForeignKey(AssetType)
  • current_department =ForeignKey(Department)
  • object = ObjectConrolerClass()
  • iteration_amount = IntegerField
  • asset_dependencies = ManyToMany(SubAsset)
  • icon=ImageField

Asset Type Model

  • name = CharField
  • date_created = dateTimeField
  • created_by = ForeignKey(CusomeUser)
  • accepted_file_types = Many

Custom User

  • email =EmailField
  • first_name = CharField
  • last_name = CharField
  • is_staff = BooleanField
  • is_active = BooleanField
  • date_joined =DateTimeField
  • objects = CustomUserManager()
  • salary_wage= IntegerField
  • average_task_completion_time = TimeQueryClass()
  • current_assignments = ManyToMany(Task)
  • departments = ManyToMany(Department)
  • projects = ManyToMany(Project)
  • avatar = ImageField

Task Manager Model

  • name = CharField
  • assigned_user = ForeignKey(CustomUser)
  • assigned_by = ForeignKey(CustomUser)
  • date_assigned = DateField
  • ate_completed = DateField
  • feed_back = CharField
  • description = CharField
  • assigned_assets = ManyToMany
  • assigned_sub_assets = ManyToMany
Thanks for reading my post where I looked at the Wireframes and Data models of the current web application I’m developing. Please feel free to leave comments below, to ask questions, or share thoughts.